United Airlines Flight Status

Deliverables: Heuristic Evaluation, Competitive Analysis, User Flows, Mobile Wireframes, Web Wireframes, Protoypes, Usability Testing
Tools: Adobe Illustrator, Proto.io, Axure

tl;dr

This design exploration was initiated to improve United's flight status products for visual design and usability. As the lead interaction designer, I gathered user pain points and research, designed user flows and wireframes, and created a prototype for usability testing.



Research

Heuristic & Competitive Analysis

Through a heuristic evaluation of our current flight status features I uncovered several issues including:

Through a competitive analysis, I studied digital products that show "status," including products by Delta, Southwest, and Kayak as well as financial apps like Fidelity.


User Feedback

Using OpinionLab, an internal tool that captures qualitative user feedback, I analyzed comments around flight status pain points. These served as the inspiration and drivers for changes to the product.

"For the list of flights between airports, it would be helpful if could display a brief status for each flight on the result list instead of having to click each flight to check individual flights' status."
MileagePlus General Member, Web
"If my flight's delayed I want to be able to know immediately and not have to search around for it."
MileagePlus General Member, Mobile App

Design

The output of all the research resulted in two key design principles:

User Flow

The typical user flow for the check flight status process has 6 high level steps:

Steps are search, select, view status, view details, update, and share.

Search & Select Wireframes

With the design principles in mind, I started wireframing and exploring solutions. My team found through feedback that users wanted to scan flight statuses for a particular route to gauge airport status. To meet this gap on mobile, we moved status to the right of flight information so that it was still associated with the flight, but easier to scan. We also removed "Inflight" status, since a aircraft could be "Delayed" and "Inflight" simultaneously, causing user confusion.





View Status & Detail Wireframes

On the Flight Status Details screen, we added a progress bar to give users a snapshot view of flight status. We also minimized the scheduled time, since we heard users gave significantly more importance to the actual time.

Additonally on web we moved the flight status to the top left and the refresh button to the top right to reflect user preferences.


Validation

Since external usability testing was not within budget for this product, I took the initiative to schedule and facilitate a series of internal usability tests. Beyond gathering feedback on my designs, I also learned how challenging it is to facilitate testing and actually draw valuable information from users.

I conducted 14 usability sessions with other UX designers, business analysts, and QA resources within e-commerce. Some of the feedback was:

The feedback from usability testing was incorporated into the web prototype and translated into the mobile designs.


Refine

Our current next steps are to skin the wireframes leveraging our style guide and add further detail to the annotations, including accessibility, editorial, and interaction notes.



To see additional projects from United please contact me directly. Thanks!

Back to top