A redesign of the mobile boarding pass

Working remotely for Automattic requires you to do a fair bit of travel each year – both for our annual Grand Meetup (in which the whole company comes together), for team meetups and then at times other meetups dependant on the area of the business or projects you are working on.

At the most I have done 11 transatlantic flights in a year 😱✈️ – not as many as other jobs, but more than most jobs I think! As a result of this – you get to spend more time than most looking at boarding passes, be they the printed kind or the mobile/digital kind.

Towards the end of last year – to kill time in the airport lounges and to learn a new design tool – I spent some time thinking about what I would do if I could design a mobile boarding pass from scratch – something that would suit the needs I had found I wanted from a boarding pass. For the sake of the ‘design challenge’, I used an existing mobile boarding pass I had for a Lufthansa flight. Below is the design concept I ended on:

In my design I aimed to group the various information into four main sections on the screen – here is some of my thinking on each section and the information contained in each:

What are my flight details again?

This shows all the primary information as you arrive at the airport or land at a connecting airport – so things like the flight number, gate and boarding time. The aim of this grouping is to allow you to quickly see where you need to be and when – getting you through the terminal faster.

When, where to and what’s the flight status?

This grouping covers where you flying from and where you flying to – complete with a flight status indicator – so a check symbol ✅ if all is okay or an exclamation ⚠️ if there was a delay or a cross mark ❎ if it was cancelled. A long press on the symbol would give you more information regarding the flight status in the case of a delayed or cancelled flight.

How long till boarding starts and how long to get there?

This grouping would make use of the time on your phone as well as your location settings to tell you how long you had till boarding started (a real-time countdown basically) and an indication of how far you were from the gate (how long it would take you to get there) based on your location within the terminal.

Let me onboard!

This grouping contains all the details you needed to get onboard the plane and ideally, this section would swop with the flight status module when boarding commenced – placing it more mid-screen and easier to scan as you go through the checkpoints.

---

Unfortunately, I don’t have access to the original Lufthansa boarding pass to compare it against anymore for this post 😞