Challenge 3 : Usability Evaluation and Site Redesign

Diego Arizcorreta
7 min readNov 22, 2020

There is not much missing for the Hopper app to make a leap in the field of travel booking. Let’s take a closer look !

This new challenge consists of rethinking the design of a mobile travel comparison application including Kayak, Skyscanner, Trip Advisor and therefore Hopper in order to improve the user experience. I chose the latter : Hopper !

When it comes to planning a trip many factors come into play and many questions quickly come to mind : first of all, where to go ? Which destination ? Who to go with ? What accommodation to book to delight everyone ? How to organize the phases of transport, at the airport or for the shuttles ? In short, many questions that can quickly become a headache. Research using search comparators is a delicate step…

It’s time to simulate the planning of a trip with friends to Rome in order to admire the wonder that is the Colosseum, especially since our participants do not necessarily have the same budget, so don’t aim too high and therefore not too far !

I. Presentation of the team !

  • Nelly (26 years old) : She is serious when it comes to organizing a trip with friends, the “organization pro” (or “la pro de l’orga”) as her friends like to say, it must be said that she can quickly stress if there is the slightest change along the way ! She is the one who most often leads this kind of trips and, moreover, she has been to Rome once before.
  • Max (28 years old) : Unlike Nelly, Max is a real backpacker who loves adventure, who indulges in all new experiences : he has already traveled alone in South America and likes to meet people on his way. He loves camping, so comfort is the least of his concerns.
  • Manon (24 years old): Manon loves her country, she knows France like the back of her hand ! But when it comes to going outside our borders, things get complicated … She has never been outside Europe and the most exotic country she could have done is Spain (oh ! Tunisia when she was a child with her parents).
  • Pierre (26 years old) : During his graduate studies, Pierre traveled a lot through Asia through the two university exchanges he carried out. He speaks 4 languages ​​(French, English, Spanish and Chinese). We can count on him in terms of communication : he has a chat and can get out of any situation.

II. Some indications about our destination : “omnibus viis Romam pervenitur” !

The Colosseum, a huge amphitheater located in the center of the city of Rome, the largest ever built in the Roman Empire !
  • Date : from May 25th to 1st June
  • Airport : Leonardo da Vinci-Fiumicino Airport (32 km from Roma center)
  • Vaccination no needed
  • Wardrobe: light clothing and walking shoes like sneakers (it is better to avoid sandals if you have to walk the city for several hours)
  • minimum of 4-5 days to visit the city well.
  • No currency exchange needed (long live the € !)

III. Benchmark : Usability Heuristics evaluation with Nielsen’s Principles.

I benchmarked 3 travel comparators by using Nielsen’s Principles : Skyscanner, Tripadvisor and Hopper.

Seeing the results, Hopper is the app that least meets the various criteria set up by Nielsen. I will therefore try to improve it ! None of the users I was able to interview have used this app, and this is the first time I have heard of it myself.

IV. TEST UTILISATEUR

> First test : 5 seconds test !

I first sent a screenshot of Hopper’s homepage to my user panel and asked them to watch it for 5 seconds. Then, they had to answer the following 3 questions :

  • What could you observe during this time lapse ?
  • What do you think this tool can do for you ?
  • Where would you go to search for a flight ?

Here is the link for the test, check it out !

https://app.usabilityhub.com/do/780bca2bdcef/9069

After having collected and analyzed the answers, points clearly emerge :

  • Clearly, users fully recognized that this was a screenshot of a travel comparator. The home page is therefore sufficiently understandable to understand the functionality of the application.
  • Users have clearly identified the different categories of research and reservation: flight, car, hostel, home. The logo with the airplane, in the center of the screen, is clearly linked to the search for a flight.
  • However, they did not have enough time to read the last minute offers at the bottom of the page (especially since we cannot really see them on the screenshot offered because of a message of the app team…).
  • They know they have to click on the “airplane” logo in the center of the screen to search for a flight.

> 2nd test : Screen navigation recording !

Then, the instruction for the users was to carry out 2 precise searches on the mobile application, to record their screen and finally to evaluate each step from 0 to 5.

1st research => Find a flight to Rome from May 28 to June 3 for 4 people with the following constraints : a maximum budget of 140 € round trip & possibility of reimbursement.

2nd research => Find accommodation (house or apartment) for 4 people for 7 nights and located in the city center, the maximum budget being 200 € per person (total budget of 800 €) for the week.

Thanks to the feedback from the 4 users, we realize that the app is not easy to use when we want to quickly book a flight or accommodation. Indeed, 2 of them clearly told me of their annoyance when using the app and would have given up after a few minutes if they had not been in the context of a user test.

Several points stand out :

  • lack of readability of the application in its different stages
  • the use is not very intuitive
  • language problem (only in English)
  • yet potential for the design of the application but lacks clarity.

=> In the end, all the users managed to accomplish the two searches and their constraints, but the process is not smooth and pleasant to follow.

After noting the many pain points that emerge, I decided to focus on the search for flights and its process, which must be faster and more intuitive while also offering other filtering options.

V. Redesign

New homepage :

→ As you can see, I have redesigned the logo : the color changes from red to blue (that can be seen throughout the use of the app). The rabbit (or hare) gives an impression of speed and the “hop” is highlighted by the blue / white contrast

→ I deleted the “last minute offers” and replaced them with “recent searches”

→ I added a menu footer with 3 logos : alerts, search and profile

Flight selection page :

→ I simply added the possibility of having “more details” on each of the different proposed with the information that scrolls down, while remaining on the same page.

→ The footer menu is always present

Filters page :

→ The filters page unfortunately does not offer much to personalize your search… I removed the “Basic Fares” filter and simplified the “Stopovers” filter to replace it with a toogle switch (Yes-No). I added the possibility of choosing the time of arrival for the outward journey and for the return and incorporated the “Eco-responsible” option which, nowadays, is an important point for more and more people !

VI. Key learnings

I loved this challenge, clearly my favorite so far ! The research phase on the different competitors is important in order to know what is happening on the market.

User tests are essential to better understand the navigation problems encountered in the app, the gaps, etc. It is interesting to see how each of the people questioned agree on the same points but can from time to time diverge on others, some are more demanding, others have more ease, of intuitions but there are always generalities that stand out.

But what I appreciated even more was the redesign phase ! Attempt to resolve the issues raised by lightening the interface at times, adding features, respecting a certain graphic charter, an identity. I particularly liked redesigning the logo of the app so that it better reflects the service offered.

Thanks for reading !

--

--