Universal Boarding Pass

5 min readJan 13, 2017

I recently got to fly to New York City and when I received my e-ticket in my email, I was shocked at how bad it was — (aesthetically speaking). It was so unreadable that I couldn’t believe it. So I decided to try designing one.

Note: All this work is under the Attribution 4.0 International (CC BY 4.0) license. It means you can do whatever you want with it, as long as you credit me somewhere (more info here).

All the design is visible on my Figma board here. You might even see me updating live from time to time.

And you can play with the prototype here.

Design

As most of the design is self-explanatory, I will only add info when it’s necessary.

I separated the design in 3+1 categories :

For Smartphone
For Dumbphone
For Print

and an extra one, where I adapt the design to 4 different airlines

Adaptation

The key words I had in mind when designing the boarding pass:

Simple : the ticket (and e-ticket) should be pretty straightforward, no useless info, no animation, etc.
Clear: a natural direction of the text, to ensure that we catch all the info in a natural flow.
No hard edge: as airports are not the friendliest nor a relaxing place to be, I avoided hard edges as much as I could (in the shapes, lines, etc). Some of you might find the font Noto Sans a bit “hard”, I’d say it’s a good compromise between readability and universality*
Adaptation: the ticket should be (very) easy to adapt to any airline by changing only the logo and the main colour. So regardless of the airline you fly with, you will always find the essential info in the same place.

*Google has been developing a font family […] which aims to support all languages.

For Smartphones

So here is the main screen for your flight. All the info is displayed on a single “page”. The main colour is the Air Canada’s red (hex: #D9252D).

At the bottom you can see a weird code, it’s your e-Ticket Code. To scan it, you would just swipe up.

*The cat photo: (CC BY 3.0) — Heikki Siltala*

I designed an imaginative QR-codish code (inspired by the Messenger code). I do think we should have a better designed code that makes us feel less like walking and talking merchandise and more like human beings… well… ok… we are all wallets with legs.

When I used the pdf (that the airline company sent to me), it was a bit upsetting when I was boarding, I had to:

open the damn file/attachment
zoom to the correct size
block the autorotate feature
and avoid touching anything!

So that’s why I put the “Slide to close” slider to minimize such annoyances. And of course the code will automatically be at the right size, ready to be scanned!

And you might say, what if I have a layover? My response: “That’s too bad… but no worries you’re all covered”!

You can see this is a 1-stop flight with 2 elements:

The “1-stop” mention in the header, in the top right corner
and the little “red dot”, on the arrow between “Toronto and Tokyo””

To get more info, just click on the “i icon”.

I added the “luggage icon”, because it’s always stressful to not know clearly if you are required to pick up your bags before boarding your connecting flight.

Based on the icon designed by Aldric Rodríguez from the Noun Project

I don’t know you but every time I enter a plane it’s like being in an endless corridor…

That’s why I think colour coded seats could help us all:

and so we could have some info like this:

I’m sure it would be easier and faster to find your seat, wouldn’t it?

For Dumbphone

I recently abandon my “smartphone” to a “dumb” alternative. (MP-01 by punkt) this one only makes calls and sends/receives texts. That’s all. Yeah, I know it’s kinda crazy!

So if we adapt the same principle, we have this design:

And to be honest, I spent hours on the smartphone version, but I think this one looks better on this one. Dieter Rams is (always) right:

Less is More.

For Print

I also think that all printed tickets should be the same (except for the main colour and logo). Why does every company reinvent the wheel?

I have also paid attention to not place any info in the middle of the ticket, so you can fold at the middle, without “masking” anything.

In Black & White:

Adaptation

As I said above, to adapt the ticket, you just have to change the logo and the main colour:

Conclusion

I think it could be a starting point to make airline tickets “universal”.

As a reminder: This design is licensed under the Attribution 4.0 International (CC BY 4.0) licence. It means you can do whatever you want with it as long as you credit me somewhere (more info).

You can view the figma board here

And play with the prototype here

Thanks to my friend Sinj Karan for helping proofread the text.