Ironhack 3rd Challenge: Usability Evaluation and Site Redesign

It’s time for the last Ironhack challenge! But what is it about?

• Step 1: Evaluate the usability of a travel app through user-testing.
• Step 2: Redesign the app according to the users’ feedbacks collected during step 1.

Introduction and Methodology:

In order to realize this challenge, I followed this process:

1. Choose a ‘User Type’ among several options and a travel destination.

2. Benchmark 3 mobile apps with Nielsen Principles (Usability Heuristics Evaluation) to choose the app that fits better for my user type.

3. Conduct a 20 min test and interview on the chosen app with 3 persons belonging to the selected user type.

4. Summarize the findings and results of these tests / interviews to improve a future iteration of the app

5. Create app wireframes incorporating the findings raised by the users.

User Type and Destination:

I decided to choose the worldtrotter backpacker, because many of my friends actually are backpackers. Here is a quick description of this user: he/she doesn’t have a long time to plan the trip but doesn’t need it. He/she will be traveling in 6 months and is open to almost any possibility but has a budget constraint (price-cautious). He/she prefers experiences where he/she has a chance to meet people and make acquaintances to enjoy the wonder together. He/she is not picky and can accommodate the most affordable, adventurous, genuine experience.

The chosen destination is Peru, and the high expectation of the trip is a 2 days-visit in Machu Picchu. The most convenient airport to travel to Peru and to Machu Picchu regarding distance seems to be Cuzco.

Travel mobile apps benchmark:

I realized a benchmark on 3 mobile apps:

- Kayak

- Skyscanner

- Trip Advisor

I used the 10 Nielsen Principles to perform the Usability Heuristics Evaluation for each app and to choose the app that fits better for my backpacker user.

I decided to use Kayak in this challenge. Indeed the 3 apps satisfied almost all 10 principles, but Kayak offers flexibility in choosing the flight’s dates (which is not the case for Skyscanner and Trip Advisor) and it’s a criterion that better fits my user because thanks to this option, he/she can find the perfect deal (as he/she has no constraints regarding his/her trip’s date).

Test and Interview:

I tested the Kayak app on 3 of my backpackers’ friends starting with the 5-seconds test to evaluate the look and feel of the app. Here are the questions I asked them:

• What did you see?
• What can this app do for you?
• Do you know which app this is?
• What do you think about the design?

Kayak passed this 5 seconds-test with flying colors! Indeed, my 3 friends recognized they were watching a travel app. They all identified the 3 pictograms on top: plane, hotel and car, so they easily understood they would be able to prepare a trip by using this app. They didn’t recognize it was the Kayak app because there is no branding information on the ‘home page screen’, but the logo appears right before this screen displays.

They were also unanimous on the app design: clean, clear, intuitive.

After this test, I asked each of them to realize the 3 following tasks for me in the app:

- Find a flight to Cuzco-Peru that fits their constraints

- Find a way to move from Cuzco to Machu Picchu

- Book a hotel for 2 nights next to Machu Picchu

I collected a lot of insights from these 3 interviews and detected some pain points they encounter during their journey:

• Step 1 — Find the flight: They all clicked on the airplane pictogram then in the search bar (so far so good). Then they entered the cities of departure/arrival but when choosing the dates, the 1st difficulty appears: one of them doesn’t understand the color code (green, orange, red) as an indicator for the price. In addition, 2 of them completely missed the ‘flexible date option’, which would allow them to get a better deal, knowing that they have no date constraints. It could be nice to increase the “price indication” pictograms and also readapt the “flexibility option” for the dates.

Also, only 1 of them clicked on the options below to customize her profile, as if the 2 others hadn’t identified it was clickable. However, this saves time on the flight personalization and therefore allows to adjust the prices upstream of the search. Maybe we can make it clearer they have to click on these options…

Finally, once the app has performed the search, some click on “best choice” (in green below), but nothing happens, while the app reacts and reorganized the flights when they click on “Best price” (in blue below) and “Shortest flight” (in red below). They have no explanation for “Best Choice” and don’t know what it means. A pop up could help them, I guess.

Two of them also take several seconds to press the “filter button” (in pink bellow) to narrow the search, as they don’t immediately see it (they first scrolled for quite a long time, looking a bit lost when choosing the right flight). Maybe it will be better to put this button somewhere else? Why not in the first screen with the other options?

• Step 2 — Find a way to move from Lima to Machu Picchu: The only option available in the app to do so is to rent a car, one of the users clicks on the pictogram to process the booking. The process is super easy for him, but the price is indicated only per day and after a quick calculation he realized he would have to pay more than 200€ for the rental, a consequent budget that he doesn’t have. So, he gave up!

The 2 other users didn’t click on the car pictogram telling me spontaneously “I will travel but by my own, with local transportations” but they thought they could find this information by clicking on the “Explore” option at the bottom of the screen. They have been misleaded by the name of this pictogram because here is what happens when you click on it:

You are just invited to discover what destination you can explore, but around your current location… It was a bit disappointing for both of them.

So, I guess it could be convenient to find a local travel information directly in the app: where is the train or the bus station in the city? What would be the price for going to Machu Picchu from Lima? Are there any other ways to move around (collective cabs for example)? This feedback gives me the idea to bring a new feature in the app to find a way to move inside a country without renting a car.

• Step 3 — Book a hotel for 2 nights in Machu Picchu:

Until the 4th screen, the request is easy to proceed. But when they all arrived on the 4th screen, they started to encounter some difficulties. They all pointed the fact they were surprise not have been able to choose options (price, type of establishment) before this screen displayed. So, it seems the finding we point out in step 1 regarding the filter is also valid here, it’s not visible enough or it arrives too late. Then, when you select your criteria, the results displayed on screen 7 are not sorted by price (from the cheapest to the most expensive) and you have to click on the map (again, almost invisible) to be able to find how far the Machu Picchu is from you (screen 8). The map option should be more visible, and we could add a simple scale information to get a quick view of the distances.

To sum up, here are the improvements pointed by my users:

• Step 1 — Find the flight: increase the “price indication” pictograms; readapt the “flexibility option” for the dates; make the option choice more obvious, and bring more filters on this page; add a pop-up window to provide an explanation regarding “Best Choice”.
• Step 2 — Find a way to move from Lima to Machu Picchu: add a global price for the car booking, not a price / day; bring a new feature to find a way to move inside a country.
• Step 3 — Book a hotel for 2 nights in Machu Picchu: bring the filter options at the beginning of the journey; make the Map option more visible and add a scale on the map screen.

Redesign Wireframes:

You’ll find below the main changes I made to the app (by using mid-fi Wireframes) to fix the pain points previously mentioned:

• Step 1 — Find the flight:

(Current App Screenshots)

Figma Wireframes with changes

More options are brought on the 2nd screen (with a pictogram and a phrase adapted to encourage the options’ selection). On the 3rd screen, the price indicators are more visible at the top and when you click on the date, a pop-up window appears from the bottom to offer you more flexibility in order to get a better deal. Then, on the last screen, here again, a pop-up window appears with explanations when you click on “Best Choice”, to have more information,

• Step 2 — Find a way to move from Lima to Machu Picchu:

Figma Wireframes with changes

A new “Explore” pictogram (represented by binoculars) replaces the previous “Car” pictogram at the top of the first screen. Then, you add the departure position and your arrival and select the means of transport which fits better to you (the bus in this example). After, we select a round trip here, and we have to choose the date and departure time. Following this, you select the best options for you and then you arrive on the final screen where you can see a recap of your trip.

• Step 3 — Book a hotel for 2 nights in Machu Picchu:

Current App Screenshots

Figma Wireframes with changes

The user selects the “bed” pictogram and moves to a screen where more options have been displayed. By clicking on the “Establishment’s type” option, the user can finally refine his/her choice. Then, all the establishments that matched the user’s expectation are displayed. It’s also possible by clicking on the “map” pictogram, to see the location of each place with a new scale indication at the map’s bottom.

Learnings:

I understood, once again, how key it is to interview users in order to evaluate the usability of an app. It’s an inexhaustible source of inspiration, everybody reacts in a different way using an app and the challenge is to focus on the things that really matter because it’s easy to disperse due to all the collected feedback!

I also understood how important it is to have a clear interface, so as not to lose the user, but you must also need to do your best to make it intuitive and simple!

We could also think that these applications are real best practices (after all they are used by millions of people) but finally everything is perfectible so a good learning will be to realize audits as often as possible to stay in phase with the user expectations.