Skills
Design Systems, Prototyping, Information Architecture
Tools
Figma
Timeline
9 weeks, 2025
project goals
Develop a design system for modern air travel and implement it into a fully interactive prototype
project overview
I took Brad Frost's Atomic Design principles and applied it to my problem solving and thinking within this study
THE DESIGN SYSTEM
Organized for anyone to use
TOKENS AND VARIABLES
A place for everything, and everything in its place
I split my tokens into primitive vs semantic. I worked with four major collections: Primitive Color, Semantic Color, Typography, and Box Model, with a collection called Var to handle all the interaction logic of the prototype.
COMPONENTS + PROTOTYPING
Design System + Design Work
Because this was a 2 parter: a design system AND a prototype to showcase the design system, I rebuilt components to handle specific variables, conditional logic, and interactions. This evolved into a continuous cycle of updating the system and creating prototype-specific components to make everything was functional.
THE CENTRAL GOAL
Create a design system for a small aircraft.
Smaller goals
Where am I, where do I want to go, how do I get there?
Design's purpose is to answer these three questions, and especially in a booking process, this is essential to keep in mind!
Where am I in this process?
Strong breadcrumbing was essential; this includes adding different forms of navigation.
Where do I want to go visit?
Users need fast, intuitive cues. Color became essential, as well as information architecture to answer quickly 3 main questions: where, when, and price.
How can I know it’s set?
I made sure to create strong feedback and kept forms and interactive elements within the same structure.
THE CITIES
Beijing -> Chengdu, Shanghai, and Singapore
Each day, three airplanes move from Beijing to their city and back, and need to be unique to be visually distinct but fit within a system.
Hey Chat GPT...
Make Beijing → Chengdu have 2 looping flights, Beijing → Shanghai 2 looping flights, and Beijing → Singapore has 1 looping flight.
Can you make the times consistent, and somewhat realistic with working layovers, as well as working flight codes with this given logic?
Chatgpt gave me a working time table, which I turned into an image I could follow
THE PROTOTYPE
A short view of work
Because forms and booking are monotonous, the goal was to introduce color cues and organize information answering the questions: Where and How?
Form Fields
Final Checkout
THANK YOU FOR FLYING WITH US
Blending token development and systematic design
Heavy prototyping and logic
Creating this system required a mix of code informed thinking and design. It's powered by Figma calculators and layered conditional logic. Bringing this level of complexity to life is so exciting!
Applying it to "real life"
While this isn't a product that will be used by an airline, I value the opportunity to apply deep design thinking. For benchmarking, we tested amongst peers and I was able to find the gaps in the design system and make it usable.