OPTIMISING SEATMAP
Enhancing mobile seat selection, improving conversion by +£200k.
TUI allow customers flying with TUI Airways to select their seat during the booking process. Seat uptake was significantly lower on mobile than on desktop. How do we lift the mobile experience to the same level?
I optimised our seat selection component, across 2 separate iterations. Improving seat uptake, higher overall conversion & a strong increase in margin.
+2%
Increase in seat selection.
+3.2%
Uplift in conversion.
+£200k
Margin increase.
Why isn’t mobile performing as well as desktop?
Seat selection is a very important extra for the business, with the sales of seats a great opportunity to make extra margin on a package. With traffic to the website starting to significantly lean in the favour of mobile, the challenge was identifying why seat uptake was only on mobile was 33% vs. 45% on desktop
Users were confused and unhappy with the seat selection process.
Reviewing a high volume of feedback from our qualitative feedback tool, we discovered there were 3 key areas users were frustrated with.
Navigation
It was often difficult to navigate around the seat-map, being left confused as to where they were in the flow & how to proceed.
Cost
Many comments focused on the cost of seats, often finding it difficult to understand what impact seat selection would make to their package price.
Clarity
Much of the feedback was also focused on finding it difficult to identify the seat types & what the icons represented.
What are the key differences between mobile vs. desktop?
Reviewing the current design on an iPhone with a 667px viewport showed we had multiple issues prioritising the wrong design elements. Unnecessary white space usage, elements that obstructed a users view & hiding important information behind certain triggers, made it difficult for users to achieve their primary objective of selecting a seat.
Restricted viewport
Multiple large containers stacked on top of each other, including sticky elements, took up 30% of the viewport on page load.
White space
Unnecessary usage of white space, meant users were forced to scrolled in order to see the seat options on page load.
Obstructing view
A floating action button to reveal seating information overlapped important info & often obstructed the selection of certain seats.
Hiding important information
Important information to distinguish the differences between seat types were hidden behind a floating action button that may have been difficult to see.
Uneven spacing distribution
The way prices were listed for the seats meant not all seats displayed in vertical viewport. Users required to use a mixture of vertical & horizontal scroll to view all seats.
What can we learn from the competition?
Some of our immediate competitors, both package travel companies & flight companies also allowed for seat selection within their booking process. Whilst not all were perfect, there were certain design choices that we could take inspiration from.
Grouping seats into categories based on their type and price.
Allowing users to navigate seamlessly between different flight legs.
Providing more visible distinction between different seat types & their benefits.
Skeuomorphic UI to reflect seats more realistically.
Identifying the areas of opportunity.
Based on all the research & analysis, I broke down several areas we could improve. There were a mix of items that were frontend changes which could be picked up by our optimisation team to be tested, or larger scale items that would require more backend work.
Seat type clarity
Moving & providing ‘lead-in’ content to the seating key, so it’s easier for users to identify.
Spacing
Moving row numbers to middle of seating plan to reduce seat-map width & reducing vertical height between rows.
Navigation
Moving the CTA to a more natural position & making it’s label more contextual so users understand where it'll lead.
Viewport size
Reducing height of sticky header to increase viewport size, especially important on page-load.
Urgency
Utilise urgency messaging & call out USPs for seat zones within key/seat-map to encourage upsell opportunities.
Seat type zones
Group seat types into zones. Remove prices on all seats & make it easier to distinguish between seat types.
Iteration 1
Increasing viewport & improving progression
Aim to increase the size of the current viewport by reducing the size of the current header, both static and sticky.
Provide clearer & easier to find CTA to progress.
Make the copy more contextual so users understand where it'll lead Display 'whole' pricing of package, rather than just seat pricing - so user doesn't have to 'do the math'.
+1.1%
Improvement in seat uptake.
+2%
Uplift in progression.
+£114K
Increase in margin.
Iteration 2
Improving seat key visibility
Providing a more discoverable way to understand the differences between the seats.
Moving & providing ‘lead-in’ content to the seating key, so it’s easier for users to identify.
+1%
Improvement in seat uptake.
+1.5%
Uplift in progression.
+£86k
Increase in margin.
Planned next steps
There are 2 further iterations planned which have not yet been tested. These require larger scale design changes, therefore more backend development work to implement them. There is also further clarification required to the rules and legal requirements for our seating arrangements.
Iteration 3
Layout & pricing changes
Move row numbers to middle of seating plan to reduce seat-map width.
Reduce vertical height between rows.
Remove prices from map - this can only be achieved if no deviation in seat type pricing across the map.
Iteration 4
Seat zoning & upselling
Removing prices from each seat, avoids repetition and reduces cognitive load.
Allows us to add content to the map (USPs, urgency).
Creating less reliance on icons to distinguish seats.
Once again this can only be achieved if no deviation in seat type pricing across the map.
MOER PROJECTS
Explore more of my work.
Discover additional projects where I’ve helped drive measurable improvements in conversion, revenue, and user experience.
Creating a scalable holiday summary for global markets.
I designed a new holiday summary component, that can be adapted, scaled & reused across different parts of the booking journey, in all markets, globally.
Improving lead quality and user registrations by 143%
I redesigned the ‘Volume Calculator’ component, which allows users to list individual removal items, resulting in a 143% increase of registrations using the new component.
CONTACT
a.mcmanus@outlook.com
07395 269 866