Ironhack Challenge 3 • Usability Evaluation and Site Redesign — Planning a road trip to Iceland on Kayak
Iceland and young couples, the 2 main characters of the scenario
Who has never dreamt about admiring the northern lights under a starry sky? These incredible green, blue, pink shades of colours dancing at night can usually be admired from September to March in some very specific places like Iceland. This is the place where I choose to travel for the third Ironhack pre work challenge.
This time, our task is to evaluate the usability and to redesign a travel website by carefully following a methodology of 6 steps: user type definition, research, benchmarking, testing, insight and redesign wireframes.
Among several user types (step 1), I choose to evaluate the usability through the eyes of a young couple (20 to 40 years old). The scenario is the following one: “You and your partner decide to go to a special place next summer. You realize you have both saved enough for the tickets and are planning to save as much as possible for the next 6 months to do this trip. You want to be efficient and have everything you need organized to enjoy 100% while there. Even if you’re young, you want to have special moments to celebrate being together”.
Which travel website to choose?
After doing some research (step 2) about Iceland (airports, currency, days needed to visit…), I conducted a usability heuristics evaluation with Nielsen’s principles on 3 proposed travel websites in mobile versions: Kayak, Trip Advisor and Skyscanner.
The heuristics are a set of general principles in interaction design. Nielsen’s 10 principles help to check if the user experience is optimised.
Following this benchmarking (step 3), I’ve identified Kayak as the most suitable website for my “young couple” user type. Kayak is a well-known comparative website to make flight research and also provides other types of research such as stays, cars and activities.
Get to know the user type
Before thinking of making any changes on the website, the ultimate and next step is to better know the user type within the website’s environment. How do they interact with it? Here comes the testing part (step 4). To do so, I conducted a 20 min test and interview with 5 people in couples who were between 28 and 36 years old.
As an introduction to the testing, I made a short five-second test to analyse their first impressions and asked them very basic questions about the look and feel of Kayak’s main page (mobile version). Everyone identified it as a travel website to book flights or organise a trip. Even though they could not identify some key words such as “stays” or “cars”, the main idea of travelling was understood.
Then, through usability testing, I’ve been able to collect a lot of information from the interviewees by defining 3 specific tasks :
- For your next summer trip to Iceland, you have a budget of 450 € per person per flight (return included) from Paris to Reykjavik. As you have some constraints at work, you’ll book 10 days to visit the south of the island in August. Can you book tickets for both of you?
- Iceland is big. As you’ll travel 10 days, you’ll visit around 6 cities and will book 3 to 4 stays. Can you book a hotel for your first 2 nights in Reykjavik?
- The island is full of natural gems. Your partner has always dreamt of discovering the Icelandic volcanic craters. Could you find a one-day activity to make her or his dream come true?
The main problems the interviewees encountered
Now comes the insight (step 5), the roots from which we’ll be able to identify the problems and grow solutions.
Task 1 — Search for plane tickets
- 100 % can’t find any plane tickets with the right price at 1st search
- 60 % had a misunderstanding with the price and thought it was for 2 whereas it was for 1 person
- 60% don’t use the filters right away (or wait a lot) whereas the results don’t match the expectations
- 40% don’t click on the edit button and make the changes by going back to the main page and lose some options (such as the direct flight option)
- 80 % don’t use the “direct flight” filter whereas all of them want a direct flight
Task 2 — Book a first accommodation
- 100% can’t easily see where the filters are to refine the research, the results page is a mix of of apartments and hotels, it created confusion
- 100% checked the pictures by clicking on each hotel ad that opened a new page (lots of back and forth to return on main results)
- 60% checked the number of reviews by clicking on each hotel ad that opened a new page (lots of back and forth to return on main results)
Task 3 — Make her/his dream come true
- 100% didn’t know they could look for activities on Kayak and were surprised about it
- 60% complained about not being able to use keywords such as “volcano” or “crater”
- 40% were wondering how they could filter the activities on the first page research
Which problems to solve and how to solve them?
For these 3 tasks, all the interviewees very easily found where to start all the researches. The issues came as soon as they had to refine the research according to specific criteria.
One crucial pain point is that none of the interviewees has been able to book a plane ticket during the first research. Even though all the criteria were given before conducting the task. Kayak is one of the leaders in the comparative flight research market. Therefore it seemed obvious to me to focus on 3 solutions that would ease the flight research on the mobile website.
1 — Refining the criteria straight away by using filters & sort buttons properly
As already said, 60% of the interviewees didn’t use the filters right away (or waited a lot) whereas the flight results didn’t match their expectations. One of them didn’t even use them at all and booked a ticket with a higher price than initially expected.
First of all, there should be more consistency with the way users can play with the filters and sorting buttons. Indeed, the buttons are not displayed the same way in the flight and stays sections. This can mislead the users during their online experience.
In the flight section, there is a header section with one sorting button and many filters buttons where users can swipe and select criteria. Users actually don’t know right away which buttons are for filtering. In the stays sections, all the types of sorting are displayed to swipe from left to right. The filters button is at the bottom center. This can create confusion if the user has already used the flight section or the other way round. Placing buttons that have the same purpose up and down the screen can also create confusion (e.g. stays section).
Solution — In order to be consistent, I have made coherent the sort and filter buttons in both flight and stays sections. Since most of the criteria to change by the user are up on the screen, I have gathered up both buttons (sort and filters) in the same section. It creates more fluidity to gather everything with the same purpose in the same area (see picture below).
2 — Displaying the ticket price per person on the results page
2 out of 5 interviewees had real issues with the displayed price. It’s like playing a coin toss. If the user thought the price was for one person, it was right. If the user thought the displayed price was for 2 people, it was wrong.
In fact, there was no way to know at a first glance if the price was for one or 2 people.
For the ones that flipped the coin properly, the task went (kind of) smoothly regarding the ticket price. However there were 2 unlucky ones. One just thought wrong, he doubled its bet price and bought a very expensive ticket! The other person who was not sure, wanted to double check and had to move forward in the steps until the partnered website (e.g. bookings.com), where new suggestions were displayed. She had to remake her choices amongst them and validate again the tickets to finally have a global recap detailing the prices. On top of that, she had a very slow internet connection, which created frustration and impatience in the research process. In reality, she skipped a few steps where she could have found out the right price information but she would have had to scroll the screen to the bottom or click on a very small information icon. It almost seemed that info was hidden on purpose.
Solution — A very simple thing to do is to display the information at the beginning of the process so that the user does not have to flip a coin and take the risk to go through a thousand steps before finding out the right information. Therefore I simply added the words “per person” under the displayed price (see picture below). At a first glance, the user knows. “Recognition rather than recall” as Nielsen would say.
3 — Make the “edit button” a systematic research buddy
40% didn’t click on the edit button (a pen icon) and made their dates changes by going back to the previous page. It resulted in the fact that they lost some options (e.g. the direct flight option) and fluidity in the user flow. The website had to recreate a page results with all types of flights and generated flight options that the user didn’t expect. “I don’t understand why there are flights with stopovers, didn’t I check the box before?” asked one of the users.
Solution — another small change I’ve made is making the edit button more catchable by the user’s eyes. The pen icon is very small and does not easily call to action. I’ve enlarged the icon, framed it and added the word “edit” to make it very understandable.
A second crucial pain point occurred to me in the stays research. None of the interviewees couldn’t find some essential information that would have made the difference in their decision making process. It highlighted the 3 following issues and solutions.
1 — A consistent layout for an easy-to-read screen
None of the users used the filters button straight away to refine their research. One of the user complained a lot with the fact that hotels and apartments were mixed and just could’t find the filters button (that was at the bottom). Indeed, the filters were not easy to find due to a lack of coherence.
Solution — same as above in the “1 — Refining the criteria straight away by using filters & sort buttons properly” paragraph.
2 — More essential information at a first glance to optimise the decision making process
Many of the users had to go back and forth many times between the main results page and each hotel’s ads to see pictures and look for information such as number of reviews and “breakfast included” options.
Solutions— In order to reduce the back and forth and increase fluidity, I have added 2 key elements on each hotel ad: swiping pictures and number of reviews.
2.1 — After clicking on a hotel ad, all of the users first checked the pictures. They were unanimous, the pictures are one of the keys to their final decision. Making the pictures available to swipe directly on the ad could therefore accelerate the decision making.
2.2 — The number of reviews of the hotel is only available after having clicked on the ad. Same as the pictures, I made the information available directly on the ad to decrease the back and forth and smooth the user experience.
3 — Make the geolocation more understandable
4 out of the 5 users had issues with locating a hotel in the center of Reykjavik. Two of them just didn’t know how to use the “location” filter and were confused with the distance tool. Two others used the map at first and gave up quickly because they could not identify the city center easily. I’ve decided to focus on the location filter only for timing reasons.
Solution — I’ve revised the location filter to make it a bit clearer to use the distance tool.
Redesigned interactive mid-fi wireframes (step 6) goes live here ↓ ↓ ↓
Stick to the methodology
Conducting testing with 5 different users through several tasks provides a LOT of information. Collecting data was not the hardest part but making them clear, going through them again and again (the interviewees videos, the notes) to extract the essential and key information to move forward did take me some time. One of the mistakes I might have made is not categorising directly the results in “got it” and “didn’t”. I ended up with so much information that I didn’t know where to start. Sticky notes were not part of the empathise phase, and they actually could have been helpful! But little by little, I’ve been able to frame and identify the needs and specific solutions. It is crucial to stay focused on the methodology, it really brings the path to follow.
Paper draft is our ally
Starting with paper prototypes is always a good idea as hand sketched lo-fi wireframes can be very quickly drawn. Of course these are a sort of first draft and elements can evolve a bit when you take the mid-fi wireframing step.
Be curious
As a beginner on Figma, I still don’t have all the shortcuts to be very efficient when using the tool. It took me some time to build the mid-fi wireframes of this challenge. Especially when I had to duplicate several sections and found out afterwards that I had to edit the same small elements in each section. This was very time-consuming. But the fact that I am a novice is not an excuse. The internet and more simply Figma has an online help center that offers plenty of guiding processes. Creating my own components — elements that can be reused and on which one single change affect all the duplicated elements linked to the component— was one of the solutions that I could have done earlier in the process. It would have saved me some time and would have avoided all this painstaking work. But this is a lesson learned. So BE curious!
I couldn’t think of a better name than challenge. This third one has been tough but very enlightening at the same time.
Thanks for reading :)
