United site redesign
Interaction Designer & Researcher
For my HCI class at SJSU in 2017, my group was tasked with redesigning United.com. A group of two teammates and I evaluated the existing design, highlighted the pain points, created wireframes with suggested improvements and ran user studies with prototypes to determine the best design options for the site.
United is one of the largest airlines in the world. Their website allows people to book flights, hotels, cars, cruises, and more. With the amount of traffic that this website sees, it is crucial for them to improve their site. We created 2 personas: Mike and Jen.
United’s website is incredibly feature-rich. The five main features highlighted on the homepage include:
- Book travel (Flight, Hotel, Car, Cruise Vacation)
- Sign in to MileagePlus
- Check flight status
- Manage trips.
Since booking a flight is the most used and most important feature for an airline website, the booking process and its capabilities were deeply examined and analyzed.
After evaluating the United website, some of the main issues we focused on included:
Poor visual mapping between price filters and research results
Ambiguous classification of travel class
Complex information architecture
Cluttered design with poor typography and lack of visual hierarchy
For phase 2 of the project, I was in charge of usability testing. I conducted 2 studies: card sorting and paper prototyping.
4 Participants were asked to complete tasks with a pack of cards. Participants were between the ages of 23-56.
Participants were given a pack of cards and were asked:
What information is necessary for you to decide what flight to book?
Terms that were used included: Flight duration, departure time, arrival time, amenities, number of stops, carrier, departure location, departure date, price, miles, flight number, layover time, airports, wifi, outlets, meal options, and direct tv.
garbage pile: outlets, direct TV
most important information: departure time, arrival time, number of stops, carrier, departure location, departure date, price
Based on the findings of the card sorting, and previous evaluation of United.com, four alternatives were designed by my team and I using pen and paper. The interface was broken down into three main tasks:
1. Modify Search
2. View lowest prices for adjoining dates
3. View flight details, select a departing flight, receive feedback confirming actions
5 Participants were asked to complete tasks while looking at a paper prototype and the interactive prototype of a screen. The same questions were asked for each of the four paper prototypes. Participants were between the ages of 23-56. 3 participants were male and the other 2 were female. The functions that were tested include:
1. Search function
2. Filtering options
3. Flight results and selection
Majority of participants preferred designs 1 and 2. For design 1, participants liked the filtering options on the left. For design 2, they liked that each slide was given its own card. All participants stated that design 3 was chaotic and hard to understand. The most common comment about design 4 was that participants did not like the search field on the left-hand side. They preferred it on the top of the page. For the interactive prototype, all 4 participants completed the tasks successfully. Participant 2 mentioned that the design of United’s website was much more intuitive to use than the one she is used to. Participants were able to walk through the entire prototype in under 3 minutes.
Feedback received through paper prototype testing was synthesized to create a high-fidelity prototype using Adobe Illustrator and Invision.
The following are the main features of the design:
The modifiable search fields are prominently displayed on top.
Lowest prices for adjoining dates can be filtered by travel class and
Direct mapping of seat availability and travel class.
Confirming actions by providing adequate feedback throughout the process.
Clean and minimal design with a clear hierarchy.