Every second planes are taking off worldwide. We pay a lot of attention to costs, destinations, boarding, and many many other things, but there’s one thing we don’t care about, and it applies to your boarding pass. Specifically, the kind of usability it should have?

Airlines have 90 years of boarding pass design under their belts but they’ve still managed to flub it.

Evolution

Primarily designed to be filled in by hand
Boarding pass_to be_fille_in_pen

…they’ve remained virtually unchanged with thermal printers:

Boarding pass_with_thermal printers

…and successfully migrated to Passbook:
Boarding pass_Passbook

So What’s Wrong With Them?

  1. Ungrouped fields: time of departure and gate closing time are in two opposite corners
  2. Tiny text: good luck to old people checking it with bad lighting, not to mention while they’re on the go
  3. Wrong visual priorities: the most prominent elements are the airport codes. If you know anything about your flight without needing to look at your boarding pass, it’s your origin and destination. You’d probably like to know everything else: gate, seat, etc.
Current boarding passes have hideous usability. There is no grouping of data in them, as well as a lack of visual dominants, grids, space, and good typography. Their readability is poor, like crumpled punch cards.

Instead we should appeal to:

  • Quantitative usability research: how long it takes (in seconds) to find necessary information on the ticket
  • Percentage of mistakes: the ratio of latecomers to boarded passengers
  • Downtime caused by long pick-ups

Our Solution

Our version of a boarding pass:
Boarding pass_Icons8

The idea is:

  • All the right information
  • At the right time
  • Without any of the noise
Elements are grouped:
Boarding pass_grouping

Credits

We were highly influenced by Adam Glynn-Finnegan
Colored_boarding_pass
Please let me share the history of incremental changes of Gelnn’s design that lead to a complete redesign.

Improvement 1. Grouping

We’ve stripped the color lines and here’s what we’ve got:
Bourding pass_grouping_data
It didn’t look grouped at all; not in the way it’s meant to. Rather, we saw two groups:
Boarding pass_grouping data
It looks a little bit like this:

 

So we started moving blocks before figuring out grouping horizontally is virtually impossible.

  • On the one hand, you have to put the blocks close to each other
  • On the other, they have variable lengths: names, cities, even dates can have very different lengths
We ended up with the grouping shown below:
Boarding pass_grouping data

Improvement 2. Icons

Icons are something we’ve been doing since 2002. We thought we could contribute here.

We didn’t like the “rear” icon: it’s not clear which half of the aircraft is highlighted. Also, we thought we could use more precision: in wide-body aircrafts, flight attendants have to direct each of the 400 passengers to one of the aisles.

Improvement _Icons
We ended up with an arrow. We love arrows; we think they communicate something savage in us; something we’re designed for. The mental model of getting to the seat is the same as the mental model of attacking a mammoth.

Cleaning up

We’ve moved everything unnecessary for the passenger to the header and footer:
Boerding pass_elements

Effect

With a redesign like this we could expect:

  • Fewer passengers missing their flights
  • Fewer flight delays due to missing passengers
  • Fewer delays for removing baggage of missing passengers
  • Less load on airport information desks
  • Faster boarding: people know where to look for their seat numbers

What else?

Flight attendants don’t need to point to an aisle 400 times per flight. They would save their vocal cords if they didn’t need to repeat “This way please, to the back” or “Adelante, por favor.”
Some statistics: there are 500 million passengers per year in the United States alone. Saving just 10 seconds per passenger we save 159 years in the USA, every year. That’s two full human lives.
Two human lives per year!
Like the article? Please leave a comment!

About the Author
Ivan Boyko is a founder of Icons8. He got his first job after drawing a banner with CTR of 43%. After years of creating icons, he specializes in rapid prototyping and backlog grooming.