KAYAK Flight Detail Page Redesign

Product designer owning end-to-end design, research, interaction, design system, and QA.

• End-to-end UX and UI design for iOS and Android
• Guerrilla usability testing and research synthesis
• Component variation system for engineering handoff
• Dark mode and multi-theme design (KAYAK and Momondo)
• Cross-functional collaboration with PM and engineering through QA and launch

1. Goal 1

   Make fare inclusions and tradeoffs clear at a glance

2. Goal 2

   Restructure the information architecture for scale

3. Goal 3

   Lift cabin upgrade and upsell conversion

Fare information was buried behind expand toggles and modal overlays. Users had to tap into each fare family to compare what was included, making side-by-side comparison painful — and the pattern didn't scale beyond two or three options.

fdp_previous.png

We kicked off with a 3-day cross-functional workshop with design, PM, and research to map out the existing flow, pressure-test hypotheses, and align on the IA rebuild. From there I sketched and prototyped directions, then ran guerrilla usability tests with passersby outside our Cambridge office to quickly validate comprehension and tradeoffs before investing in high-fidelity design.

I iterated on the layout through six rounds, progressively pulling fare detail out of hidden states and onto the page. Each round was pressure-tested with PM and engineering to balance clarity, density, and what was technically feasible before the partner deadline.

fdp_iterations.png

I worked closely with engineers through implementation, running development reviews on builds across iOS and Android. I documented every change request, copy tweak, spacing fix, and edge case in Miro so the team had a single source of truth from handoff through launch.

dev_review.png

A walkthrough of the shipped build: scrolling fare cards, expanding inclusions, opening the baggage policy sheet, and tapping into booking options.

Beyond the page itself, I contributed 60+ new components and variations to KAYAK's design system, each with documented states for phone, tablet, light, dark, and edge cases like long localization strings.

design_system.png

The same component system powers KAYAK light and dark themes as well as Momondo, our portfolio sister brand. Designing tokens-first meant we could ship one IA across three visual identities without re-doing layout work.

kayak_dark.png

momondo.png