Airline &
Design System
Concept
Paper Air is a conceptual airline serving the upstate NY region. Its hub is based out of Rochester, NY, also flying between Buffalo, Syracuse, and Albany.
Role:
Designer
Timeline:
16 Weeks, Fall 2025
Tools:
Figma
Adobe Illustrator
Claude
Framer
Skills:
Design System
Prototyping
Visual Design
Documentation
Objective
Design a functional multi-city airline that prioritizes functionality, accessible design, and user error awareness. Alongside this, a design system that fully explains the airline.
Design Analysis
Existing airlines serve a larger service area, but still lack proper design infrastructure. In this example from Jet Blue, it is riddled with ads, visual design that has elements collapsing into one another, confusing element placement, and an overwhelming amount of information.
Sketches
User Flow
Interation 1
My initial design focused on the skies. Taking the color palette of the blue and white sky, and combine it with a Paper Airplane. I focused on simplicity and creating a short selection process that saw all core features of airline booking in one main screen.
Iterations 2-3
I took these next iterations to create a more refined visual style and layout. I wanted to build upon the look and feel of paper to communicate affordability but still interject a premium, safe feeling. I did this through color, wanting cloudy whites and sky blues.
This version extends the user flow out, with airport selections on the initial screen, followed by date selections, baggage, seat selection, flight selection, and finally a more refined checkout with more information inputs.
Final
For my final iteration, I chose to rebrand certain elements focusing on taking away boxing of elements, placing more emphasis on color and stroke, and remade several screens such as the flight selection and baggage selection which saw the most difficulty so far.
This final version hosts micro animations, functionality, variables & components, as well as updated typography. I removed most of the paper style elements, favoring minimalism.
PAPER Design System
My design system prioritizes accessibility in how it presents each element. It has an in depth component library, iconography, detailed color palette, and typography all explained.
Logo
Instantly I gravitated towards creating a paper airplane, wanting to bridge the almost unspoken and obvious gap between the two. I determined an upwards motion was necessary for creating a concept of movement.
Color
My palette prioritized accessibility and high contrasting colors, instilling a balance in blues and subtle neutral tones. Sky blue and paper cloud like whites primarily make up the style.
Typography
Poppins is the font of choice for Paper, as its sharpness and web friendly functions allow for a wide usage.
Grids & Spacing
The grids follow a 12 column, and base-8 format.
Buttons
There are primary buttons that direct the user backwards and forwards. These have subtle micro-animations to communicate active stages. A drop down menu also functions similarly, however focuses more on user selection and is more rigid.
Flight Cards
Selecting a flight is between two active states of a component. The unselected version is white with blue text, while once selected it reverses to now show more prominently. Information is displayed in hierarchical importance, such as timing and prices being largest, while duration the smallest.
Iconography
While not as large, the careful selection of icons works within Paper's style of minimalism, rounding, and balance. Its soft edges and simplicity communicate exactly what each user needs throughout the booking process.
The icon library is in part from Lucide React, a free online library.
