Usability evaluation and redesign
• UX research: desk-research, interviews, customer journey mapping, user testing, card-sorting
• UI design: lo-fi prototype, hi-fi UI design in Sketch and Invision
Finding the best tickets and hotels
China is still on my list of places I want to visit. Especially the Great Wall, one of our world wonders, is something I would love to see. But preparing for such a trip can take time, especially if you are traveling with friends and all have busy schedules! I wanted to try different applications for comparing tickets and hotels to see which one would help me the best… and then improve it!
In this project I will compare three apps and see which one scores best on Nielsen’s Principles. I will then conduct user tests on this app and use the insights to create a redesign.
Benchmarking and user testing
Who are we designing for?
I am designing for a ‘young group’ between the ages of 20 to 30 years old. These friends have decided to invest and spend some quality time together. They are planning a trip a year in advance to really make it happen and accommodate for everyone’s schedules. The destination; Peking. Mixing culture and leisure they want to share as much time together as possible. The highlight of their trip will be visiting the Great Wall. They have all saved for the last year so, while they are still price-conscious, this is the opportunity to spoil themselves.
Based on this persona, and Nielsen’s Principles, I conducted usability heuristic evaluations on Hopper, Skyscanner and Kayak.
→ Hopper: Something Hopper does really well is giving the user the ‘flexibility and efficiency’ of creating accelerators. It does this by enabling the user to set a ‘hotel- or flight watch’. Without any effort the user is notified, so there is no need to manually check for price changes. Where I feel Hopper could improve is parts of its design. In some screens nothing really stands out, forcing the user to spend more time scanning the page and looking for important information. Also, while some loading screens indicate what is happening, others do not.
→ Skyscanner: This app ended at the bottom of my list. The onboarding felt strange, because of the order they chose to structure it in. The system status is also poorly displayed, which may cause users to chose what they think is the best deal while the app is still loading alternatives. Finally, it seems like they tried to put everything in the same page which makes it full and reduces the visibility of some elements.
→ Kayak: Overall Kayak scored best on all of Nielson’s Principles. Additionally, the design was modern and minimalist, matching with the persona’s preferences (as did Hopper’s). This made it my target for more extensive testing and redesigning. The better the app, the bigger the challenge!
After having tried Kayak myself I already had some ideas on where I wanted to improve, but to get a better understanding of my users and see where they were struggling I conducted user tests. I recruited five participants between the ages of 20 to 30, that matched the persona, and asked them to conduct three tasks.
→ Task 1: First I showed them the landing screen off Kayak for five seconds. Then I asked them what the application was about, what they thought they could do with it, and any other things they might have noticed.
→ Task 2: Next they had to use the app to book a flight. I asked them to find the best deal for four people. They would want a direct flight and take hold luggage. Also, one person in the group could not make any flights before 14:00pm.
→ Task 3: In the final task I asked the users to choose a hotel. Specifically, they were looking for something with at least three stars, below €100,- a night a person, and including breakfast. Since they travelled with four people, they would want two rooms.
The users were asked to look for a flight and hotel between the 4th and 25th of September 2020. Their destination was Peking’s PEK airport, which is closest to China’s Great Wall.
- Overall the participants could find their way around the app. They all completed the tasks of choosing a flight and hotel. However, there were some small pain points of which I will highlight the two that were most common among the users. There was also a larger problem which I will get to later. Images of the screens discussed have been added in the redesign section below.
- The search button on the main menu: The main menu shows the options for selecting your trip, the date and the number of travelers. Beneath that is a large orange button and even further down are additional options such as ‘search for cheapest dates’. The problem here is that the first two parts belong together, but are visually too distant from each other. This confused 3/5 users. One pressed the button when he intended to change the search queries, another skipped it completely and pressed an option below which was unrelated.
- Surcharges and filtering: After having searched 4/5 users struggled to filter the results. The main reason was that they had not seen the option to filter at the bottom of the page. Furthermore, 5/5 users did not know what to expect under ‘surcharges’.
*As an interesting note: Not a single user touched the bottom menu once!
Fixing the larger problem
The larger problem
My goal was to find out whether the app helped the participants find a flight and hotel. User testing proved that in the most part Kayak succeeded in this. But after being provided with a list of options the app did not help users make the best choice. There was too little information.
Users had a hard time comparing and, finally, choosing an option. Missing the right information users took longer to choose and were less sure of their decision. This means that the app, aimed at helping people choose, completely misses the point!
- Choosing a booking site: After selecting a specific flight the user is presented a long list of websites that sell tickets. These are ordered by price. 5/5 users were unfamiliar with the different companies and simply took the cheapest one at the top.
- Choosing a hotel: Choosing ‘the best deal’ among a list of hotels is a very subjective task. To make a decision 5/5 users looked at a combination of pictures and the general rating. As one user found out, the hotel he had chosen had a general rating above 8, but scored below a 4 on the quality of the room.
- The search button on the main menu: In the old design (left) the large button let to some confusion among users. In the new design I have given a small tag to the button ‘search for flights’ and made sure it was closer to the search query.
- Surcharges and filtering: User testing showed two problems with the options at the bottom of the screen. Firstly, it was not very noticeable. To counter this I changed the color to orange which has a higher impact. Secondly, none of the users knew what to expect when pressing ‘toeslagen’ (surcharges). The main feature found underneath the button was the option to add luggage and recalculate costs. To make this clear I replaced the calculator symbol with a suitcase to make it easier for users to visually recognize what can be found by pressing the button.
- Choosing a booking site: Users found it difficult to choose between the different ticket providers. Especially since they did not know any of them. When asked what would have made their choice easier, 4/5 replied they wanted to know how reliable the companies were. In the new design (right) I have added social validation by adding a rating system.
- Choosing a hotel: This last part of the redesign was the most complex. Users could not confidently choose the ‘best deal’ and 5/5 ended up simply picking one. Based on the user feedback I redesigned the layout of the hotel screen. Firstly I moved the ‘beoordelingen’ (reviews) to the main screen, because these were an important part of the hotel’s image. Secondly I removed the ‘deals’ page, because this added nothing extra to what was already on the main screen. With two tabs empty I moved the map and similar hotels to their own taps, because these were of secondary and tertiary importance to the users. All of this resulted in the most important information being on the main tab, the reduction of double content and shorting the screens.
Try the application yourself, click here
I enjoyed comparing apps using a usability evaluation based on Nielson’s Principles. While there are many usability heuristics I could have used, I believe Nielson’s are still a good place to start. And even though Kayak came out as ‘the best’ between the three, my participants still helped me find flaws in the design. This goes to show nothing is ever done or perfect.
Kayak revealed a few pain points of which I addressed the two most important ones. The bigger problem, however, was that the app did not help users make a choice once they had found a number of flights or hotels. Using the feedback i was able to add a piece of social validation, and reorganize existing content, to give users a clearer picture. These improvements could help Kayak become the go-to app for comparing and booking flights and hotels!