Mai Path Flight Booker

A functional prototyped flight booking website using Figma variables, complete with a supporting design system.

UX/UI

Figma Variables

Illustration

Product Design

Design System

Prototyping

Shinto Shrine Cover Image

Timeline

15 Weeks

Project Year

2024

Role

Designer (Individual Project)

Software

Figma, Procreate

The Final Prototype

MaiPath Design System

A significant aspect of this project involved developing a design system specifically for the MaiPath flight booker. This design system was designed to enhance consistency, improve scalability, and streamline updates, ensuring a seamless and cohesive user experience throughout the booking process.

View Full Design System

The Problem

Create a fictional airline booking system using Figma Variables that has a functional prototype. Show a clear booking process and establish a design system for branding that supports future scalability.

The Solution

A fictional local Japanese airline specializing in a choice few popular flight paths that are available everyday. Input variability using Figma Variables for a realistic prototype.

Design Process

Research

1

2

Planning

Styles + Assets

3

Compositions

4

Prototype

5

Styles +
Assets

Styles +
Assets

Styles +
Assets

Before starting the project, popular flight websites like JetBlue, Delta, and United Airlines were reviewed to understand their booking systems. A generalized user flow was mapped out based on these insights for future reference.

The first step was to determine which locations would offer flights, calculate the flight durations between each location, and evaluate the total number of possible flight combinations.

Before designing the screens, careful planning of the flight schedule was essential to avoid overlapping flights. The schedule included four locations, with considerations for layovers and general rest time in the terminal.

The next step was to program the flight schedule’s variables. This involved setting up a functional date picker and location picker, as well as ensuring that the flight options generated were accurate based on the selected inputs.

Before finalizing the flight booker’s style, I used Bing Image Creator to explore new design ideas. I generated homepage designs in a Japanese woodblock style and chose my favorite ones to guide the illustrations and layout.

To give the flight booker a casual and adventurous feel, I created a few illustrations. Using Procreate, I made a layered map that works with Figma Variables to toggle location pins for takeoff and destination spots. I also added clouds and a tree, inspired by the AI images, for general use."

Styles +
Assets

Styles +
Assets

Styles +
Assets

Before starting the project, popular flight websites like JetBlue, Delta, and United Airlines were reviewed to understand their booking systems. A generalized user flow was mapped out based on these insights for future reference.

The first step was to determine which locations would offer flights, calculate the flight durations between each location, and evaluate the total number of possible flight combinations.

Before designing the screens, careful planning of the flight schedule was essential to avoid overlapping flights. The schedule included four locations, with considerations for layovers and general rest time in the terminal.

The next step was to program the flight schedule’s variables. This involved setting up a functional date picker and location picker, as well as ensuring that the flight options generated were accurate based on the selected inputs.

Before finalizing the flight booker’s style, I used Bing Image Creator to explore new design ideas. I generated homepage designs in a Japanese woodblock style and chose my favorite ones to guide the illustrations and layout.

To give the flight booker a casual and adventurous feel, I created a few illustrations. Using Procreate, I made a layered map that works with Figma Variables to toggle location pins for takeoff and destination spots. I also added clouds and a tree, inspired by the AI images, for general use."