Selected works / 01 of 04 Flights Seats Vision

The vision

3 pillars, sequenced

12 vision concepts. 4 cohort-targeted flows. 8 features shipping during the vision phase. Approved by Flights leadership. On the H1 2026 roadmap.

Flights Seats Vision

Booking.com Flights sells seats as a price-tiered grid. The industry's best seat-sellers (Singapore, United, Ryanair, even Tesla and Ticketmaster) sell space as experience. This case study is the diagnosis, the system response, and the H1 2026 roadmap that came out of it.

Today

1a · current-state Current-state Booking.com seat selection (Ancillaries deck p7). Amsterdam→London, 6-across grid of identical blue squares, no per-seat prices, no amenity icons. · 1440×900 · 16:10

A price-tiered grid of identical squares.

Vision

1b · vision-state Zoned Architecture mockup (Ancillaries deck p19). Three-zone layout (filters left · seat map center · selected-seat detail right), distinct visuals for extra-legroom and exit rows. Same crop as 1a. · 1440×900 · 16:10

A value-led canvas with zones for context, control, and decision.

Drag the slider above to compare today's seat selection with the vision.

01 / The thesis Booking.com sells seats price-led. The industry sells space value-led.

Most teams treat the seat selection problem as a conversion problem: better filters, clearer legend, sharper price tiers. It's not a conversion problem. It's a category-positioning problem. The 78.3% no-selection rate is the predictable result of asking customers to evaluate a row of identical squares against a price tier they don't understand.

The reframe runs through the entire case study. Every section underneath it (the two-methodology diagnosis, the three sequenced pillars, the cohort-targeted Quick Start flows, the dependency-honest roadmap) is proof of the same argument.

82% Offer rate
customers shown a seat map
22% Overall attach
free + paid combined
11% Paid attach
the gap that funds the work
78.3% No selection
leave their seat to chance

Quest user feedback through 2025-10 → 2026-02 sounded the same note across hundreds of comments: "complicated and opaque", "no sense", "very confusing", "buying blind", "terribly aggravating". Customers couldn't tell why one seat cost more than another. Couldn't find legroom info. Couldn't sit together. The category was wrong, not the conversion.

2 · quest-quote-board Quest user-quote board (Ancillaries deck p9). ~10 verbatim user quote cards arranged in a loose grid, each with date, "Seats" tag, and the quote. Negative tone throughout. · 1200×750 · 16:10
Quest customer feedback, 2025-10 → 2026-02. Qualitative validation of the quantitative gap.

02 / The diagnosis Two methodologies, run in parallel.

Most teams audit either externally (competitor scan) or internally (heuristic review). We ran both, structured, at the same time. The competitor study reframed what "good" looked like outside our bubble. The internal audit stress-tested where ours actually broke. Together they sized the gap.

Method 1 · Tiers of Inspiration

A three-tier competitive frame that forced us past direct competitors and into how other industries sell space. The tier-3 lookalikes (Tesla configurator, cinema seat pickers, Trainline coach selectors) are where the breakthrough patterns live.

Tier 1 · Core landscape

Direct competitors

9 brands surveyed

Baseline of our immediate market: OTAs and the LCCs who are masters of ancillary revenue.

Expedia Hopper Kayak Trips.com easyJet Jet2 Ryanair Spirit Wizz Air
What stood out

Ryanair · Role-based seating. Middle seat = "good value." Back seat = "safe with family." Personalised recommendations by traveller type.

Expedia · Contextual side panel. Seat selection opens in a drawer, keeping flight details visible. Context never lost.

Tier 2 · Aspirational standard

Premium airlines & data providers

9 brands surveyed

Best-in-class within travel: long-haul airlines and the data providers that feed them.

Air France-KLM British Airways Cathay Pacific Delta Emirates Singapore United Virgin Atlantic SeatGuru
What stood out

Singapore Airlines · 360° seat view. Immersive visualisation of seat location and surroundings. Replaces "buying blind" with visual proof.

United · Seat comparison tool. Side-by-side comparison of Main / Comfort / First with images and amenities. Real evaluation, not a price tier.

Delta & Spirit · Seat maps in search. View-only seat availability shown during flight search. Awareness before commitment.

Emirates · Clickable interactive legend. Click a legend entry, the seat map filters to only those seats. Legend becomes a control, not a key.

Tier 3 · Innovative edge

Out-of-industry breakthroughs

8 brands surveyed

How other industries solve the fundamental problem of selling configurable space. The breakthrough patterns came from here.

Odeon Cineworld Royal Caribbean Ticketmaster Hilton National Express Trainline LNER Tesla
Why this tier mattered

Tier 3 didn't surface a specific competitor pattern to copy. It surfaced a methodology: cohort-targeted recommendations (cinemas, Ticketmaster), 360° visualisation (Tesla configurator), persistent context (Trainline coach selector). The vision pillars are the synthesis.

3 · tiers-board-thumbnail Cropped section of the giant Miro/Figma "Tiers of Inspiration" board (Future of Seat Selection PDF, p8 board). Tier 1 / Tier 2 / Tier 3 swimlanes with screenshot strips and pink callout columns. · 1200×750 · 16:10
The board itself. Twelve tier rows, ~50 product screenshots, hundreds of WOW-factor / value-prop / upsell-tactic callouts.

Method 2 · The Matrix of Chaos

A scenario-based audit grid: 4 platforms × 4 scenario archetypes. Thirteen pairs of designers ran specific "missions" (booking with an infant on Android, multi-city on mobile web, group of four on desktop), capturing screenshots, friction logs, and opportunity stickies. The visible empty cells are honest: three scenarios we couldn't cover.

4 · matrix-of-chaos · interactive [Phase 4 build] 4×4 grid: rows = Desktop Web · Mobile Web · iOS App · Android App. Columns = Solo (Speed) · Family/Infant · Group · Multi-City. 13 of 16 cells filled with mission name + group #. 3 empty cells styled as honest gaps. Click any filled cell → inline drawer with user, route, and 3-5 sticky notes color-coded orange/yellow/pink.

03 / The system Three pillars, in order. The order is the argument.

The vision is not a list of features. It's three pillars sequenced by dependency: you can't personalise a broken layout, you can't enrich content without a canvas, you can't recommend without a data foundation. Architecture first. Content second. Personalisation third.

Pillar What it does Horizon
P1 · Layout & Interaction Architecture Make the canvas legible. Zoned IA, detailed legend, granular filters, NLP smart search. H1 2026
P2 · Reinforce Value & Content Replace "buying blind" with proof. Hover summary, full-detail modal with 360°, video, cabin context. H1/H2 2026 · RouteHappy-gated
P3 · Personalisation & Cohort Selection Recommend, don't just filter. Quick Start concierge with cohort-targeted flows. H2 2026

Pillar 1 · Layout & Interaction Architecture

Seat selection should be a value-driven experience that makes it easier to explore, compare, and select.

5 · zoned-architecture Full-bleed Zoned Architecture mockup (Ancillaries deck p19/p20). Three labeled zones: Context (top), Control (left filter rail), Map (center grid), Decision (right selected-seat card). · 1200×750 · 16:10
Zoned Architecture. Context, Control, Map, Decision. Four distinct functional zones so the user does one task at a time.

Three controls layered on the same canvas: the legend filters, the filter rail narrows, and the NLP search asks. Each fits a different user mode (scan-and-spot, methodical-shopper, just-tell-me-what-I-want), and all three converge on the same map.

6 · detailed-legend Detailed Seat Legend (Ancillaries deck p21). Left rail with 5 legend entries (Available, Extra Legroom, Exit Row, Occupied, Selected). · 1440×900 · 16:10
Detailed Legend. The legend becomes a clickable filter control, not a passive colour key.
7 · granular-filters Granular Filters (Ancillaries deck p22). Left rail with Seat Position, Plane Section, Features, Pricing, Display Options. · 1440×900 · 16:10
Granular Filters. Window, legroom, exit row, free vs paid. Instant short-list, no hunting.
8 · nlp-smart-search NLP Smart Search (Ancillaries deck p23). Floating chat-bubble over the map with placeholder "e.g., recommend a window seat for me". · 1440×900 · 16:10
Smart Search. Plain-language queries. The conversational layer above the structured filter, not instead of it.

Pillar 2 · Reinforce Value & Content Enrichment

Seat selection should be enriched with the transparency and detail needed to justify the decision.

9 · seat-detail-hover Seat Detail on Hover (Ancillaries deck p26). Hover card with seat number, attribute chips (31" pitch, 17" width, power), amenities, helper line, two CTAs. Crop tight to the hover card + nearby map. · 1440×900 · 16:10
Seat Detail on Hover. Pitch, width, recline, WiFi at the point of the cursor.
10 · seat-full-details Seat Full Details modal (Ancillaries deck p27). Modal drawer with cabin photo, "Watch Video / 360° Tour" chips, four-attribute strip, accordion sections. Crop to the modal + a sliver of the map behind. · 1440×900 · 16:10
Full Details modal. 360° tours, videos, cabin photos, dimensions. Replaces "buying blind" with visual proof.

Pillar 3 · Personalisation & Cohort-Based Selection

The recommendation layer doesn't ask the same questions of every traveller. It uses the trip context the system already knows (passenger count, ages, route length) to change the question itself. The Quick Start concierge is the entry point. The cohort flows are what come next.

12 · quick-start-concierge Quick Start concierge (Ancillaries deck p31). Modal docked top-right of the seat map with "I'll choose" / "Help me" buttons. Crop to show the docked modal + visible map. · 1440×900 · 16:10
Quick Start at first paint. No more landing into a dense seat map cold. The next section walks through what each cohort sees after they tap "Help me."

04 / The proof Three cohorts, three flows, one pattern.

The Quick Start concierge isn't a single experience. It branches into three cohort-targeted flows, each with its own justifications, its own value framing, its own success metric. This is the difference between a personalisation slogan and a personalisation strategy.

01 · Solo

Intent-based selection

"How would you like to sit?" → Window · Aisle · Free · Exit. The recommendation justifies itself in the user's own language.

  • "Max legroom, fastest exit"
  • "Stretch out on long flights"
  • "Arrive feeling refreshed"
13 · cohort-solo Solo Quick Start (Ancillaries deck p32). Desktop seat map with the docked modal showing 4 radio cards + recommendation card. · 1440×900 · 16:10
02 · Couple · Group

Keep everyone together

Cinema-style selection: pick once, the whole party moves. The fear of separation is the friction we remove.

  • "All close together"
  • "No one gets separated"
  • "Easy to coordinate during the flight"
14 · cohort-couple-group Couple/Group Quick Start (Ancillaries deck p33). Desktop seat map with the docked modal showing 3 options (Keep everyone together · Group by family · Best value). · 1440×900 · 16:10
03 · Family with kid

Child-adjacent by default

Seating compliance baked into the recommendation. Parents never have to ask the system for permission to sit beside their kid.

  • "Seated together"
  • "Child seated beside an adult"
  • "Peace of mind for parents"
15 · cohort-family-kid Family with Kid Quick Start (Ancillaries deck p34). Desktop seat map with the docked modal showing multiple card options. · 1440×900 · 16:10

05 / The frame What ships, what waits, what's stopped.

A vision deck that hides its dependencies is a wishlist. The roadmap below sequences by what gates what. The three callouts beside it (Friction Reduction stopped, MDOT deferred to 2027++, three uncovered Matrix cells) are the strategic calls that made leadership trust the rest.

16 · roadmap-swimlane Horizontal swimlane roadmap (Ancillaries deck p39). Three columns (H1 2026 · H2 2026 · 2027++) with quarterly granularity and bars per pillar. · 1200×750 · 16:10
The dependency-honest roadmap. P1 architecture in H1, P2 content gated on RouteHappy in H1/H2, P3 personalisation in H2, mobile and cabin-class moves in 2027++.

Tradeoffs called by name

Stopped

Friction Reduction track

We tested click-minimisation and the Expedia-style contextual side-panel approach. Side-panel framing fragmented the IA work in Pillar 1, and click-counting optimised the wrong thing. Friction wasn't the bottleneck, value clarity was. Killing it freed engineering capacity for the architectural work.

Deferred · 2027++

MDOT (mobile web)

Mobile-first instinct said start there. The audit said otherwise: the IA is broken on desktop too, and fixing it on mobile first would have meant throwaway code. 2027++, after H1 desktop architecture and H2 personalisation land. An explicit choice, not an oversight.

Gap

Three uncovered Matrix cells

Mobile-Web Group, iOS Group, Android Multi-City. Three scenario × platform combinations the audit didn't cover. Flagged in the H1 plan as known coverage gaps so the execution team can decide whether to fill them or accept the risk.

Success metrics

Frame Metric What it means
North Star Paid Seat Attach Rate Increase paid attach & incremental ancillary revenue. The opportunity that funds the work.
Guardrail Flights Bookings Seat optimisation must not reduce upstream flight conversion. Watch ratio, not absolutes.
Strategic frame CLTV & partner value Long-term: customer lifetime value & airline-partner confidence in our seat experience.

The outcome

Vision presented to the Flights leadership team (Product Director, GPMs, and track leads). Approved as the seat-selection direction for 2026/27. The next 18 months of seat work is being executed by another designer against the system I sequenced. Eight features from the matrix sheet have already shipped during the vision phase: Smart Group Logic, Contextual Consistency, Passenger Identity Mapping, Seats Section/Role Labeling, Orientation & Location Context, Visual Scale & Differentiation, Enhanced Filtering, Granular Seat Attributes.

The work is the architecture. The screens are downstream of it.