Flight Booking

Project Summary

Bookings flights should be easy, not frustrating. Using a human-centered design process, I designed a desktop booking site which would be intuitive and quick to use, particularly when deciding on airports within major cities and booking checked baggage.

What I did:

  1. Wrote consent forms & recruitment screeners

  2. Recruited users

  3. Wrote usability test scripts

  4. Usability tests x2

  5. Depth interview x1

  6. Survey

  7. Comparative benchmarking

  8. Affinity diagram

  9. Flow diagram

  10. Defined navigation

  11. Sketched and interated

  12. Medium fidelity prototyping

  13. Wireframing




User researcher, interface designer

Research Phase

The Problem

I wanted to learn more about the goals and pain points of people who use online flight booking software. I designed a short survey to determine what people use these sites for and what, if anything, prevents users from achieving their goals.

Respondents reported on their recent experiences using flight booking sites, with 15 different sites represented in total. All except one respondent were able to complete their task, which told me that flight booking design software generally works.


My task become one of optimisation based upon the pain points people come across when using competitor sites.

Goals and Pain Points

After conducting usability tests and depth interviews, I determined that the biggest pain points people experience when using flight booking software are related to airport selection within multi-airport cities, booking checked baggage and the perceived trustworthiness (or lack thereof) of the brand.

I mapped the customer journey of two major airlines based upon my usability tests to further pinpoint consumer goals, behaviours and pain points throughout the flight booking process.

Ideate & Design

The Vision

Based upon my research data, I determined that my design would primarily need to optimise:

1. Multi-city Airports

Balancing cost with distance needed to travel to an airport and perceived airport quality were primary factors for users

2. Checked Baggage

Hidden baggage costs and lack of simplicity in adding checked bags to return flights negatively impacted the user experience

3. Transparency & Honesty

Ads, up-selling, covertly adding in additional dates/airports and hidden costs made user less trusting of the brand

Structuring the User Experience

I determined the primary pathways users would take through an optimised flight booking experience and plotted them on a user flow to inform the functionality and content of my design.

Designing Solutions

Multi-city Airports

My research showed that people utilising airports in London seek to find a balance between airport location, perceived airport quality and flight costs.

My design makes selecting a multi-city airport (or airports) straightforward for users, who are able to see a city and all of it's airports.

Even in cases where a single airport is selected, other airport options and prices are shown below. My research indicated that this is a helpful resource for users when airports were clearly delineated and sectioned rather than mixed in with one another, as was the case with a competitor airline's website. 

Checked Baggage

One of the biggest pain points users experienced during testing was when adding checked baggage to their flights. Users found that competitor sites were unclear on which passenger the baggage was being added to and on which flight while booking multi-adult return flights.

"I haven't got a clue what number of flights I've booked baggage for."

- User during testing of competitor site

Because users had a far more positive view of the brand when one checked bag was included in the economy fare, I ensured that my case study would include a complimentary bag.

During the flight review process, users are then able to use simple number steppers to add or subtract bags (up to a maximum of 2) with any additional costs clearly displayed underneath.

In cases where bag quantities differ between the departing and return flights, an alert pops up underneath the number stepper (see right side: Returning Flight box). While this is shown in greyscale in this screenshot, it would appear in a visible red in a higher fidelity prototype.

Transparency & Honesty

It became evident early on in the process that distrust of a brand contributes to a negative user experience when booking flights. Any issues that arose throughout the pipeline further contributed to this sense of distrust.

Clearly labeling airports in the flight selection process (see Multi-city Airports above) is one of the ways I designed transparency and honesty into my prototype. Adding a complimentary bag (see Checked Bags) above is another.

I added a progress tracker to the top of the bag to ensure that the user would be aware of where they are in the pipeline at all times.

I also ensured that the price breakdown and trip summary (including all added costs such as seat selection as they arise) was visible throughout the booking process to build trust with the user by providing additional transparency.

My research indicated that users are, for the most part, not interested in the added extras such as rental cars and hotels when adding flights. When competitor sites forced the user onto a new screen to consider each of these extras, users lost trust and became frustrated with the company.

"What's next? Probably something else I don't need."

- User during testing of competitor site

While still respecting the fact that up-selling is important for stakeholders, I wanted to design these extras in a way that wouldn't feel forceful to the user. I created individual boxes on the flight review page that could be either clicked on or scrolled past unobtrusively.

Although my research indicated that trust is established far earlier in the pipeline, I added the logos of trusted finance brands and a lock to the 'Pay' button to further put the user at ease. I made sure to only include questions that would be absolutely necessary for the flight booking and payment processes to protect the user's sense of privacy.

Prototype & Wireframes

You can click through the prototype here:

 ... and view the final annotated wireframes here:

Contact Me
Follow Me
  • Black Twitter Icon
  • Black LinkedIn Icon


what you see?

© Cassandra Cardiff 2019