Usability test and Redesigning Challenge — Kayak Application
Overview of the scenario
This challenge is part of the required prework for the UX/UI bootcamp that I will attend at Ironhack, Paris.
In this exercise, I will perform a usability testing of a metasearch, according to a preselected user type. I will then redesign one of the main pain points I found during the test sessions and propose a solution in low-fi and mid-fi wireframes using Figma.
Who is my audience ?
My selected user type is a group of 4 friends, planning a big trip, one year in advance. Their chosen destination is Argentina. They heard a lot about this country and particularly the Iguazu Falls that are one of the seven wonders of the world.
They are all between 25 and 30 years old, are looking for adventure, discovering a new culture and total escape, but also having a lot of fun during this 15-day trip.
For this trip, they plan to land in Buenos Aires Airport, and then explore the country from South to North. They want to visit Ushuaia, the city of the end of the world, discover the glaciers of El Calafate in Patagonia, wander in the canyons of the Quebrada de Humahuaca and finally take a bath next to the Iguazu Falls.
Because they are planning this trip in advance, they saved enough to spoil themselves and really enjoy their holiday. However, they want to get the cheapest flight in order to keep money for the attractions on-site.
Comparing Metasearch mobile apps
Kayak, Skyscanner and Hopper
Because they plan to go around and explore Argentina, one of the main features they enjoy is the multi-city search for flights. Kayak and Skycanner are two apps within which you can search for multi-city flights. Hopper does not offer this feature, therefore, I chose to eliminate it from my study.
Secondly, I decided to perform a short heuristic evaluation of these two apps, in order to choose the one that performs better for my users. Because this process is new to me, I chose some of the well-known 10 Nielsen Heuristics that were, to me, the most important when you’re searching for flights.
Visibility of the system status
Kayak 🆗
Skyscanner 🆗
Both apps have a progress bar design to show that the app is searching for the cheapest flights. The value proposition is clear.
User control and Freedom
Kayak 🆗
Skyscanner 🆗
If the user refines too much its search, no flights are available. The apps clearly shows the user that there is a problem and that he can fix it quickly by clicking on the “clear filters” button.
Recognition rather than recall
Kayak 🆗
Skyscanner 🆗
If the user leaves the app and then returns to it, he will find his recent searches directly on the first screen.
Going further …
Considering that my users are people in the mid 20s, they are likely to use Messenger (or any other messaging app such as Whatsapp) to keep up with their friends. When planning the trip, they will therefore use this kind of application to share their research with the other travelers.
When testing the share feature within these two apps, I observed one pain point. In Skyscanner, if the user opens the link from a desktop browser, he won’t be redirected on the actual search but on a generic landing page.
After this short evaluation, I decided to go through usability testing with the Kayak App.
Building the scenarios and testing
A little bit of storytelling
The user is currently scrolling through his instagram feed, and sees a Kayak sponsored add. It’s fortunate because he’s currently planning his next trip to Argentina with his friends (besides, it’s probably why he sees this sponsored add). He decides to swipe up and download the application.
Tasks
The first thing he does is to search for a flight for the 13th of April 2021, just to have an idea of the price for a one-way flight to Buenos Aires. When doing some research about Argentina, he found that the best season to go there was in Autumn.
Then he remembers that he has a 700€ restriction and that, because he lives in the suburbs and he will probably have to take public transportation to go to the airport, he doesn’t want a flight that takes off before 8a.m.
Then he’s going to save the best option considering these constraints and share it to his friends using Messenger App.
Time to test !
In order to detect the main pain points in this user flow, I came up with a grid of observation, with the expected behavior for each task.
Analyzing the results
While watching the screen recordings of my testing sessions and summarizing my notes, I found three main recurring problems within the workflow I tested :
- Problem with the “one-way” option while choosing the dates of the flight
- Problem with the filtering feature
- Problem with the “saved trips” tab
According to my user type and the fact that they have several restrictions (budget, time, preferred flying company …) I decided that the main issue I wanted to solve was the filtering feature. After pondering my results, I found that all three testers didn’t use the filtering feature, neither when they had a price restriction, nor a time restriction. They chose instead to scroll down through the different flight offers and search for the asked flight. When I asked them, in a post-session interview, why they didn’t use the feature, all told me that they didn’t even notice it.
Filtering is a major human-centered design element as it means a more personalized experience. By giving the opportunity to quickly refine results page so that only what best suits their needs remains, filtering can really improve the overall user experience.
In this study, the problem is more about UI than UX as the feature exists, but the users don’t notice it. Therefore, they miss the opportunity to get “only what matters to them” quickly and, even if it’s in a passive way, deteriorate the user experience.
Redesigning …
My first idea when thinking about how I could redesign the filter feature of Kayak App was to think about the other filtering features I like to use. I then opened the two last applications that I used on this day : Airbnb and Zalando.
Guess what ? On both apps, the filter feature was displayed on the top right or top left corner of the screen, right in front of my eyes. Instead, in the Kayak App, the filter button is displayed at the bottom of the screen, and is even hiding some information about the last flight offer.
Here is what it looks like :
After some research about the best practices with filtering, there are two key things I learned :
- Make sure users can find the filters
- Clearly display the selections made by the user
Here I go, I will design a filter button that is clearly recognizable, displayed on the top of the screen and ensure that the filters, when used, are unambiguously visible on the results page. Moreover, this button will be sticky, so that the users can click on it while scrolling down the offers.
Low-Fi and Mid-Fi Wireframes
Now, let’s have a look on the mid-fi wireframes in Figma.
Some learnings
As a newbie in the UX/UI design world, I can say that almost every step of the process was, itself, a first time ( Be tolerant 🙂 ) and for this reason, I probably need some more time to step back and really get insights about what I learned.
However, there is one thing that I will particularly remember : user testing is perhaps THE most powerful tool, we, designers, have in our hands.
No matter how crazy creative and super technical with design tools we are, if we are not carefully observing the actual users of the products we’re designing, it will be for nothing.
I also keep in mind that drawing conclusions from a 3-people sample is not really the way it works and that the tasks I designed for the test might have biased the results.
That being said, when I used the Kayak application to perform the heuristic evaluation, I did notice the filtering feature and used it right away. I would never have thought that this might be a problem for some users. And if it was for those 3 users, it might also be the case for hundreds of others.
Thanks for reading !
