Ironhack’s Prework : Dahyun FIDEL - Challenge 3 : Usability Evaluation and Site Redesign

Hello all,

My 3rd Ironhack’s Prework Challenge consists in evaluating usability of a website/app and redesign it !

The context ?

Young user between 20 and 40 years old, plans to travel with a group of friends. All live in Paris. Price-conscious, but their trip is an occasion to please themselves.

Photo by Dennis van den Worm on Unsplash
  • Where do they travel ? Roma in Italy 🇮🇹 to visit Colosseum. With the Coronavirus context, our travelers don’t want to go too far from France, in case of sanitary restrictions could be decided during their trip.
  • When ? One week from April 17th to 24th 2021.
  • What airport ✈️ ? Fiumicino is the better served by different companies, but Ciampino is the nearest one from the center of Rome.
  • Medical needs ? There is no mandatory vaccination. However with the Coronavirus, local restrictions can be decided during the travel (mandatory test before entering the country for example…) 😷
  • Number of days necessary to visit : minimum 3 or 4 days.

The testers ?

For this user test, I choose 3 testers corresponding to the profile, a little bit different.

  • Georges, 31 y/o, has never been to Rome. He generally does not prepare things in advance and likes to discover things once arrived.
  • Sophie, 31 y/o, has never been to Rome, and is very organized and prepare all details of her trip in advance.
  • Pauline, 29 y/o already knows Rome quite well, and is very organized.

User scenario

  • Find a flight to Rome for 4 people in a budget of maximum 150€ per person for round trip, with a preference for direct flights. Flights should have flexible refund/exchange conditions.
  • Find an accommodation for 4 people, for a cost of 75€ per person per night (total 300€ per night), well located in the center of Rome, not too far from Colosseum. Booking condition should be flexible (refundable).

What search tool ?

Based on J.Nielson’s 10 Heuristics forUser Interface Design and the user tasks I defined, I compared 4 websites/app on mobile : Kayak, Skyscanner, Tripadvisor and Hopper, with a view to choosing one of the four services for my user test.

After analyze, I decided to run the user test with Skyscanner app which seems to offer the best user experience.

5 seconds test

Image for post
Image for post
Skyscanner.fr Homepage on mobile

Before beginning the test, I showed Skyscanner.fr mobile homepage to the testers for 5 seconds. Then I asked them to describe what they saw based on their memory. Their reaction were quite similar :

  • The flight search feature is visible and easily understandable
  • The users think they can book a flight, in addition to search engine features
  • Hotel and car rental tabs are less visible

User test result and insights

I asked my testers to realize the 2 tasks described earlier. The user test revealed different insights. I gave a note to each insight, to prioritize the feature to redesign :

  • +2 : the user finds that the element improves significantly the service
  • +1 : The user appreciates the element
  • -1 : The user finds the element can be improved
  • -2 : The element makes the service inconvenient to use

After analyze, I decided to revamp the hotel search feature which seems more problematic than the flight search feature.

Redesign wireframes

1. Homepage : The user feedback was that the flight search was very visible, but the 2 other tabs were much less. So I made “Hotels” and “Car rental” tabs a little bit higher and added icon placeholders.

2. Hotel Search Page: One of the users pointed out that it would be better if he could add some filter criteria directly from the first search page, instead of searching first and then open the filter page after. So I have added a link “More filter criteria” link which enables to display some main filter features (the most used ones during the test).

3. Search results page : I did not change any feature in this screen. The only difference is that if the user can chose some filter criteria (price max, free cancelation …) from the last screen, so the results list is much more short, relevant and precise. It can help users to save few clicks by avoiding to open the filter page then coming back to the result page again.

4. Filter page : In the filter page, 2 pain points were pointed out by the users.

The first one was the fact that the price filter slider was not working correctly. For example, sometime the maximum value in the slider was “250€+”, while the user wanted to define the maximum budget at 300€. So I changed the price filter feature by 2 inputs (minimum and maximum prices).

The second pain points was that the district filter was not user-friendly for people going to Rome for the first time. The district names are not understandable if you don’t know the city. So I proposed filters related to well-known monuments (for example : “near Vatican”) in addition to existing district filters.

5. Map view : For this page I proposed 2 optimizations.

The first one is when a user searches a location (ex : Colisée) the problem is the fact that the map do not indicate where this location is on the map. So I added a pin, enabling the users to understand where is the location he searched.

The second one is that the user had to drag up the hotel preview to get the button “See details”. I simplified this step by displaying the button by default.

6. Product page : In the hotel description page, the first pain point was that the price indicated was not the one for refundable option, while the user filtered his research with the option “Free cancelation”. So the price indicated should be the refundable one.

I also added an “add to favorite” button next to the hotel name. It enables users to keep an item in a favorite list, go back to list/map page, and find this easily later.

Interactive prototype

Here is the interactive prototype of my mid-fi wireframes.

What I have learned ?

I really was surprised again how users can all interact and think differently. When I conducted the heuristics evaluation, I thought Skyscanner mobile site was quite user-friendly. But once I asked to the users to do the test themselves, the result was completely different and the pain points were numerous !

The 5 seconds test was interesting too. It enables to test if a page is easily understandable by the users.

And I also learned few new Figma tips 🥳 . I can manage components better. These will be very helpful for the next exercises.

Thanks again for reading !

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store