timoni.org

Timoni Grone is a web designer in San Francisco. This is her blog.

Read more about her here, or follow her on Twitter, Flickr, or other places around the internet.

Posts about redesign
January 13th, 2010

I had a similar experience the other day. I was at Wal-Mart (do NOT get me started on those idiots. Just. DON’T.) when I realized that the miserable NEANDERTHAL at the register had clearly made a few mistakes — I had purchased two hairdryers (I have extremely long hair deal with it) and yet they were NOT in my bag. So I took out my receipt and scanned it for inconsistencies:

What I saw made me FLIP. THE. FARK. OUT.

I was seriously shaking with anger. I cannot believe — cannot believe — that a company as large as Wal-Mart could get away with just awful design. Postponing my hairdrying for yet another day, I rushed out of the car and back to my Tesla. I was home in no time, and I fired up several instances of every version of photoshop that I have. It took 17 hours, but this is what I came up with:

Wal-Mart? This one is on the house. Try to learn a little something.

First of all - color. Make it pop, yes? NEW typeface (Futura, good for everything). And did I feel constrained by the so-called “size” of the receipt? Also, simplified the information - you don’t need all that crap about coupons and taxes and whatever. Simple numbers, clean, DONE. Function follows form, natch. Lastly, a little bit for the consumer to think about. Is that so hard? Thinking? Have we really fallen so low that we can’t reflect on Eastern Folk religion just because we’re at a big box store? Bringhurst must be spinning in his grave.

Damn That Television commenting on A Better Boarding Pass, in MetaFilter (thanks Phil!)

I have been laughing about this for the last five minutes straight. Tears-in-eyes laughing. Go click on the comment link to see the resulting receipt for even more hilarity.

January 5th, 2010

A completely different use case for the redesigned boarding pass

This is an addendum to the boarding pass redesign I posted earlier today.

My friend Andy pointed out a completely different use case than the one I’d designed for, which was, essentially, me: a single adult traveler who confirms my reservation and checks baggage at the ticket counter or a nearby self-serve kiosk.

Andy’s primary use case is a family traveling together with small children, with pre-printed boarding passes and self-checked luggage. As a result, certain things that aren’t important in my use case become extremely important:

  • The traveler’s name. A single adult traveler will likely never need to double-check their own name on their ticket. The TSA will double-check it against a government ID, and a gate attendant may glance at it briefly.
    In contrast, a traveling parent will likely need to check ticket names and seats several times to make sure everyone boards at the right time.
  • Bar code positions. Bar code positions only matter to travelers that are self-checking baggage. According to Andy, my design wouldn’t work well on the rather temperamental scanning machines, which even now require awkward paper folding and fiddling. To be honest, I’m not sure if any letter-paper sized self-printed ticket barcode would be easy to scan. The much better solution is to let the user enter a simple five-digit ID code or use a credit card for identification, like self-checkin kiosks.
    (Gate attendants will also scan bar codes as travelers board flights, but my original design is serviceable for that use case.)
  • Airport city names. This is primarily a problem on flights with multiple stops, and one that I addressed—minimally—in my design. As Andy pointed out, the passengers you’re in charge of, the more important a clear ticket sequence is.
    Rather than emphasize city names, I favor a simple numerical approach (labeling tickets flight one, two, three, and so on). Color-coded numbers would be even better, of course, though likely not practical.
  • I’m sure there’s other use cases I haven’t thought of yet. Justin also mentioned that the information hierarchy on my ticket still doesn’t make it immediately clear what the traveler should be looking at at any given time. Unfortunately this is because the traveler’s needs change as they progress through the airport; in this comment, I talk about my grand vision to have every stage color-coded.

—Timoni

A practical boarding pass redesign

Improving the air travel experience is something of a passion of mine, so when I saw Tyler Thompson’s boarding pass redesign, I was intrigued. His article is well-thought-out and provoking, but unfortunately his redesigns don’t address a lot of the practical issues that airline travelers and airlines have to deal with.

Tim Morgan discussed some of the obvious shortcomings in his summary here, and after talking with both him and James Yu I’ve taken a first pass at a practical boarding pass redesign. (Edit: I’ve also discussed another use case here.)

Going over practicalities and priorities.

I had a few design constraints. First, no interesting typefaces or graphics: although they could vastly improve user experience, practically speaking, the machines that print boarding passes won’t be replaced soon. For this redesign, I stuck with one-weight Monaco. Likewise small gate maps of each airport would be ideal, but aren’t practical—so, that idea was scrapped, too.

Second, I constantly kept in mind that the ticket has at least two users, and usually three: both the traveler, who uses it as a reference, and also any TSA agent or airline employee that might need to inspect it.

For this example, I researched multiple airlines’ boarding passes to see what information needed to be included for all interested parties. I chose United Airlines as the airline here, mainly because I used them to travel home for the holidays this Christmas. With a lot of help from James, I’ve outlined checked-in, boarding-pass carrying airline traveler priorities as follows:

  1. Gate number
  2. Board time
  3. Boarding zone
  4. Seat number
  5. Departure time

And so:

The redesign itself.

You’ll see that the ticket reflects the priorities I just listed for passengers. For the TSA officials scanning this boarding pass, they’ll see the information they’re looking for up top, where the untrained quickly learn to find it: airline, flight number, and passenger name (in the same order as the passenger’s ID).

For airline officials, most of their internal indexing numbers are inside the grey box—it’s grey so that it’s easy for the other parties to ignore. So far as I can tell, airline-only information is usually a bunch of ID numbers. In this mockup, I’ve also included a lot of abbreviations that were present on several boarding pass examples, though in every example I found online, they were left blank. Maybe someone in the airline industry can explain their purpose.

Because I’m a sucker for plain English instructions, I’ve included the text “First leg to [airport code] | transfer at [airport code]” above the grey airline-only box. I’m not sure whether or not it’s feasible to put leg numbers on boarding passes, but if one could easily put one’s transfer tickets in order, it would make travel that much more pleasant.


So let’s walk through some details.

The passenger gets their ticket at the check-in counter or self-check-in kiosk. If they’re printing out tickets at home the night before, or received them in the mail prior to flight, they won’t get a gate, in which case the gate number will have tiny instructions to check with an airline employee. In any case, once travelers know their gate and are going through security, they’ll focus on this:

TSA agents, on the other hand, will be focused on this, especially the top row:

And of course, should there be any problems at the gate, the agent will be focused on this, particularly the information in and above the grey box:

When the passenger is ready to board, they will care about this:

And when they are in the walkway, almost on the plane, they only have the right-hand ticket stub—which is fine, because they just care about this:

Though this redesign isn’t sexy, the important information will be obvious to whoever’s looking for it. TSA agents and airline agents are look at hundreds, if not thousands, of boarding passes a day, so despite the smaller type size, with this redesign they’ll be able to find what they’re looking for because the information they really need is grouped in a small and readable area.

For travelers, the benefits to this design are obvious. A lot of the changes I’ve made are similar to Thompsons’, but with a clearer information hierarchy and a more legible typeface.


A typographic addendum.

Speaking of legible typefaces, this design is typographically sound and if printing machine support it, should look good in a wide variety of typefaces. Here’s the same redesign set in Helvetica Neue (normal and bold).

—Timoni

1 of 1 pages. You can browse the Archives