4 out of 5 test users would actively discourage others from booking on the live site. The redesign reversed that completely.
01 // Analysis
Spirit Airlines offers some of the cheapest flights in the U.S. But its booking flow undermines that value so aggressively that 4 of 5 test participants said they would discourage others from using the site. The fare is worth it; the experience of buying it is not. That gap eroded trust, confidence, and willingness to reuse — all of which were measurably worse on the live site.
A heuristic evaluation of the live booking flow revealed four problems that erode trust at every stage.
1. Visual clutter reduces credibility
Inconsistent fonts, aggressive yellow CTAs, and cluttered hierarchy make the interface feel less trustworthy. The homepage is packed with promotional banners competing for attention, undermining the aesthetic-usability effect.
2. Repeated upsell interruptions
Multiple screens push bags, seats, hotels, cars, and insurance separately. Confirmshaming modals like "Are you sure?" pressure users into purchases, creating decision fatigue and a manipulative tone.
3. Price climbs unpredictably
Users see the base fare first and the real cost last. Rental cars, hotels, and other add-ons are injected into the flow, forcing mental math and making the total cost feel unstable.
4. Policy information is buried
On the live site, the link to policy information doesn't look like a button—it's buried between marketing material and the flight search, so it's not a prominent part of the front page. In usability testing, it took participants time to find it. In the redesign, the visual elements are more obvious because there is less clutter, and participants were faster to identify where the information was located.
02 // Define
Alexis represents a critical mismatch: Spirit's flow is optimized around base fare, but budget travelers shop on total cost. Every upsell screen widens that gap. Alexis isn't comparing Spirit to Delta—she's comparing the advertised price to the checkout price.
The emotional arc follows a pattern: a peak when users find the low fare, then a steep, sustained drop as hidden costs accumulate through add-ons and checkout. Trust doesn't erode gradually—it collapses.
"I'm always worried I'll click through and then see a higher price later."
— Participant 1
"Sometimes you feel like you have to protect yourself."
— Participant 5
03 // Diagnosis
A moderated A/B usability study: 5 participants compared the live site and prototype over Zoom, performing the same tasks on both.
Warm-up questions revealed that participants entered with low trust already. Price mattered to everyone, but "real total cost" mattered more than base fare.
"It's only a deal if it's actually cheaper..."
— Participant 2
Users were asked to learn about baggage, change, and cancellation rules before booking.
Users booked a round-trip flight on both versions. This task revealed the clearest emotional difference.
Users were asked to track the total cost as they moved through fares and add-ons.
"The low fare is worth it. That's why I go back sometimes, although it's really painful."
— Participant 4
04 // Redesign
The live site scatters bags, seats, hotels, cars, and insurance across separate screens—each one an upsell gauntlet. The redesign puts everything on a single tabbed page. The user controls the pace.
The live site has a trip summary, but it's buried alongside the add-ons section (highlighted in red), making it confusing to read. The redesign of the trip summary focused on simplicity and scannability so users can quickly understand their trip total — a persistent sidebar that updates in real time with no surprises.
The live site buries policy info in footer links. The redesign surfaces bag rules, change fees, and cancellation policies on the homepage—where they belong when you're deciding whether to book.
The live site uses inconsistent fonts and aggressive visual hierarchy. The redesign introduces the Outfit font family (15 registered styles), Spirit brand colors used consistently, pill-shaped buttons, and a card-based layout with proper spacing.
Typography — Outfit
Display / Hero — Light 48
Display / Price — SemiBold 36
H1 / Page Title — Light 28
H2 / Section Header — Regular 20
H3 / Subsection — Medium 16
Body — Regular 14
Button — SemiBold 14
LABEL — Medium 12
Caption — Regular 10
Colors
Yellow
#FEE600
Teal
#00BAC6
Black
#1A1A2E
White
#FFFFFF
Gray/50
#F5F5F5
Gray/200
#E0E0E0
Gray/500
#9E9E9E
Gray/800
#424242
Spacing — 8 Tokens
2xs
2
xs
4
sm
8
md
12
lg
16
xl
24
2xl
32
3xl
64
Components
The original site shows the differences between pricing tiers well, but the thing Spirit consumers want most — price — is not obvious. In the redesign, I balanced making tier information available by showing key items upfront and allowing expansion for details, while keeping the price above the fold. Less scrolling, faster decisions.
05 // Test
The most striking shift was in word-of-mouth intent (WoMI). On the live site, 4 of 5 participants would actively discourage others from booking with Spirit. On the prototype, zero would. NPS more than doubled, from 3.6 to 7.6.
| Metric | Prototype | Live Site |
|---|---|---|
| More trustworthy | 4 / 5 | 1 / 5 |
| More confidence choosing fare | 4 / 5 | 1 / 5 |
| More willing to use again | 4 / 5 | 1 / 5 |
| Pricing felt more transparent | 4 / 5 | 1 / 5 |
| Better policy understanding | 3 / 5 | 2 / 5 |
| Would discourage others (WoMI) | 0 / 5 | 4 / 5 |
06 // Iterate
Testing validated the direction but exposed gaps.
| Date | Change | Rationale |
|---|---|---|
| 03/22 | Added entry point to cancellation policy and additional options on the seat selection page | Participants found policy info faster in the redesign, but still wanted those rules repeated during fare selection rather than only earlier in the flow |
| 03/22 | Revised the trip summary to show base fare and a clearer running total earlier in the flow | Participants liked the running total, but still wanted taxes and fees to feel more settled before the final stage |
| 03/22 | Added clearer pricing to the trip summary floating window with total fees including taxes before checkout | Improve transparency by showing not just the fare but the entire total including fees |
| 03/23 | Refined the seat map layout and labeling | The original seat selection area didn't match Spirit's branding or look like an airplane layout. The new design improved visual consistency |
| 03/24 | Added a "Pick up where you left off" section with saved trip cards on the home page | A unified type hierarchy improves readability and gives the page a more polished, professional feel |
| 03/24 | Updated home page typography to a consistent type scale with defined heading, body, and caption styles across all sections | The original layout didn't guide the user's eye naturally through the page. The revised structure creates clearer visual flow |
| 04/03 | Restructured home page layout to improve visual flow, spacing, and content grouping between hero, search, and destination sections | Gives users a clear starting point for trip inspiration and reduces the number of steps to begin browsing flights |
| 04/03 | Added an "Explore Top Destinations" section with destination cards and quick-action booking links | Most participants said they start their booking process by browsing destinations — this surfaces that entry point |
07 // Persuade Stakeholders
Final Screens
Demo
My Contribution
