Ironhack’s Prework-Challenge #3 Usability Evaluation and Site Redesign
Skyscanner Case Study
Objectives ✔
My goals for this UX/UI Case Study were:
- Evaluating the usability of one travel app and its competitors
- Interview users to find areas of friction for users
- Brainstorm solutions for the main problems I could find
- Define the main problems I want to solve
- Improve the existing functionalities of the app with solutions identified during the user research
- Design a mid-fidelity prototype to solve major pain points
For this exercise, we have established a mantra to follow: “I’m not the user of the product. I’m creating and evaluating” in order to focus especially on the needs of the users I am interviewing.
“People ignore design that ignores people.”
Frank Chimero, Designer
The process of looking for travels should be an exciting adventure. My main aim is to detect what elements are setting aside the users from this feeling.
My User Persona
For this exercise, several User Persona options were provided to be chosen. For my exercise I chose:
Young group — 20–40 y/o (4)
“You and your friends have decided to invest and spend some quality time together. You are planning your trip one year in advance to really make it happen and accommodate everybody’s schedules and needs. You’d like to share as much time together and plan for a lot of fun. You’re interested in a mix of culture and leisure. You have all saved for the last year for the trip so, while you’re still price-conscious this is the opportunity to spoil yourselves.”
Characteristics to take into account of this User Persona:
- Large margin to decide dates
- Agreement between the four members of the group
- Medium budget but price-conscious
- Seeking a mix of culture and pleasure
- Enjoyment of travel and company as the main objective
- No need for exhaustive planning of travel activities
Thoughts about my User Persona
This User Persona needs an app that allows them to perform numerous searches in an efficient way to compare prices for flights and hotels. Finding the best value for money is essential to have the best possible experience.
Complementary information about COVID restrictions is mandatory to ensure that the trip can take place. Complementary information may be useful but is not necessary.
Benchmarking and Usability Heuristics evaluation
To have an overview of the market and the products currently offered, I have made a Usability Heuristics evaluation with Jakob Nielsen’s Principles to the following applications: KAYAK, Skyscanner and Tripadvisor. The criteria for choosing the product for this Study Case were its usability, its position in the market (which application is the most used by my User Persona?), its tone and breadth of catalogue. Green, yellow and red mean that they successfully meet the minimum usability requirements, moderately meet the minimum usability requirements or do not meet the minimum usability requirements, respectively. The results of this evaluation were:
Although Tripadvisor has a larger catalogue of services than its competitors, the number of options and the cognitive load per page makes it easily discarded for a user who starts looking for flights and does not need very detailed planning. Skyscanner, on the other hand, stands out for its simplicity and efficiency. This is why I have considered it for my Case Study.
Regarding usability problems detected in Skyscanner I have found:
There are steps of the navigation that could be optimised
Some cards look like links to other pages but are just informative text
Some screens have different styles
There is no easy way to find the contact section
These usability evaluations allowed me to “anticipate” the problems that the user would encounter during the interviews. This way, I’ll be able to confirm the friction points that I have detected and to find new ones that I have not previously considered.
Interviews and tests
Five Seconds testing
As a first part of the user test, I carried out a Five Second testing. This test is based on showing the participant the application for five seconds. After this, the participant answers questions based on their memory and impressions.
To better understand the user’s impressions and what they remember, we have drawn the elements of the homepage together. The results were:
Interviews
As the second part of the test, I asked the four interviewed users to open the application and perform a series of specific tasks. The interviews were video-recorded and were later used to collect relevant information and compare results. Pooling all the results makes it possible to identify isolated behaviours and problems common to most users.
The tasks to be carried out were very specific and were designed for the user to explore all the app’s functionalities:
- You and your friends are planning to take a trip this summer to a city in Europe for a mix of cultural and leisure travel.
- The important thing is to spend time together, so you don’t want to have too many complications with passports or currency exchanges. It is not necessary to seek information about vaccinations, but you should get as much information as possible about COVID restrictions.
- You’ve thought about travelling to Berlin but you’re curious to see what other destinations are cheap to travel to this summer. You do a little research without a defined destination.
- You finally decide that Berlin is a good idea and you are in charge of looking for flights for four days in August. No assistance for people with reduced mobility is necessary. You look for a good offer and save it. You share it with your friends so they can give you a check.
- It turns out that one of the members can’t travel this week. You have to find another one and share it
- Now that you have understood the application, you offer to look for a hotel or a flat also for these days. You are aware of the prices but you are looking for something that will give you a great experience together. One of the requirements is that it is close to the centre so that you are not dependent on a car. Share it and save it for later.
The pooled results of these interviews can be viewed here.
Insight
After summarising and comparing all the friction points of the users interviewed, I have found some features that could be improved.
Homepage and flights search
✔️✔️❌❌ 50% of users did not understand in the 5 Seconds test where they had to search for flights.
✔️✔️❌❌ 50% of the users got the wrong type of search engine (some were looking for the basic search engine and others for the one that assists by price).
There were also problems with one user interviewed who made a mistake between two cities with the same name and could not find available flights (between Barcelona in Spain and Venezuela). A brief or subtle identification between airports or countries next to the name of the desired city is necessary.
Location of the Filter button
The location of the Filter button in the Flights and Hotels sections are in different places. Both are hidden when the user scrolls down but they are hidden differently:
In the Flights section, the top toolbar with all search inputs except the Filter link disappears, but the selected information appears smaller.
In the Hotels section, the top toolbar remains intact when the user scrolls down but the bottom buttons for Map, Sort & Filters and History disappear until the movement stops.
✔️✔️✔️❌ 75% of the users had problems finding the map button.
This has led to usability problems because it has a different location and language. Some users have had problems finding the hotel filter and most did not see the map view button.
Date selector for flights
When the user wants to compare dates and prices, they have to select and wait for the page to load and then exit again. They usually make notes in a separate notebook or take screenshots to compare later. This process requires constant iteration by the user and can be optimised with a price preview, just like the website.
❌❌❌❌ 100% of users have problems with the day selector.
One usability problem I have detected is that the user tries to drag the date picker without success, as it works by clicking to overwrite the last input.
The back buttons are too small
✔️✔️❌❌ 50% of users complained about misclicking the back button because its clickable area is too small.
Buttons during the loading process
In the hotel section, the floating buttons are not operational until the page has been fully loaded or all search results have been obtained. This can give the user the feeling that the application is not working. Currently, the existing solution is to slightly reduce the opacity of the buttons to indicate that they cannot yet be used, but users interviewed have found this solution too subtle. A possible solution to this problem would be to temporarily change the button icon to a loading animation to indicate to the user that they have to wait for the search process to finish.
Redesign Wireframes
Once I had analysed all the information and defined the main problems to be solved, I proceeded to make sketches by hand to later create a mid-fidelity prototype.
You can test the prototype here
The main adjustments per page were:
Homepage and Search page
The 5 Seconds test showed that there was a clear need for an accessible search bar for flights. Therefore, it is integrated into the navbar to search for flights from the user’s current location. Besides, a Recently Searched option is added to the search page.
Flight search and filter
The flight and hotel search tools were very different from each other since the user information was not entered in the same way and the filters were presented in different formats.
To unify this, I integrated the number of passengers into the search form. In the case of the entry of travel dates, the round trip has been integrated into the same field, because in the selection window both dates are already chosen.
For the advanced search tools Sort, Filter and Map Display are now presented as floating buttons in both cases, at the top of the results window, just below the search form. This will give more visibility and show the same solution for both types of page.
Date selector
For the day selector, I have integrated a slider system that allows the user to select the outgoing and return date with a click, and to modify it by dragging the ends of the interval. This functionality is compatible with the daily price colour previewer.
Extra: Prices by colour and colour blindness
During the development of this Case Study, I have found improvements that could be developed in future steps after the wireframing process.
The tool to display the price of calendar days by colour was a feature that some users missed during the interviews. A red-yellow-green tri-colour feature is a tool that allows the user to filter the days by saving navigation steps and is compatible with the slider system for selecting day intervals.
For users with colour blindness, different ways of representing the low-high price ranges can be considered by distinguishing the shapes under the calendar numbers. Abuse of the use of different shapes could give the page a cognitive load too high, so the solution has to be eye-catching but not cause a big alteration of the global set of the calendar.
The Take Away
This exercise has been a very complete challenge in which I have learned many things:
Pre-interview preparation is fundamental
“I am not my user” and I would never reach all these valuable conclusions without conducting the target user interviews.
Recording the phone screen during the interview is essential for future revisions.
It is important to understand the user’s aspirations and expectations to provide the best possible user experience.
The development and the wireframing process require constant iteration. The use of organised systems and components has saved me a lot of time.
Communication in the case studies is very important and is something I will have to improve in the near future.
Thank you for reading this Case Study and for joining me on this journey. :)
