Iron Hack pre-work 3/3: Usability Evaluation and Site Redesign

This article is part of the pre work for the Iron Hack bootcamp. The goal is to practice to implement the process for site redesign from interview with users to lo-fi wireframes.

Persona

In this article, we will follow Anna, a 25 years old globetrotter. She is working in Marketing in Paris and when holidays time comes she likes to treat herself with a trip oversees for a few weeks long in order to discover new culture, landscapes and break with the fast life she has in the city all year long. This year (let’s forget about Covid for this case study), she decides to go to Mexico, the Chichen Itza archeologic site being obviously on her to do list. She will be traveling for 2 weeks so her priority #1 is not to lose time during transportation to be able to stay as long as possible in Mexico, and her second concern is also not to go over the budget she allotted to this trip.

The app

I chose to work with Hopper with this case study vs Kayak and Skyscanner for two reasons:

1. Hoper has a more minimalistic design which enables to grab information in an easier way
2. Hoper enables a purchase directly on its platform which I believe raises more trust and save time for the user. While Skyscanner and Kayak reroute the user onto other websites to place the final order. Often these are mobile website (vs app) therefore not responsive, overloaded with information (if not, advertising) which can make them look a bit unreliable. Moreover, while rerouting errors can occur.

Fieldwork and outcomes

I interviewed 3 « Anna » with the same lifestyle and expectations regarding travel. I gave them the following task to complete on Hopper: Search for a Paris-Mexico City round trip ticket, direct. Your maximum budget is 500€ considering that you have a bag to check-in.

First of all, I have to point out that my 3 interviewees never used Hopper before (not popular in France). So this experience was their very first one, and they were pretty positive about it! Indeed the look and feel of the app was judged minimalistic and aesthetic which put them into a positive mood regarding their experience. However some issues were raised:

1. A too overloaded first introduction page

Once the user has selected his destination, and dates, a page comes as an introduction featuring the lowest price, a bunch of text about price prediction, possibility to set a notification when prices drop, possibility to unlock discounts… This page is a bit confusing and unexpected considering that users expected to see a list of flights with prices. And what makes it even more confusing is all this text, users feel overwhelmed with!

2. Filters and sorting options

By default, the flights options are sorted by « recommendations », a criteria that does not talk to the user (what makes a flight recommended? By whom? How reliable is that?). Users would unanimously have their options sorted automatically by prices. Besides, this would be more consistent with the positioning of the website that puts the emphasis on its best efforts to seek the best deal.

When it comes to the filters, users complained there were too few! Only two (layover / Basic faire). They would have liked to select hours, checked luggage… Besides, the « basic faire » is hard to understand.

3. The checked luggage

Once the user selects a flight, he has to wait the last step before payment to see if a checked luggage is included in the ticket price or not. In our case, the luggage would add 132€ to the total price! As our type of users are concerned with budget, they would like to have this information provided ahead in the path to purchase.

My recommendations with lo-fi wireframes

1. Keep the introduction page but make it sharper

My goal with this wireframe was to simplify this page to the maximum: less text, delete some secondary information, and make everything fit in one screen (no scrolling necessity). I wondered as well: what information are the most important here? We came up with: lowest price, trend (is it going to raise or decrease?), and possibility to freeze the price, this is why I only kept these information. Moreover, the message needs to be impacting and sharp, therefore I took off text blocs and instead I used more visual tools like icon, big font, button.

2. Add more filters and change the automatic sorting

First, I changed the automatic sorting of the flights by price (vs recommendation).

Second, I added some other filters to enable users to sharpen their research. And I modified the « Basic Fares » filter that was unclear to interviewees, by the possibility to ask for price including a checked luggage, or not.

3. Add luggage information early in the path

I added a suitcase icon (or a crossed suitcase icon, if the flight did not take in account checked luggage) on each flight to provide directly the information concerning the bag. An information that remains once the user clicks on a specific ticket.

I really liked doing this exercise, I liked to brainstorm in order to try to find solutions to make the user’s path easier. I learned that listening to the user is a priority and that I, as the designer, have to listen, empathize and redesign accordingly. This position is very important to hold I think, and it is great to get acquainted early to it in the learning process.