Designing a Boarding Pass for Your UX Portfolio

A boarding pass mockup has been a portfolio staple for a decade. Done well, it shows you understand hierarchy, dense information, and the constraints of a real world document. Done badly, it looks like every other flashy concept that ignores how airlines actually work. This is the difference.

What recruiters actually look for

Recruiters at airlines, travel tech, and agencies do not care about your rounded corners. They look for three things.

1. Can you organise dense information so the user reads it at arm's length in an airport queue.
2. Do you understand that a boarding pass is a document first, a brand artifact second.
3. Can you tell a story about why you made the choices you made.

The good news, all three are learnable.

Start with the hierarchy, not the colours

The passenger at a gate reads a boarding pass in roughly this order. Airline name, flight number, seat, gate, boarding time, departure time. The rest is context. If your mockup puts the airline logo at 72 pixels and the gate at 18, you have inverted the hierarchy for the person actually using the document.

The real hierarchy

1. Gate, large, bold, unambiguous.
2. Seat, similar weight.
3. Boarding time, secondary but bold.
4. Flight number, departure city codes, departure time.
5. Passenger name, in smaller caps.
6. Everything else.

Use a three column grid

Every good boarding pass is a three column grid. Airline branding on the left, the main flight detail in the middle, and the secondary info plus stub on the right. When you break the grid you usually make things worse, not better.

Pick the right typography

Sans serifs dominate boarding pass design for a reason. They read well at small sizes, they survive low quality thermal printing, and they hold up under poor contrast. Your portfolio mockup should feel the same even though it will never touch a thermal printer.

For a deeper look at which fonts airlines actually use and why, read Typography in transport design.

Brand without borrowing trademarks

A portfolio piece should not pass off a real airline's brand as your own. Invent a fictional airline. Give it a name, a two letter code, a colour, and a reason to exist. "Altitude Air" or "Meridian Airways" work fine. That also frees you to try ideas a real airline will not approve.

For reference on real airline palettes you can study, the airline brand colors reference has hex values for twenty five major carriers.

What to include in the case study

The mockup itself is a third of the value. The other two thirds are the case study around it. At minimum cover these.

• Problem statement. Why does this document exist, for whom.
• Constraints. IATA size requirements, print quality, accessibility needs.
• Key decisions. Why you put the gate where you put it, why the typeface.
• Failure modes. What happens if the paper crumples, if the user is colour blind, if the barcode scanner fails.
• What you would do next. Mobile, Apple Wallet, accessibility pass.

Four common mistakes

• Giant airline logo. Reduce it. Real boarding passes use small logos.
• Gradient backgrounds. Boarding passes are read fast. Gradients kill contrast.
• Custom barcode art. Airlines use CODE128 or PDF417, governed by IATA BCBP. Mimic the dimensions at least.
• Calligraphic fonts. Save them for wedding invitations.

A simple brief you can start with

Design a boarding pass for a new budget carrier called Meridian, flying domestic in your country. The pass should work on thermal print and as a full colour email PDF. Assume the carrier has a single blue brand colour and a Space Grotesk inspired wordmark.

Set yourself four hours. Produce two versions, thermal and full colour. Write five hundred words of case study. That is a portfolio piece that will stand up to scrutiny.

To see how different airlines solve the same layout problem, read ticket UI case studies from major airlines. For a technical breakdown of the hidden rules behind every boarding pass, see how real boarding passes are designed.