Flight booking UX: the bad & the ugly

Can we even fix it?

In a short amount of time, we’ve gone from calling up people (or meeting up with booking agents) to a DIY online system whenever we need to book a flight. And yet after years of booking flights online, I still find the experience so cumbersome and stressful that I sometimes consider calling up someone (I’m a renown introvert, therefore I’d like to avoid calling as much as possible).

Seriously, it’s 2020 and the fact that it takes at least an hour to find and book flight tickets baffles me, I’m not the only one either.

Photo by Chris Brignola on Unsplash

But First, a Story

It was July 2019. My brother and I hurried to book tickets for a flight due to an emergency happening at home; we jumped on the computer looking for tickets for the next day.

My brother had some credits in his name because he’d cancelled a flight from the previous Christmas. Instead of a refund in cash, he got the credits in the form of a voucher. I proceeded to open 2 browsers to book the tickets simultaneously.

What happened next sent me off to sheer confusion. The 2 web pages were in entirely different designs, with different layouts, making it feel like two different websites doing the same function. The situation suddenly became even more stressful.

Screenshots of the 2 flight booking UIs on Qantas website.

The 2 UIs side-by-side. Official site (left) has too much space vs. the “voucher” UI (right) has too little.

I then redeemed the voucher. I tried to compare the pages and do everything step-by-step while the switching between 2 different yet kinda-also-the-same contexts made it almost impossible. I then decided to book one-by-one, starting with the official site because it is (a tad) more intuitive though I’m confused about the decision to use that much white space for the pricing cells.

After finish booking my ticket, I continued with my brother’s. The structure is still the same, but it’s much more difficult to scan; the font is too small by default, and the width of the text container is too wide for easy reading. There’s also a lack of visibility on what’s the difference between ticket tiers.

There are a few design lessons here.

  1. Don’t have 2 different layouts for two similar things, which creates an unnecessary cognitive load, especially when your customer is under stress; which most of us are a lot of times. Be empathetic by thinking of those time you’re in a rough spot and how a digital experience can help to make your day a little easier (and those that frustrate you to avoid what they’re doing).

  2. I suspect that technically-speaking, there’s some cost factor involved where Qantas team didn’t want to prioritise their voucher experience to be the same as the core booking experience. It could be just an oversight. One solution is that the backlog should always be prioritised so that the experience is consistent and coherent.

  3. When design a compare page, be generous with spacing, so your audience won’t be overwhelmed with information.

  4. You may be thinking, “This is an edge case. We can’t design for all edge cases.” Sure, but I can imagine there are a lot of people with vouchers and will book tickets through this separate portal for whatever reasons, e.g. gift vouchers, refunds. The page needs a facelift, and the experience needs consolidating. Hence, look at your numbers and prioritise edge cases into your sprints accordingly.

The story didn’t end there.

After struggling for I don’t know how long, I excitedly managed to book our tickets at a surprisingly low price, roughly as much as I would usually book in advance (no one understands how flight pricing works anyways).

It turned out, we got 2 different tiers of tickets, with various benefits without realising. It turned out the poor designs have now cost us even more than it should have.

A screenshot of the Qantas website.

There’s no information about add-ons, or the lack thereof.

Other Flight Booking Experiences

After my trip, I decided to look into more flight booking websites. Some brands I looked into:

  • Jetstar

  • Emirates

  • Booking.com

  • Kayak

  • Skyscanner

A screenshot of Jetstar website.

Jetstar’s booking UX. The information feels more digestible than Qantas.

A screenshot of Emirates Australia website.

Emirates Australia opted for a table design before landing users to a column view.

A screenshot of Booking.com flight booking webpage.

Booking.com opted in for a horizontal layout.

I love the “Anywhere” destination feature on Kayak.

A quick comparison between some prominent brands on the market shows that all of them provide a similar booking flow; some have better designs than others.

In general, as a traveller, you either search via a search engine, most likely Google, to go to a booking site or go directly to your usual booking aggregator or airline. Then you may try to compare several different flights and websites until you find the best-suited tickets for your trip. After entering your details and process payment, you’ll have your tickets sent to your inbox within 24 hours.

What is wrong with the flight booking UX?
Seriously, why is it still such a pain?uxdesign.cc

This paragraph from 10 Powerful User Nudges Illustrated by Eugen Eşanu summed up for me why the flight booking experience feels terrible.

[…] they start to add the extra charges in ‘chunks’. By the time you get to the full cost of your flight, you have put so much effort into the booking process, and are so attached to the idea of the holiday, that you would rather complete the purchase at a cost significantly higher than the initial seat price than write off the investment of your time and emotion.

In short, because of your emotional state while a booking flight, some products trick you into paying more than you should. Flying is a privilege, for some people, e.g. ex-pats, it is a must-have. And yet while airlines increase flight ticket pricing to maximise their profits, some CEOs get paid millions of dollars a year. Furthermore, their customers, that’s us, are paying to fly in highly-carbon-emitted machines and simultaneously suffering from dark UX.

What Can We Do to Improve This?

For airlines, it’s time to think more critically about the online experience. Since, I suspect, booking is the most used feature on any airline website. Some questions that can be raised in the next meeting about the flight booking UX:

  • Is there a way to streamline pricing?

  • How might we speed up the comparison process?

  • Can design create a better and more delightful booking experience? Or is there something else more suitable?

  • Some airlines are saving their customers details for faster booking and check-ins. Is this safe for customer’s privacy? Is this speeding up the process? How many people are benefiting from this feature?

  • On a bigger scale, can we make the immigration process more enjoyable?

As we’re progressing to adopt hybrid airships as a more viable flying option, this is the perfect time to change the process for the better.

Bonus: An Update Boarding Pass Design

While we’re on this topic, I also think we could do better with the boarding pass. For whatever reasons, electronic boarding passes never works for me. And whenever I receive a physical boarding pass, an airline staff member has to circle the gate, the time of the flight, and my seat; which means these are the 3 most essential pieces of information for the passenger and the airline.

But this practice is a waste of time. If a boarding pass is designed well, it shouldn’t be an issue. As an outsider, I can see some constraints (there might be more). Constraints such as the bar code needs to be where it is, or how the boarding pass is physically shaped, but there shouldn’t be anything preventing us from updating it for better usability.

Let’s examine a passenger’s user flow who is using a boarding pass at an airport. For a flight, a person must first come to the airport and receive a boarding pass from a staff member or a kiosk. Then they will go through security and customs. After being checked for liquids and bombs, our passenger finds the gate and then waits until boarding to look for their seat.

A flight passenger’s “user flow”.

A typical passenger’s “user flow”. Created with Whimsical.

Since we usually scan a information from top to bottom, I wanted to rearrange the primary information to match with how a passenger would go through their little journey to the gate. I also made a few changes to sizing and added colours to create a visual hierarchy. The challenge is to fit all of this information into a little pass without making it feel overwhelming.

Here we go. With a little design work, our boarding pass is looking a lot better, which will save everyone a lot of time scribbling and explaining, too. And hopefully, our passenger will get to their gate on time for their flight.

Boarding pass redesign.

Boarding pass redesign.