San Jose State University
While completing my Master's in Human Factors and Ergonomics, we are assigned projects to apply what we've learned in our classes. Take a look at my project below.
Project: Redesign United.com
For my Human Computer Interaction class, our task was to redesign the United.com website. A group of me and two other teammates, Nishtha Mehrotra and Wendy Wu, evaluated the current design issues of the site, ran user studies, reported findings, created wireframes and prototypes to determine the best design options for the site.
Phase 1: Evaluation
My group and I chose to evaluate United.com's website. 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 create a better use experience for their site. We created 2 personas: Mike and Jen.
My main contribution to phase 1 of this project was conducting the interface evaluation. United’s website is incredibly feature rich. The five main features highlighted on the homepage include:
- Book travel (Flight, Hotel, Car, Cruise Vacation)
- Sign into MileagePlus
- Check flight status
- Check-in
- 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.
Task 1: Mike wants to book a domestic flight for his family of four to Los Angeles. Mike begins to fill in his search criteria. It is unclear if he's selecting the departure or returning date. He can't tell where the drop down is opening from, and the date indicators for both dates on the calendar look the same (Figure 1). When Mike clicks on the drop-down menu to add more travelers, he is overwhelmed with the options. It takes him longer to scan and make a correct selection (Figure 2).
Mike clicks search and notices an alert at the top. He does not know what went wrong - wrong airport? No flights for those dates? (Figure 3). He clicks the back button and changes the departure location from San Jose to San Francisco to see if that will solve the problem. Luckily it solves the problem.
Mike uses the dropdown menu on the left side to filter search results(Figure 4). However, Mike doesn’t know what each option means because nothing is labeled. Mike clicks around and notices Economy Lowest is selected by default. He accidentally finds that he can sort prices by clicking the blue labels (Figure 5). However, only the fares under that column change. The category is still labeled with the word “lowest” even after he sorts price from highest to lowest. He clicks the question mark at the corner to see what each label means, but he is more confused after reading the description (Figure 5).
Mike also finds that the chart at the top which lists the prices of fares across dates states that today’s cheapest fare is $86, but in the search result, the cheapest flights is $148 (Figure 1.6). Mike is second guessing his choice of booking on united.com.
After filtering through a huge amount of information, Mike selects desired flights and is ready to purchase. After filling in all passenger information for his family of four, an error occurs. The error message neither explains what went wrong nor does it give detail on how to recover (Figure 7). Mike cannot save the flight nor his family’s passenger information. He is forced to abandon the progress and start over later.
Task 2: Jen is a Marketing Director booking her business trip using miles. She quickly scans the homepage, fills in search criteria and selects “search for award travel”(Figure 8, label 1). Her dates are flexible but she can’t find the flexible dates option. She eventually finds it wedged between the departure location and departure dates (Figure 8, label 2). After selecting it, the system changes Jen’s travel dates to “October 2015 and 6 days,” but Jen doesn’t understand what “6 days” means (Figure 8, label 3). Is it the trip duration or flexibility of day? She clicks search hoping that the answer will reveal itself.
Figure 8. Booking Award Travel
Jen sees two messages (Figure 9) at the top of the page with icons that look like alerts. She thinks that something went wrong with her search criteria. After reading them, she finds out they are instructions. However, neither of them successfully explain how the award calendar works (Figure 10).
Looking further down the page, Jen notices that her 6 day selection has now been switched to November 1st - November 7th. Jen now understands that the 6 days she selected on the previous screen were for the duration of her trip. Jen uses the legend, on the side of the calendar, to select a date that she’d like to travel (Figure 10).
Green marks the dates available with saver award travel for economy, which is also indicated with yellow, and premium cabins, which is indicated by blue as well. Jen is very confused by the legend. It seems that green dates include both yellow and blue dates, since there are no blue dates, she decides to try click on 17th of November, which is highlighted green.
Jen has to comb through large amount of information, click around on the calendar and try to find the best deal. She finally decides to choose a flight that uses 90k first class saver miles because it is the best deal. Jen likes the fact that she can see what are the stops via this tooltip (Figure 11). Although she travels a lot, Jen does not know all the acronyms listed here.
Jen clicks open the flight detail information for her departing flight. She learns that only the SFO to Shanghai flight has wifi (Figure 12). She worries that something is wrong with the flight because there are so many alerts icons. Then she realizes that what she thought were alert messages, are actually information messages about the flight (Figure 12).
Unsatisfied and frustrated, Jen still decides to book. After she signs in with her MileagePlus information, she is taken to the summary page. Once again, she sees the alert icon at the top (Figure 13). At first, Jen thinks that’s only a message. She notices the icon is red so she reads the message. It is in fact an alert telling her that she does not have enough miles to book this flight. Unable to find a solution, Jen is not sure what to do next. Oddly, she still sees a reserve button even with insufficient miles. Unsure and even more frustrated, Jen closes the window and decides to book somewhere else.
Figure 1. Selecting travel dates
Figure 2. Selecting travelers
Figure 3. Alerts
Figure 4. Sorting
Figure 5. Filtering
Figure 6. Error
Figure 7. Search Results
Figure 9. Messages
Figure 10. Award availablity calendar
Figure 12. Flight details
Figure 11. Tool Tip
Figure 13. Trip Summary
Phase 1.5: Research
After evaluating the United some of the main issues we chose to focus 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.
Card Sorting
4 Participants were asked to complete tasks with a pack of cards. Participants were between the ages of 23-56.
Method: 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 include: 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.
Results:
- useless pile: outlets, direct TV
- most important information: departure time, arrival time, number of stops, carrier, departure location, departure date, price
Paper Prototyping
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
Method:
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 two were female. The functions that were tested include:
1. Search function
2. Filtering options
3. Flight results and selection
Results:
Majority of participants preferred designs 1 and 2 because they were more familiar to them of what they had seen before on other travel websites. For design 1, they 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 to be on the top of the page.For the interactive prototype, all 4 participants completed the tasks successfully. Participant 2 mentioned that this 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 createa 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
refundable options.
• 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.