As an UX / UI designer on United’s Check-in and Flight Status team for over a year, I was a key team member on kiosk and app rebrand projects, among others. My highest visibility project was redesigning the boarding pass on the app. Other projects I shipped included redesigns of the flight schedule timetable and the app passport scanning flow.
The United app was due for an updated boarding pass, especially following the release of contextual homepage cards—information when you need it.
Airport intercept & survey data gathered in 2017 showed travelers were most concerned with their seat, boarding time, and boarding group number. Sometimes in the chaos of boarding, they accidentally mistook gate number for seat number.
Users accessed their boarding pass just prior to boarding the flight. Finding the right balance of redundancy would be key, considering most airline apps contained repeat day-of travel info across pages.
The visual hierarchy of competitor airlines demonstrated emphasis on the above data, though how they pulled in redundant data in context with the rest of their apps varied. Affordance for multi-passenger tickets was also prioritized by some airlines.
I established technical constraints, context for the boarding pass within the rest of the United app, visual hierarchy for data, as well as an understanding of constraints needed to translate to mobile web and printed kiosk boarding passes, as well as email and SMS notified boarding pass links.
I created divergent concepts to explore how my SMEs felt about:
After several rounds of testing on SMEs, I received a better understanding that the boarding pass is considered a utility above all. Imagery and iconography is superfluous, and less is definitely more when wrangling baggage, coats, and family members at the scanning checkpoints. The middle design proved to be the most intuitive and I moved forward with iterating on the banner design that emphasized the boarding group and seat number.
Accommodating space required for variations proved to be the greatest challenge. Within very limited space, I had to design for various combinations of:
However, I quickly realized that a delayed flight on a iPhone 4S would cause the design to scroll, thus risking the Aztec code to scroll off the screen and potentially creating a pile up of passengers anxious to board. With the brainstorming help of my fellow check-in designer, the concept of a bottom drawer provided the solution. After conducting an audit of the popular apps, we realized apps from Spotify to Google Maps to Mint utilize this function, leading to an interactive prototype. I helped our research team conduct a successful remote, moderated usability test on UserTesting.com with six users. Our testers were able to quickly locate everything from flight number to terminal number. No one confused gate with seat number or had trouble with the flight status drawer. I also helped conduct in-person testing with five United gate agents, spanning all age/vision demographics, and hailing from bustling hubs such as Denver and London Heathrow International Airport. The design was a roaring success with only minor suggested tweaks on text sizes for low-vision gate agents.
Collaborating with our co-located QA, iOS and Android developers, I'm very pleased to announce that I helped this design go live to a very positive reception. The update was released on the Apple App store and Google Play store just prior to a huge summit called for executives to fly in from all over the world, most of them boarding with this updated design. The redesign was also showcased during the summit as well, and broadcast on social media from official accounts—thankfully the release went smoothly.
Continued iterations include small UI changes to align with United's new design system (in the works during initial launch) and a few other minimal updates. I also created a11y focus order documentation, as well as corresponding redesigns of web (print) boarding pass, mWeb boarding pass, and eventually kiosk-printed boarding pass.
I learned a lot about the complexities of designing a flexible layout for a large audience that spans low-tech families to weekday warrior power users. I also gained valuable experience in negotiation and communication from working side by side with developers.
