United Airlines | 2018 - 2019
Redesign and replatform United’s web check-in, a segment of the website which served over 10 million customers of various traveler types in 2018, into a responsive experience while maintaining brand guidelines and negotiating with many stakeholder groups.
An undertaking of this scope requires a big team. In my capacity as lead designer, I’ve collaborated with two product managers, a UX researcher, three business analysts, and more than twenty developers to implement the designs over the past year and a half.
My role has enabled me to follow the redesign from inception to execution and, soon, to launch. Here’s a taste of what I’ve done:
Worked with product management to define scope for initial releases
Led meetings and workshops with stakeholders to align on vision
Collaborated with UX research and analytics to execute discovery work and usability testing
Defined workflow and timeline for design and development documentation
Architected conceptual designs and majority of UX on a high level
In 2017, United Airlines began a large-scale effort to redesign and replatform United.com from several codebases into a single-page, responsive application built in React. This project included, in 2017, the homepage and management pages for trips and MileagePlus accounts; in 2018, pages for checking flight status and making payments; and in 2019 and 2020, pages for seat maps, browsing flights, and, finally, check-in, one specific migration on which I served as lead product designer.
From a UX perspective, the vision of the check-in redesign (and the redesign of many other segments of the website) was vague. Even after the project broke ground, a 2018 brand refresh meant new colors, new voice, new messaging, and new imagery; plus, United’s design system didn’t stabilize until late 2019. These conditions compounded an already difficult project: redesigning web check-in.
Check-in is a segment of United’s website which contains endless variations and attachment applications to accommodate the needs of many types of travelers. Not only did this create an interaction design challenge, but it was also important to mitigate the voices of several stakeholder groups.
To inform our design strategy, we needed to learn more from both customers and stakeholders. Thus, the discovery phase of the project was two-fold.
We already knew that United’s aim for the check-in redesign was to increase revenue, but we wanted to understand the check-in experience from the customer’s point of view. Two research methods put us in their shoes.
Our baseline usability testing followed 10 customers as they checked in to their flights on United’s existing application. The findings helped identify basic user pain points we’d need to address in our MVP.
A diary study followed 46 participants through their entire journey, from booking their flight to arriving at their gate on the day of travel. Seeing the entire process helped us envision long-term goals for the check-in experience.
We learned a lot from our ethnographic research--too much to detail here!--but our biggest insight related directly to the framework for check-in: Customers do not currently see the check-in process as adding any value to their travel experience. Instead, they see it as a way for airlines to nickel and dime them.
We presented the findings from our ethnographic research to stakeholders, and those workshops generated many exciting ideas about how we could increase the value of the web check-in experience for customers. Here are a few of the big ideas.
Single-payment purchasing would bundle multiple transactions into one.
Contextual and personalized marketing would enhance the travel experience. Upsells would be integrated into the check-in process and advertisements wouldn’t look or feel like ads.
Adding more ways to initiate the check-in process, like entering the credit card number used to book a flight, could potentially increase the number of customers using web check-in. Prior to the redesign, to check in online, customers needed a confirmation, eTicket, and/or MileagePlus number--numbers which have a habit of getting lost. There was a high drop-off rate on the check-in start page. But growing web check-in was important to United’s stakeholders; our studies had found that customers who used web check-in spent more money than customers who checked in at the airport.
We were overwhelmed with possibilities. It was clear we needed to prioritize. So, we tabled the ideas that required further testing and set our focus on the MVP.
Our goal for the MVP was simple: increased usability with a new, contemporary look and feel. We needed a strong base with which we could later build in and test new ways of adding value for customers and the business. Thus, our MVP would be based on the following.
This is an example taken from the bidding application when a flight is oversold. It gives customers the option to potentially change their flight for a travel voucher. The new design displays the flight schedules in a standard pattern and pulls the bidding options out from drawers for faster selection.
Here's an example of how functionality became redundant and experiences became saturated with information over time. The ability to add contact information appears on both the Contact Information page and the Review Trip Details page.
The new design redefines the Contact Information page as a Traveler Details page, pulling all traveler information from the Review Trip Details page. This gives clarity to each step.
One of our big learnings from baseline testing centered on a lack of transparency around the flow's length, which we mitigated with a progress indicator. This sets expectations up front and follows industry standards for progressive flows.
While we maintained much of the application's existing functionality, we found ways to reduce its weight by using new patterns. This is an example of a reservation with multiple travelers. Instead of sending customers to an entire page dedicated to selecting travelers to check in, we reduced the step's footprint by putting it in a modal.
Another example of this strategy is evident in the choice for the header and footer. Not only does using a slim header and sticky footer reduce the amount of information on the page, it also encourages completion of the flow by removing the majority of links that could cause drop-offs.
Our design system wasn't fully formed until after we began generating UI, but we incorporated new common patterns as they were completed.
We also swapped out much of the outdated imagery with new illustrations.
We transitioned the application from mobile adaptive to responsive.
With mobile web check-in share growing, it was particularly important to optimize this viewport. This meant reducing the amount of information on the page and minimizing the need for a user to scroll.
The old application didn't have any success messaging. Considering all of the interactions and modifications a user can make during the check-in process, it was a no brainer to include them moving forward.
In addition, we worked with the Editorial team to rethink the tone and voice of all copy in order to align with friendlier brand standards and give clearer directions. Here's an example from the international documentation verification flow.
"Proof of all travel documentation entered will be required for international travel. Please ensure your travel documentation is accessible, as it will be inspected prior to boarding."
"Make sure you have the selected travel document with you and on hand at the airport. It will be inspected before you board your flight."
Here's how it all came together in a basic flow.
58.8 million people check in with United every year, 18% of whom use United.com on their desktop, tablet, or mobile devices to do so. The MVP redesign and replatform of web check-in, which launched in May 2020, has moved several needles in a positive direction:
Completion rate increased from 92% to 95%
Seat and cabin upgrades increased by 2.3%
Transaction time decreased by 19 seconds
The MVP results indicate a successful first release. Subsequent releases are planned over the course of 2020 and 2021.
