Modernizing the Seat Selection Experience

Overview

The problem

The trust gap in seat selection

As WestJet introduced new fare tiers and bundle rules, seat selection became a high-friction decision. Guests struggled to evaluate seat value, facing unexplained price variations, unexpected physical constraints, and complex fare rules tied to baggage allowances.

Bridging this trust gap was further complicated by system fragmentation: seat selection was split across two separate codebases for booking and check-in. Every attempt to clarify rules or surface contextual details required duplicate design and development effort across both platforms.

Framing the work

Turning competing asks into one direction

Revenue, marketing, operations and product each arrived with their own goals. Rather than designing for each one, I paired every goal with the guest friction standing in its way, so the whole team was solving the same problem.

Prototyping to decide

Building quickly instead of perfectly

Instead of debating a feature wishlist and spending weeks deciding functionality, I used AI to build multiple clickable seat map prototypes in Figma Make. The prototypes opened up far more ideas and helped us align quickly with our stakeholders. Every feature had to tie back to a business objective to make the cut, and the rest were parked rather than dropped. 

The design

Improving seat comprehension

The design team focused on two goals: simplifying the experience and building trust. We reduced friction by removing, improving, or relocating all the content, including pop-ups. This ensured all messaging was contextual and would help the guest understand their travel experience. We also created new features to streamline the experience by letting guests quickly add seats for all their flights. 

1 2 3 4 5

6

1. Onboard considerationsSurfaces guest-specific service requests and operational accommodations (e.g., SSRs, accessibility needs, pets, seating requirements) that may impact the travel experience or require airline handling.
2. Quick actionA consistent and scalable design for the auto-assign seat feature. Guests can easily select seats, and stakeholders get a slot to market their offerings.
3. Aircraft information Displays the aircraft type and flight duration front and center. Flight duration is one of the top factors in how guests choose a seat.
4. Seat considerationsBuilds trust by calling out seats that have unique or undesirable attributes like no window or fixed recline.
5. Seat attributesDistinguishes each seat type's features instead of a generic list, and shows how the seat changes the guest's airport experience.
6. Shopping cartA new, sticky shopping cart that improves visibility of the total price. The redesigned price summary clearly breaks down the price into digestible sections.

Selecting Sarah Chen Calgary to Tokyo (9 hrs 20 min)

Flight 1 of 4

YYC to NRTNRT to ICNICN to NRT

Skip seat selection

10A

Jason Harrison$24.99

12A

Sarah ChenSelecting

MV

Michael VanceNo seat selected

Motion · Pulse

Opacity

55% → 100%

Duration

duration/pulse 1000ms

Easing

easing/pulse 0.45, 0, 0.55, 1

Loop

Trough → peak, infinite

1

Preferred Economy This seat does not have a window

Selecting forSarah Chen

$59.26$49.26

Select 12A

Legroom

Extra 3-4 in.

Boarding

Priority Zone 2

Priority Screening

Not available

Experience

Early access to overhead bins

Food and drinkA complimentary alcoholic beverage during inflight service

On this aircraftUSB power · Free Wi-Fi · 110V AC power

2

539.04 CADPrice summary

Action title Action title Action title

Message slot

Airport Transportation Charges$387.52

Adult - Base fare x2$297.52

Other ATC$90.00

Taxes, fees and charges$127.52

Airport Improvement Fee (AIF)$90.00

Goods and Services Tax (GST)$37.52

Seats$24.00

Calgary - Tokyo: 2 Economy seats$24.00

3

WESTJET

CAD 1

CAD

Min 375

4

1. Guest list: Who’s selecting, their flight and every guest’s seat in one place. The active guest pulses between 55% and 100% opacity every second, a looping motion that reads as live without a one-shot animation.
2. Seat details panelSeven named parts, from the seat type header to the image container, so booking, self-serve and check-in build the same panel.
3. Price details: A fixed header and total over flexible slots. Action, message and pricing slots let each product fill the panel without a new component.
4. Global header: The logo and a row of slots for currency, notifications and profile, down to a 375px minimum on mobile.

1 2 3

1. Map stays visible The seat details panel shows legroom and price, the key decision factors for guests.
2. Expanded details panel Guests who want more can scroll up to see every detail about the seat.
3. Established mobile patterns Familiar patterns like toasts tell guests what just happened, such as which seat they selected.

Test and learn

Proving it before launch

Our research team ran multiple studies, including competitive research, comprehension, and usability testing with my prototypes.

While we gathered qualitative user data, we also ran A/B tests with the optimization team to get quantitative data.

Leading the work

Raising the bar beyond my own files

Impact and takeaways

The first phase has launched and will be seen by millions of guests a month. We will keep monitoring the page's performance and optimizing the design.

Speed depends on alignment

Clickable prototypes in the first three weeks meant stakeholders debated real interactions, not imagined ones, so the team moved fast without re-litigating scope.