FlyUX

Redesigning the airline booking process

UX design graduation project • UX Design Institute

Overview

There is a lot of scope for re-thinking, improving, and redesigning Airline websites. This is my story of designing FlyUX; A proposal for a new airline website with a focus on the booking process.

Project details

Duration: 9 months (2019 - 2020)
My role: UX Researcher, UX Designer

Image of a laptop with final design on the screen

What is happening with airline websites?

Most of us view technology as something that makes things easier. For many people, however, the experience of using an airline website is too complicated and daunting. The numbers depict this clearly:

With these numbers at hand, it was clear we had to focus our efforts on the purchase process.
Better user experience on our proposed website would naturally mean more conversions and satisfied customers.
Jump to proposed solutions

Research

Competitive benchmarking

I started this project with online research on best-in-class airline websites. I considered travel websites and aggregators as they are solving a similar problem for users; Offering comprehensive interfaces to enter travel destinations, dates, and details.

I narrowed my search to three European airlines with high ranking in SKYTRAX, and one globally acknowledged travel aggregator.

Competitive benchmarking
Competitive benchmarking. KLM Airlines - Click to enlarge
Competitive benchmarking
Competitive benchmarking. Swiss Airlines - Click to enlarge
Competitive benchmarking
Competitive benchmarking. Aegean Airlines & Skyscanner - Click to enlarge

Findings

  • The search functionality of the software is immediately accessible on the homepage.
  • Searching for flights requires entering a lot of data. Progressive disclosure is not applied to all websites.
  • Choosing flights includes making sense of too much information.
  • Passengers often need to fill out a lengthly form with personal details to book a flight.
  • Too many intrusive ads and offers presented throughout the booking process.

Online survey

Still early in the research phase, gaining more quantitative as well as qualitative data was essential to understand the users' experience on popular airline's websites. An online survey with both open-ended and close-ended questions was easy to put together and fast to be shared online. Soon I had even more valuable insights to add to the ones gathered from benchmarking and note-taking.

Image of a pie chart with survey results
Responses to a close-ended question of the survey - Gaining quantitative data

Findings

  • 65 % of the users found the booking process was not easy to complete.
  • The way the information is displayed on the websites is not always comprehensive (date picker, travel choices).
  • Users found the websites were slow/had a long loading time.
  • Participants did not appreciate the fact the website did not make suggestions for better prices by choosing alternative airports or dates.

Remote usability test

Since usability testing is the best way to answer the why behind the users' actions, it was the next logical step.

Scenario / requested tasks to complete

  • Book a flight from Amsterdam to Athens for a week departing February 8 and returning February 15 for 1 adult (like you!). Do this both on Aegean airlines' website and KLM's website. We stop right before we get to seat selection.
Video of a usability test
A short clip from my usability test. Click to view
“In general I don't care about the benefits; I think they just want more money, in my head.”

Findings

  • While searching for flights, the date picker is confusing the user.
  • The participant's primary goal is to get a good deal for his dates.
  • He considers the interface for choosing flights complicated with too much data.
  • He repeatedly mentions how he does not like ads on airline websites.
  • The participant does not read titles and too much information.

Analysis

Affinity diagram

As the research phase came to an end, it was now time to analyze all the data I had gathered from the competitive benchmarking, online survey, note-taking, and usability test. We organized it by creating an affinity diagram.

Me and other colleagues analysing data
Using an affinity diagram as a tool to make sense of the research data. Special thanks to Viki, Marie, and Lovisa for helping :)
Affinity diagram analysis
Affinity diagram - Final grouping and labeling

Key findings

  • The users' primary goals while on the airlines websites is to find a good deal.
  • The customers very often visit the websites just to check prices and dates.
  • Customers have a look at the websites at work or while commuting. However, they book the flights at home from their laptop or desktop.
  • When searching for flights, the date picker is confusing to the users.
  • There is too much information on the screen when selecting flights, and it is not clearly presented.
  • Users do not like intrusive ads and offers.

Customer Journey Map

After creating the affinity diagram, the next step was to build on the findings it offered. I was now looking at comprehensive groups of issues with the booking process. It was time to see the product, the airline websites, through the customer's eyes.

Customer journey map
Final customer journey map

Design

User flows

With the research and analysis phases complete, it was now time for me to get into design mode. Before designing any screens, I first had to plan and specify the flow. I had to consider each step the user would take and design each screen and screen state with those steps in mind. I focused on one primary use case - search and select flights - and proceeded to define the high-level flow of the airline website users.

Image of the user flows
The final flow - created with Figma

Sketches

After designing the high-level flow, I was ready to begin sketching my new airline website's screens. Sketching is a quick and inexpensive way to express design ideas and a vital step before prototyping.
I collected all the analysis findings and poured them into my sketches in an effort to solve the current issues on airline websites - particularly during the booking process.

Gif of an array of sketches

Prototype

Mid-fidelity prototype

The flow diagram and sketches had helped me define much of the solution to the problem. The next step was to create a mid-fidelity prototype to test my solutions/designs. Were they adequate to address the users' issues with the airline booking process (on desktop)?

Mid-fidelity prototype • Airline website for desktop

Wireframes

The final step for this project was to make it development-ready. For that purpose, I created a detailed set of wireframes to hand over to the developer, along with documents containing the IA of the website and the user flows.

Wireframe with annotations about the "Search for flights" screen
Wireframe for the screen "Search for flights - Passenger options"
Wireframe about the extra options and select seats
Wireframe for the screen "Extra options - Select seats"
Wireframe about searching for flights
Wireframe for the screen "Search for flights"

Proposed solutions

Customers immediately find what they're looking for; Users have control to check non-intrusive offers if they want to.

By adding meaningful interactions we help users to quickly fill in their data and jump to the next steps. Also, by showing prices in the date picker, the process becomes more transparent and faster. Progressive disclosure is applied to help the users fill relevant information without overwhelming them.

Information architecture is organized to help the users focus on choosing flights.

Price ranges and visible prices without having to hover over or click on a seat to see. Semantic colors and illustrations signify seats' variations. Chosen seats are signified with the passengers' initials and a highlighted outline.

A detailed summary with all the user's choices with pricing is both informing and straightforward, building trust between the company and customer.

Conclusion

This project was revealing of the complexity of airline websites and the booking process in particular. It has fortified my belief that the UX process can guide a designer through the most complicated software problems. If you stay true to the process, it can help you organize and analyze a vast amount of data.

It is critical always to remember we are not the target audience – we are not designing for ourselves but for the end-users. As UX designers, we need to empathize as much as we can with the people we are designing for to provide great experiences.

The research process plays a vital role in that; You have to get to know your audience before designing any screens. If you don't do the research, you are only making assumptions about your users' goals, behaviors, context, and pain points. Assumptions always need to be explored and validated via research and prototyping. Only then can you be confident you are solving the right problems.

My workBack to topNext up: Earfull