Redesigning the flight booking process for desktop

Professional Diploma in UX Design

Project Title: Hummingbird Airlines (a.k.a. Fly UX)
End Client: UX Design Institute
Hummingbird Airlines is a fictitious start up that wants to change the flight booking landscape into an easy, fast and intuitive process.

This is the singular case study used to understand the end-to-end User Experience process from research > analysis > ideation > design > validation.

Role & Responsibilities

I was the lead designer for this project and facilitated the collaborative analysis phase with two fellow students. I designed both the UX and UI, as well as developing a brand system and identity that would guide some of the visuals and interactions.

View Prototype here >>

How may we design a calm and intuitive flight booking process that does not overwhelm the user?
In comparing a number of different airlines and aggregator sites, I found that most sites were badly designed and frustrating to use

Why do we visit airline websites when Google does it all and skyscanner is a household name?
  • In an online survey, I found that 82% of users that visited airline websites directly do so with the intention of booking and purchasing a flight ticket
  • 46% of users use the website to search for deals and inspiration for travel
  • 62% of users go to the airline to purchase the ticket directly after researching prices on an aggregator site

"I hate booking flights, feels like I'll mess up."


In the interviews conducted, this sentiment of being afraid of making a mistake kept appearing. One user avoids booking flights altogether and asks family or friends for fear of messing up.

How do we measure success?

From the business perspective, the airline's website had to increase conversion of people booking flights but to also increase loyalty and returning customers.

On the user's perspective, the interaction and experience had to be calm, easily understood and not overwhelming. No one should be afraid of paying money for something.


An exercise in clustering as a team

I facilitated this affinity diagramming exercise over a coupe of sessions, in part to onboard and give a live tutorial to the team on MIRO. The insights gained from this informed the user flow and journey map.

A fragment showing the pivotal change in flow of my redesign

There were 3 fundamental changes in the flight booking process. Each a small tweak that a lot of users didn't notice, but made a big difference in frustration levels.

It is not about the number of clicks it takes to reach a goal, but the frustration per click that matters.

#1 Breaking down the tasks into single item actions

By pulling out the destination from the typical crowded home page, we can reduce the mental load of the users and give emphasis to the one task at hand

#2 Creating a fork in the flow

The target audience were two distinct groups: potential customers and existing customers. I added an overview page before returning the flight results list to give an estimation of the available flights to create a fork in the flow. At this point, potential customers could either save or freeze the price, increasing the likelihood that they would return to purchase, or they could share it with their travel companions removing friction in this area; existing customers could just continue to view flights without much hassle.

#3 Grouping passenger count with passenger details

When interviewing and conducting usability tests for competitors, most left the passenger count at the default value and only bothered to change it once they were sure they wanted to book with that particular airline. This change was validated when conducting user tests showed no friction in the flow.

An image of two people looking at the screen of a laptop with in the middle of the booking process on Hummingbird Airlines

Next Project

Related Projects
UX DESIGN & STRATEGY
NGO / THIRD SECTOR

Designing a Learning Management System
-
🌍 WHO & UNICEF

Screenshot of WHO's Step-by-Step   app flow
UX DESIGN & STRATEGY
NGO / THIRD SECTOR

Designing a Progressive Web App
-
🌍 WHO

. . .

unavailable for work

connect with me