Aer Lingus Seat Selection
Client: Aer Lingus
Role: UX/UI/Product Designer
As part of a much larger project to make the Aer Lingus website responsive, we had to completely redesign some sections of the flight booking flow. One section of the flow which needed to be rebuilt from scratch was the Seat Selection process. In this case study, I’ve outlined some of the main considerations during the redesign;
As an airline flying to and from the United States, Aer Lingus are subject to US Department of Transport Regulations. Under the US Air Carriers Accessibility Act, all parts of the AerLingus.com domain and all publicly accessible communications must conform to Web Content Accessibility Guidelines (WCAG) 2.1 AA standard.
Accessibility compliance was a new business requirement, so understanding and utilizing web accessibility standards were a big part of this redesign process. Colour contrast, text and icon-sizing, touchpoint sizes, screen-reader compatibility, mental models & easy comprehension, state differentiation and W3C accessibility standards were referenced throughout the redesign. A good example of this was the consideration we gave to the usability of the seat map colours;
Approximately 9% of people suffer from colour-blindness (8% of men/1% of women). Our previous seat map consisted of seat sections that were separated by very similar colours (we used a combination of two green and three blue colours).
The most common forms of colour-blindness involve a red-green colour deficiency (Deuteranopia), and when we applied a design tool to simulate that view, this is how our old seat map appeared;
Old Seat Selection UI
When viewed through Deuteranopia lens filter
During our research, we looked outside of airline websites for examples of how other industries ‘sell seats’. We looked at Stadiums, Cinemas, Train & Bus companies, Concert venues, Restaurants… and in some of the better examples, we noticed that seating sections were very clearly defined by colour. And not just gradients of the same colour or brand colours – but by primary colours (red, blue, yellow).
When we tested these colourings through the Deuteranopia lens filter, we discovered this was also a clearer way of distinguishing different seat sections for visually impaired users – and actually improved the usability of the seatmap for all users.
Seat type colours – Old
Proposed seat colours
2. Page Structure & Seat selection process
We conducted extensive competitive analysis on the best add & remove functionality & patterns for mobile.
The process for selecting seats on the Aer Lingus website involved clicking on a passenger name first and then clicking on an available seat to assign it to the active passenger. Then clicking on the next passenger to assign a seat to them, and so on… This involved multiple clicks and a repetition of a back-and-forth movement between the passenger list and the seat map columns. This was unnecessarily cumbersome, especially if there are multiple passengers to choose seats for (a family of 5 for example).
Also, seat selection for both the outbound and return flights were conducted on the same page – with no obvious separation between legs or notification that you had moved on to the return flight.
So we wanted to simplify these processes and of course, the big challenge was making any new process suitable and usable on smaller screens. Several patterns were identified, we took a selected few of those to testing.
3. Business Seating
Another improvement we wanted to make was the visual appearance of our business seats. Previously, our business seats aligned to the same grid as economy seats – which made them look the same shape and size as standard seats.
We wanted to give a better visual representation of the space and comfort available in business class seats and improve the look of the business cabin layout in terms of size and scale. This was a challenge as the seating configuration for our transatlantic fleet is not uniform. Aer Lingus has acquired some aircraft as new, and some second hand e.g. Qatar Airways, Canadian Air Force… so the seating configuration of each aircraft was – in some cases, prejudiced by alterations made by the previous owners.
The seat map for each aircraft had to be individually designed and built.
The design process included iteration and feedback from a variety of stakeholders – the Design team, UX research, Business Analysts and Project Managers, Developers, and more. Obvious fixes, combined with learnings from our research and testing provided us with a list of key deliverables;
- Protect existing conversion metrics
- Make the selection process responsive
- Add an instructional title (for accessibility) e.g. ‘Select Seats’
- Split Outbound and Return Seat Selection – separate on two separate pages
- Reverse the selection pattern from Passenger › Select Seat, to Select Seat › Assign Passenger. This allowed more flexibility if users wanted to rearrange a previous selection – especially for families with young children who may need to change their initial seat choices to confirm with seating rules.
- Allow users to skip seat selection
- Show View Aircraft Layout option so passengers can view their location on the aircraft and the location of bathrooms & exits
- Improve legend seat type descriptors and allow for proposition & discounting text
- Clearer Business Cabin seating layout to attract Business & Frequent flyers.