Airlines seat map (CheapOair)

When going through a flight ticket purchase, customers have a chance to purchase their tickets. CheapOair didn’t used to have a digestible visualization of seat maps and intuitive way to select seats.
Role
UX, UI Design
Time
2014
Platform
Desktop web

Background & problem

Seat selection is an important step for ticket purchases. It ensures customers with optimal travel experiences to their preference, and gives airline companies, as long as travel agents like CheapOair, a way to monetize. However, CheapOair didn’t have offer an intuitive experience for seat selection through out the purchase flow. Therefore, we decided to redesign the seat selection tool that focuses on the seat map.

Projected Impact

Increase of seat selection

By providing a better and easier experience to select seats, we expected to have a higher seat selection rate.

Increase in bookings

By showcasing seat options in a digestible way, we expected customers to find more suitable and attractive flight options for their needs, and ultimately help us increase bookings.

Designs

Entry point

Seat options can be a critical deciding factor for some customers, therefore we put the entry point on the flight detail page. However, data showed that not all customers select seats at this step, and we also knew from historical research that the detail page houses a lot of information that some customers feel that it’s overwhelming. Therefore we make the map a two-fold widget, which customers always see the route overview on the top, and can choose to see the detail map based on their preferences. For most cases, the map will be open by default so customers don’t miss it.

Seat map widget collapsed
Seat map widget collapsed

Selection

Once the map is open, customers get to see the travelers on the top, map horizontally in the middle, the legend and the price breakdown on the bottom. This is based on the mental model that we’ve discovered. When it comes to seat selection, customers usually start with thinking about how many people on this trip that needed to be assigned with seats. Then they think about what seat options are available. Finally when they make the decision, they want to an easy way to see individual and total spending.

Because the page has a lot of other widgets, it was clear that we needed to present the map in a horizontal way, especially for certain flights that are very long and narrow. Hence we designed the widget around the concept of horizontal presentation.

Start to assign seats
Start to assign seats
Hover to see details of seat offers
Hover to see details of seat offers
Finish assignment for a trip and get to the next
Finish assignment for a trip and get to the next
Finalize selection and confirm
Finalize selection and confirm
Confirm selection and close the map
Confirm selection and close the map

Accessibility

For customers who need handicap accessibility, it is critical to identify accessibility-compliant seats easily. It is even more critical that they can do it before checking out so they don’t either accidentally get tickets that don’t serve them well or lose the chance to notify the airport and airlines staff for needed assistance. Therefore, we added a checkbox underneath the map so customers can check it to highlight accessibility seats so they can easily choose ones that are good. It also helps other customers who don’t need it to no select them out of accident.

project-seatmap-5.png


Explore more

There are more projects to see! Enjoy!