Usability Evaluation and Site Redesign
Ironhack UX/UI Bootcamp
Nowadays, the power to book a flight, hotel, and activities is literally at the tips of our fingers. It’s becoming more common that people use their phones and mobile apps available to book their dream journeys. This post is part of Ironhack’s UX/UI Bootcamp prework (challenge 3).
1. User type
For this case study, I’ve selected a user type defined as “Young group — 20 to 40 y/o” (4 participants). This group wants to have a blast and spend quality time together with a mix of leisure and culture. Everybody has saved for the trip so it’s time to spoil themselves while still being price-conscious.
Next winter, they want to escape the cold and grey weather of Berlin and just have fun in a tropical paradise. Their chosen destination is Cancun, where they can party, relax and immerse in the Mayan Civilization (Chichen Itza). All they need is their flight, accommodation and a car to get around!
2. Benchmarking
With the user and their needs (flight, hotel, car rental) in mind, I’ve compared the offers given between 4 different mobile apps: Tripadvisor, Skyscanner, Hopper, and Kayak. Since it’s not possible to book accommodation with Hopper or rent a car with both Hopper and TripAdvisor, I’ve ruled them out from the get-go.
In my opinion, both Skyscanner and Kayak performed well in the heuristic evaluation. The apps are very similar giving you clear visibility of the system status (progress bar for loading results), follow platform conventions in terms of wording (consistency and standards), offer good user control and freedom (go back arrow, new search icon), present an aesthetic design (lots of white space and good hierarchy), etc.
That said, my final decision was to go ahead with Kayak.
3. User tasks
Apart from the five seconds home screen test, I’ve asked the interviewees to complete the following tasks:
- Book a round-trip of one week for any time during the next winter;
- Book a hotel — 2 rooms, 4 stars, and all-inclusive;
- Book a car rental — SUV with the same pick-up and drop off.
4. Test results
During the testing, apart from observing their actions, I’ve encouraged the users to think out loud and tell me what they were doing. I’ve avoided influencing them with leading questions or giving assistance.
4.1. Home screen look and feel:
The users get a five-second glimpse of the home screen of Kayak and, after that, the phone is locked. My questions were “What did you see?”, “What can you do with the app?”
- 4/4 — noticed that you can use the App to book flights and that you can select the starting point, destination, one-way trip, round trip, and multi-city;
- 1/4 — noticed all three sections that you can book (flight, hotel, car). The others mentioned only two out of three;
- 1/4 — noticed that further down you have the option to measure your bag and check the status of your flight.
All in all, the interviewees were able to capture the scope of the app after just five seconds of looking at the home screen. It’s also been mentioned by the users that there isn’t a lot of scrolling needed, the interface is clean and easy to understand and also that the search button is very large and catchy.
4.2. Task completion:
I’ve created a comparative chart with all the users (four columns) and the tasks (three rows). For each, I noted down what I observed and what they said aloud during the testing. This made it easy to compare and look for patterns or common pain points across the users for each task.
After the testing session, it was obvious that the app performs really well, at least when it comes to these three tasks. All users, even those that never used the app, managed to go through until the end and were pleased with the look and feel of it. It’s clearly intuitive and easy to understand.
5. Problem definition
Considering what was said in Point 4 of this post, I haven’t found any major problem to be addressed. Out of all the tasks, the ones that seemed to cause more friction were tasks 1 and 2. That might also be due to the fact that the app was new to some of the users and they were still getting acquainted.
In my opinion, a few small tweaks could improve the already great overall experience of the app and will focus on the “Select dates” section of flights. Some of my users didn’t understand the flexible date picker at the bottom and others ignored it thinking it was a confirmation of the selected dates. The users also failed to notice the green dots on the date picker which represent the cheaper deals meaning that this feature so subtle that it’s invisible.
That said, my goal is to make the date selection process more intuitive and also ensure that the user gets visual feedback on which dates would result in a cheaper deal.
6. Redesign
For the purpose of this exercise, I’ve taken screenshots of Kayak and built my proposed modifications on top of them in Sketch. I’m listing some of the modifications that I see as worthy to test in a second-round with users.
6.1. Select dates section
- Include color differentiation on date picker for flights (with legend);
- Include an option to have a chart view of the dates and prices.
- Change flexible dates section from departure/return to “Add flexible dates”;
- Unify the selection of flexible dates in one single pop-up window.
- When users click on “See cheapest dates” set the default to Soonest other than Cheapest. In Cheapest the dates/months are confusingly displayed.
6.2. Hotels section
- Test different color/size for the filter button in order to increase visibility;
6.3. Future developments
There were other small friction points noticed during the usability testing that I believe are worth mentioning for future reference.
- Memorize the number of participants from flights to hotels, etc.;
- Include Board basis in the hotel filters (all-inclusive, breakfast, etc.);
- Allow filtering for a specific number of Hotel Star rating. “4 stars” and not “4 stars and up”;
- Test the effect of removing the price next to the checkboxes inside the filter screen.
6.34. Prototype
I’ve created a small prototype in InVision to reproduce the proposed look & feel of the new flight search (date selection) process.
7. Key Learnings
- Conducting the heuristic evaluation of Kayak and Skyscanner was both interesting and difficult. Better analysis skills will come with practice;
- The app Kayak performs really well and the user tests proved it. I found hard to decide on what to tackle as none of the friction points seemed to be of high relevance. I also believe I need to get better at defining tasks;
- Looking back at my process, I would still include the color differentiation for the flight dates (green, yellow, red) but I don’t believe that the “add flexible dates” was a step towards a better experience. Testing would tell;
- I kept thinking that these changes, no matter how small, could have an impact on how users perceive Kayak’s app. That said, ideally, they should be made sequentially, trying to validate one at a time;
- During the interviews, you see that each user has their own way of thinking and navigating. There’s always room to improve but, at the same time, one can’t adapt the whole design to one user and that is why interviewing many helped me get a better sense of the patterns and the bigger picture.
