Making seat selection clearer, from aircraft map to checkout
2021, British Airways
I redesigned British Airways’ seat-selection journey, from understanding the aircraft map and choosing seats for multiple passengers to reviewing charges at checkout. The work shipped across the selector, lead-in and checkout. A test of my lead-in pricing changes reported a 5% increase in conversion.
Making the aircraft map easier to understand
Feedback highlighted misunderstood icons, including bassinets and bulkheads, difficulty locating seats relative to the wings, and confusion over who had selected which seat. I redesigned the map and seat-feature icons using the new design language, making aircraft features and passenger selections easier to distinguish.
Keeping track of each passenger’s selection
I connected the active passenger to the map through a passenger strip and initials on selected seats. Choosing a seat advances to the next passenger with a transition. Travellers can switch back and replace a selection without first removing their previous seat.
A usable map on a 320px screen
On a 320px screen, a permanent legend competed with the seats for space. I moved it behind a control and added zoom buttons for closer inspection and selection. For double-deck aircraft, explicit deck navigation keeps the two layouts accessible within the same interface.
Supporting keyboard navigation and complex cases
I designed keyboard navigation alongside touch and pointer interactions, working with QA and engineering on complex cases. With our writer, I clarified seat restrictions and unusual situations so travellers could understand the choices available to them.
Protecting choices as travellers move through booking
Before a seat is selected, “Choose seats later” lets travellers continue immediately. Once they have made selections, cancelling requires confirmation because it discards their choices. Returning to the map preserves them.
Carrying passenger, seat and price into checkout
I designed the seating summary to keep passenger, seat and price information aligned, including when long names wrap or truncate. Checkout carries each passenger’s flight leg, seat and charge into a dedicated seating summary and price breakdown.
I designed the seating summary to keep passenger, seat and price information coherent. Checkout carries each passenger’s flight leg, seat and charge into a dedicated seating summary and price breakdown.
Pricing changes with a reported 5% conversion increase
A test of my lead-in pricing changes reported a 5% increase in conversion. That result applies to the pricing intervention; the wider selector redesign was not measured by this test. The selector, lead-in and checkout changes all reached production.