Designing a scalable airline booking experience from the ground up
Designed a fully functional airline booking application alongside a comprehensive, scalable design system, establishing a cohesive brand identity and reusable component library across multiple touchpoints.
Role
Design Systems Designer, UX Designer
Software
Figma (Variables, Components, Prototyping)
Timeline
8 weeks (Solo project)
Accessibility First
Building inclusivity into the foundation
Incorporating the four key principles of WCAG and prioritizing accessibility within the design was essential to crafting a successful brand and design system. These standards were embedded into the brand guidelines from the start.
WCAG Compliance
All components meet WCAG 2.1 AA standards for color contrast, keyboard navigation, etc. Accessibility isn't an afterthought—it's built into every design decision.
Design System: AirArc
A scalable component library built with atomic design
Following Brad Frost's Atomic Design methodology, I created a comprehensive design system that ensures consistency and usability across the entire booking experience. Each component is systematically organized from foundational elements to complex patterns.
Foundations
The fundamental building blocks of AirArc - color palettes, typography scales, spacing systems, elevation, and grid structures. These form the DNA of the entire design system.
Component Architecture
Organized into atoms (buttons, icons, form fields), molecules (date pickers, dropdowns, cards), and organisms (navigation, booking flows). Each level builds on the previous for systematic consistency.
Atoms: The Building Blocks
The smallest, indivisible components - icons, buttons, and form fields. Each atom is carefully crafted with multiple states, sizes, and variants to ensure flexibility across use cases.
Molecules: Combined Components
More complex components created by combining atoms - date pickers, dropdowns, cards, error messages. These maintain consistency while offering richer functionality for the booking experience.
Interactive Prototype
Mastering Figma variables for dynamic interactions
A primary objective was mastering Figma variables and implementing them to develop a functional prototype capable of accepting diverse user inputs. This creates an immersive, realistic booking experience that demonstrates the design system in action.
Technical Implementation
The prototype leverages Figma's advanced variable system to handle complex state management - flight selections, passenger counts, date ranges, and form validation all function dynamically. This showcases not just design skills, but technical understanding of design tool capabilities.
Prototype
Using advanced Figma variables to manage dynamic flight selections, passenger counts, dates, and form validation - demonstrating both visual design and technical mastery.
Key Learnings
What I gained from this project
Design Systems Thinking
Building a comprehensive design system taught me to think systematically about design decisions. Every choice - from color tokens to component APIs - needs to consider scalability, maintainability, and team adoption.
Technical Proficiency
Mastering Figma variables unlocked new possibilities for prototyping. Understanding the technical capabilities of design tools allows for more sophisticated demonstrations of complex interactions and user flows.
Documentation is Design
A design system is only valuable if others can use it. Clear documentation, usage guidelines, and accessibility standards are just as important as the components themselves. AirArc includes comprehensive guidelines for every element to ensure consistent implementation.