Resume
Work
Play
Mabuhay Air
14 weeks
Figma
Adobe Illustrator
Branding
User Interface
User Experience
The main goal of this project is to create a prototype for a fictional flight transportation service that utilizes Figma variables. In addition to the prototype, a design system is constructed to explain the foundation of the main project.
Overview
A multidisciplinary designer that enjoys making people happy in any way possible.
About
Timeline
Tools
Category
Research
Final Designs
Prototype
Design System
Goals
Conclusion
I found myself stuck throughout the beginning of the project. I felt pretty confident with handling Figma variables, especially with my background knowledge of coding principles such a setting up variables and utilize conditionals. But when it came to my visual design, I was a bit lost. I did not want to design something that would take away from the user’s main goal by being too distracting or confusing. Once I was finally able to settle on a design, that’s when I felt more confident about the project. Prototyping was a bit difficult even if I say I am confident in it, I think that I could have planned out the paths of the variables and what information I need better. If I had more time, I definitely would try to restart to get a better grasp on how I organized everything. Figma variables are pretty powerful and I’m exciting for the future updates that will be added (please let us resize the interaction variables box!!!). Putting together the design system was much more simpler than I thought, especially since I had all the components and it was just a matter of piecing everything together. Overall, this was one of the pretty intense projects I’ve worked on so far as a designer, but I feel motivated to continue to learn more and to find way to improve this project for the future.
Takeaways
Create a unique brand.
Create a unique, visual identity for the company that incorporates key values in design and brand personality.
Explore Figma variables.
By utilizing Figma variables, I can learn how to incorporate the basics of code to the user experience. It involves assigning values to elements and altogether promote consistency and efficiency throughout the design process.
Creating a design system.
Create a guideline that consists of rules and elements that people can look at to see the behind the scenes of the company and service. This ensures visual and functional consistency across all products for a cohesive user experience.
© 2024 Bea Chin
Research began with figuring out what would my airline be. I narrowed down my options to be the Philippines because it would be a great way to showcase the love I have for the culture through design. I did a lot of research on the regions I wanted to focus on, especially what makes each region unique. I wanted my design choices to showcase the excitement and colorfulness of being in the Philippines.
Sketches, notes, brain-dumps
When thinking about this project, I immediately went to research other existing airlines, focusing on their flight booking process and visual identity. My main sources of research were analyzing airlines such as JetBlue, United Airlines, and Singapore Airlines. What I noticed was while they had a decently efficient user experience, they lacked in visual identity.
Competitive Analysis
After thinking about the more fun aspect of the project, I knew I had to get started on the logistical part of the project that would require a lot of time for me to figure out - which is the flight paths. At first, I was too ambitious and thought I would be able to create paths going to and from each place, including multiple layover options. But, I chose to narrow it down to make the process a bit easier.
Ultimately, in total there would be 12 flight paths – 8 direct flights, 4 layovers, each with an AM and PM option.
Flight Paths
Diving back into the visual identity, I had a bit of difficulty trying to figure out which style I should lean towards. I knew I wanted it to be vibrant, but I had to keep in mind that I did not want to choose colors that felt distracting or would stray away from the main purpose of the website.
Style & Direction
This is the main screen users are presented with at the beginning of the user flow. Users can take the time to familiarize themselves with the website with ease, going through the content and interactions. This is where the users inputs important flight search information – destinations, dates, and passenger quantity. Finally, they can continue to search for options for their desired flight.
Home
This is where the user is able to select which flight they want to take. Users can select between two options, a morning and evening flight. They can learn more about each class – Economy and Business – and decide which they want to choose. Once they have decided, they can hit the ‘Select’ button that will take them to the next step.
Departure Flights
This screen is very similar to the Departure Flights screen, offering you two flight options. The way you move onto the next part of the process follows the same flow.
Return Flights
This is where the user can select what seat they want. Once they select a seat, this will be their seat for their departure and return. Users can scroll through the seat map to see other areas of the plane to make an informed decision.
Seat Map
Users can view the selections they chose in this screen. This is considered the halfway point before they start to input required personal information to finalize their booking. Users have the option to edit/go back to make any changes. We also see a summary of the running total, where users can add extra luggage if desired.
Overview
This is the start of where the user has to type in their personal information.
Traveler Details
This is another screen where the user has to input their personal information, specifically their payment information. Users will receive error messages if they input the incorrect numbers needed for their card information or if they card is invalid and they need to use another.
Payment
This is the final screen the user sees to confirm their booking. They are presented with teh Mabuhay Air plane flying in the sky with a message that provides closure to the end of the experience.
Confirmation
Prototype Link
Now that we have learned about Mabuhay Air, let’s explore the design system that drives the entire project! MADS stands for Mabuhay Air Design System and focuses on creating a seamless user experience. Because I had created a foundation through designing Mabuhay Air, I can create an organized outline of how I created the brand’s identity.
Overview
Before diving into the specifics and technical details of Mabuhay Air, I wanted to emphasize a key principle and goal: accessibility. To make sure I understood what this means to be able to prioritize it in my design, I did research on the Web Content Accessibility Guidelines (WCAG), which was developed by the W3C. They outline four key principles – perceptibility, operability, comprehensibility, and robustness. Their goal using these principles is to make digital content more inclusive for every individual regardless of if they have disabilities or not. By using these principles, I wanted to ensure that they were applied to my design system.
Accessibility
This section is dedicated to showcasing and explaining the building blocks of Mabuhay Air. This includes color palettes, typography, grids, layouts, illustrations, and iconagraphy. These elements provide the visual aspect of the brand. Each element includes specific directions and ways they can be used.
Foundation
This section consists of components that are considered small pieces that are used to build more complex elements. This is where I focus on buttons, form inputs, and form interactions. Buttons and form inputs consists of different states, including a ‘Focus’ state for those who may be unable to use a mouse and must use a keyboard.
Atoms
This section consists of components that are considered small pieces that are used to build more complex elements. This is where I focus on buttons, form inputs, and form interactions. Buttons and form inputs consists of different states, including a ‘Focus’ state for those who may be unable to use a mouse and must use a keyboard.
Atoms
Molecules consist of one or more atoms to create more complex components. I continue to utilize different states and sizes to accommodate for different needs. A unique feature is instead of a drop-down, I utilize a drop-up. I also incorporate a progress tracker that informs the user which step in the process they are on and can also see how much of the process they have left. Error messages utilize icons and text that are organized using auto layout and placed in a way that will let the user know what exactly is wrong. The counter also has disabled and enabled states to inform users the minimum and maximum quantity they can go to. Finally, I also dive into the use of cards and the different variations you can see throughout the prototype.
Molecules
Organisms are the biggest component in my design system that utilize both atoms and molecules to construct even more complex elements. The navigation bar contains different link states to inform users of their interactions with them.
Organisms
