United Airlines | 2019
Refresh United’s suite of boarding passes (app-based, PDF, and mobile web) to match United’s new design system and brand colors and make any necessary UX improvements.
Defined design process and timelines for UX/UI designer
Worked with UX researcher to strategize qualitative studies
Worked with analytics lead to identify trends in data
Organized meetings and approvals with stakeholders
Provided feedback on UI design concepts and decided final UX direction
The boarding pass refresh was apart of United’s 2017-2019 push to replatform and redesign their digital channels. When company leadership approached me and my team about the boarding pass redesign, they envisioned we’d incorporate the new design system and brand colors into our concepts. Aside from that, we were on our own to decide which improvements to the document were necessary.
We focused our first design concepts on app-based boarding passes because we could quickly launch the feature. We’d return to printable PDF boarding passes and in-browser boarding passes later.
In the absence of direction from company leadership, my design team and I began by asking questions:
What's wrong with the existing boarding passes?
When are customers opening their boarding passes?
Who, besides customers, is affected by the boarding pass?
Which stakeholders do we need to involve?
We focused our first design concepts on app-based boarding passes because we could quickly launch the new design. We’d return to printable PDF boarding passes and in-browser boarding passes later.
In the absence of direction from company leadership, my design team and I began by asking questions:
Journey mapping helped us pinpoint exactly when customers needed or wanted to open or use their boarding passes.
Airport interviews with customers.
What do you expect from a boarding pass?
What information is top priority on the pass?
What do you think about the existing boarding pass? Is it missing any information? Is it easy to understand?
A competitive analysis enabled us to review the app-based boarding passes from other major airlines.
We learned from our discovery phase that there were three major usability issues with the existing boarding passes.
The boarding group label didn’t correspond with the value next to it. (Plus, the color contrast of blue background to white font was not accessible!)
Customers sometimes confused their gate number with their seat number since the values were side by side.
There was no indication that a traveler in a “multiple passenger” travel situation could swipe right to see the boarding passes of the other members in their group.
I asked the UX/UI designer to come up with three concepts--one conservative and two progressive--and she didn’t disappoint. The first design (far left) made small changes, including usability fixes, to the existing boarding passes. The other two designs started afresh. They centered the QR code for easy access to other boarding passes in multiple passenger situations, but ultimately, we felt like they still contained too much text.
We needed to come up with a design solution that would improve usability and readability, so I oversaw a second competitive analysis. This time, we didn’t look at app-based boarding passes; we instead studied a range of apps, all of which were managing a lot of information on their pages.
Our final design incorporated an interactive flight status drawer, which users could swipe to open if they wanted to see status and time information. This meant we could use the space of the primary design concept to emphasize gate, boarding time, boarding group, and seat number. And we’d place those values in the order that customers would refer to each one during their journeys.
We conducted three rounds of remote, unmoderated usability testing. By round three, all participants found that the app-based boarding pass was easy to read and understand. The majority appreciated the fact that everything fit on one page (no scrolling) and that they could interact with the flight status drawer.
Approvals didn’t take long. Leadership’s only concern about our design concept was that the QR code was not centered. They feared that a right-aligned placement would make the code harder to scan. We contacted the airport operations team to ask if it was an issue. It wasn’t. But we added a new feature: tapping the QR code would open it in a new window.
The design was ready, and the UX/UI designer worked with the dev team to adapt it to every screen size for launch in September 2019. We then translated that design to the printable PDF boarding passes (launch TBD) and the mobile/web boarding passes (to be launched with web check-in).
A feedback loop from United’s internal employee website, external blog posts, and agent representatives provided positive feedback and small recommendations to improve the experience for gate agents and customer service recommendations. Here are some of their comments:
"Great Job.... like it !!! Had the opportunity to see it personally as the greeter when customer presented to me, much easier for me to identify his selected seat assignment and direct him much more quickly."
"GLOBAL SERVICES needs to get back the yellow line on the boarding pass, tiny yellow letter is not enough. Other than that look good."
"Our GS customers are very happy about this improved App. Kudos to the team and all the feedbacks :) Agreed to make the confirmation number larger font size please."
"Wow! The Points Guy just mentioned the terminal issue in his vlog last week... glad we got that fixed!"
"FINALLY. Our request to have the confirmation number visible on the same screen. Can you make the confirmation code larger?"
"great improvement..........."
