All work
Aviation · Web & mobile
Making low fares feel fair: four years of UX/UI design across Spirit Airlines’ booking, mobile and day-of-travel experience.
Role
UX/UI Designer (Product Design, Digital)
Tools
Figma, FigJam, Maze/UserTesting, Principle, Zeplin
Collaboration
Product managers, engineers, research, revenue/merchandising, brand
Timeline
2019 - 2023 (4 years)
Hero image or video
01 · Challenge
The challenge
Overview
Spirit’s model is simple: sell the lowest base fare, and let travelers pay only for what they use. That model lives or dies in the interface. If a traveler feels surprised by a fee, trust drops and so does conversion. If the interface hides useful options, ancillary revenue is left on the table. Over four years the design challenge was to keep fares low while making every choice clear, fast and fair.
Context and problem
Public history frames the starting point. Spirit launched a check-in-only app in 2017 and a second-generation app in 2018 that customers found missing basic functions. The airline then set out to become more of an e-commerce company, revamping its website and app to improve merchandising and conversion. Customer feedback from the period consistently pointed to the same themes.
Fee anxiety: travelers could not see a running total until late in the flow.
Dense, inconsistent UI: mixed type sizes and competing calls to action across web and app.
Mobile gaps: flight alerts, trip changes and bag edits lagged behind customer expectations.
Accessibility: the marketing site only partially met WCAG 2.1 AA, so contrast, focus and labeling needed work.
Goals
Raise booking completion on mobile without lowering ancillary attach rate. Make the total price visible at every step. Unify web and app under one design system. Reach WCAG 2.1 AA on all booking surfaces. Reduce support contacts about bags, seats and changes.
How might we
How might we keep fares low while making every choice clear, fast and fair?
02 · Solution
The solution
Mobile designs
The high-fidelity app screens commit to Spirit’s yellow and black identity while using a calmer card layout. Fare bundles sit side by side so the trade-off between Basic, Bundle and Premium is visible without scrolling. A persistent footer carries the running total and a single Continue button.
Web mockups
On desktop, the sticky trip summary keeps the base fare, taxes and extras visible as the traveler moves through the flow. The hero search card is the single focal point of the homepage.
Design decisions
Pill buttons with a 48 px target for thumb reach and a consistent primary action. Price shown in the largest numerals on each fare card, with the included items listed beneath. Bundle upsell placed after individual bag choices so it reads as a saving, not a push. Boarding pass uses high-contrast yellow on black for glare outdoors.
Screen or video 1
Screen or video 2
03 · Discovery
Discovery
Process and timeline
2019, audit and research: heuristic audit of 40+ screens, 18 moderated sessions, a journey map from search to boarding and a prioritized friction list.
2020, foundations and pandemic response: first design system (type, color, components), flexible-travel messaging, and contact-light check-in and boarding pass updates.
2021, booking flow redesign: sticky trip summary, fare bundle cards, simplified search, and A/B tests on bag and seat placement.
2022, bags and mobile parity: bags redesign shipped in the app (Nov 2022), a shared bag component on web, and bundle naming alignment.
2023, accessibility and scale: WCAG 2.1 AA pass on booking, tokenized design system v2, handoff documentation and QA checklists.
Research insights
Price certainty beats lowest price. Participants chose a slightly higher bundle when a live total made the trade-off obvious. Bags are the moment of truth: most hesitation happened on the bag step, and clear size visuals and weight limits reduced guessing. Mobile is the day-of-travel tool, so boarding pass, gate and delay alerts needed to be one tap away. People skim: large price numerals, short labels and one primary action per screen outperformed dense tables.
Competitive analysis
Persona
04 · Define & ideate
Define & ideate
Wireframes
Low-fidelity wireframes explored four mobile screens (search, select flight, bags and extras, boarding pass) and a desktop layout with a sticky trip summary. The goal was to settle information hierarchy before visual design.
User journey / site map
Wireframes
05 · UI design
UI design
Design system
The system moved from a loose component library to tokens for color, type, spacing and radius shared by web and app. It documents states, accessibility rules and usage guidance.
Typography
A geometric sans in heavy weights gives headlines and prices a confident, readable voice, with a neutral text face for fine print. The scale uses eight styles on a 4-point grid, set in Montserrat ExtraBold and Inter.
Color
A brand yellow and black anchored system with functional status colors, plus approved contrast pairings such as black on yellow at 17.6:1.
Design system or desktop shot
Design image 2
Design image 3
06 · Testing
Usability testing
Moderated sessions
Eighteen moderated sessions in 2019 grounded the early work, and the findings fed the friction list that shaped every later release.
A/B tests
In 2021, A/B tests on bag and seat placement helped decide where extras sit in the flow so they read as helpful options rather than surprise costs.
Accessibility checks
The 2023 WCAG 2.1 AA pass on booking, backed by handoff documentation and QA checklists, made accessibility part of how components ship.
07 · Results
Results & impact
Mobile booking completion, bag step abandonment, support contacts on bags and seats, and time to pick a fare were the measures tracked. The figures shown are illustrative targets rather than measured data: +12% mobile booking completion, −18% bag step abandonment, −20% support contacts on bags and seats, and −30% time to pick a fare in usability tests.
WCAG 2.1 AA coverage moved from partial to full on the core booking flow.
+12%
target lift in mobile booking completion
−18%
target drop in bag step abandonment
−30%
target reduction in time to pick a fare
Results image
08 · Closing
Final thoughts
Reflections
Designing for an ultra-low-cost model means trust is the real product. Transparency is a conversion tool. Shared tokens saved more time than any single screen redesign. Accessibility checks are cheapest when they start at the component level.
What’s next
Personalization of add-ons, better disruption handling in the app, and a faster seat map.
Next project