Challenge 3: Usability Evaluation & Site Redesign

9 min readOct 11, 2019

Our very last challenge for the Iron Hack UX/UI Design bootcamp (only for the prework though, there will surely be many other challenges during the actual bootcamp 🙈) is about redesigning a travel app to answer one specific profile of user. Seatbelts fastened? Let’s go!

Take some time to admire the opposite of something useful in action.

To start with this third challenge, we will first answer a simple question: what is usability?

Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease-of-use during the design process.
(…)
Definition of Utility = whether it provides the features you need.
Definition of Usability = how easy & pleasant these features are to use.
Definition of Useful = usability + utility.
Jakob Nielsen, Nielsen Norman Group

With this definition, we understand that usability is an important element to take into account when creating any product or service. Indeed, what’s the purpose in imagining things that are not lovable and intuitive? If you read my last story about the 10 principles of good design, you’ll see that design is not only about aesthetic... Website and apps design should aim at being useful for the users. For today’s challenge, we will test the usability of a travel app and redesign it after having highlighted its pain points.

The scenario

To start working on our travel app, we need a realistic scenario. The script is the following one: our tester’s dream is to travel to one of “the New Seven Wonders of the World”. We will follow her through the search of her tickets to go there. Here are some details:

Who is travelling?

Among all the profiles suggested by Iron Hack’s challenge, I chose this one:

Worldtrotter, Backpacker — 18–38 y/o
You’ve decided to finally go visit that wonder that has been sitting in your dreams for a long time now. You don’t have a long time to plan but also you don’t need it. You’ll be traveling in 6 months and are open to almost any possibility but have a budget constraint. You are price-cautious and prefer experiences where you have a chance to meet people and make acquaintances to enjoy the wonder together. You are not picky and you can accommodate the most affordable, adventurous, genuine experience.

I will interview Helene 👩🏻, a 21 years old girl who enjoys travelling and meeting new people.

What is the destination, budget & the app used?

Helene chose to go to India see the wonderful Taj Mahal!

Most convenient airport to destination: One important point to remember is that Helene’s budget is limited. The most affordable way to go to the Taj Mahal would be to go to New Delhi from Paris by plane and then take a bus to the city of Agra. The famous monument is about 20 minutes by car from this town.

For her solo trip, she’ll be staying in India for a week. She’ll be staying in three different hostels/airbnb to cut the costs and for being able to see cities around. Helene is a backpacker, she’ll use public transports to go from one place to another and is not intimidated by long hikes through India. Her budget is 1.000 euros, not unlimited but with the right choices she’ll still be able to make the most of it!

To purchase her ticket, our tester will use the app Hopper. Used to travel, Helene already tried applications as Kayak or TripAdvisor. Hopper is completely new to her and it will help us to get her very first impressions on the application!

Hopper: tested and approved?

Following our scenario, Helene searched for her flight tickets to go to New Delhi. As her schedule is pretty flexible, she will search for the best prices for a trip of seven days in April. Let’s see what she thinks about the app…

The test

The first steps she took were inserting the origin and destination informations. She was quickly confused since after having written “New Delhi” in the research bar, she couldn’t find any results in India. So, she wrote India and they suggested her “Delhi”, “Delhi” being the name of the airport (even though the website is actually www.newdelhiairport.in). After having chosen Delhi airport, she selected the month of April (screenshot 2) and picked days that would made her tickets cheaper (screenshot 3). She was then confused by the buttons: where to go now? After having looked more carefully at the app, she pressed the “View Flights” button (screenshot 4).

She was then redirected to a screen showing her the prices for outbounds to Delhi. Those were already sorted out by price. She selected the most convenient flight (screenshot 5). The next screen shows her the details about the flight she chose (screenshot 6). After having pressed on the button “Select this outbound”, Hopper suggests her the flights back to Paris (screenshot 7). They are sorted out by price again. Helene chose the cheapest option with the shortest waiting time. Next, the app gave her details about the selected return flight (screenshot 8).

Hopper redirected our tester to the fare details of the ticket (screenshot 9). Helene was surprised by the indicated price and thought there was a problem with the app. Indeed, she thought she had picked two tickets of 513 euros each and that the flight would have cost her a total of 1.026 euros! She then pressed “Continue” and was asked to sign in to continue (screenshot 10). After having filled the different informations in order to create an account (screenshot 11), she arrived to the “Choose Payment” screen (screenshot 12). That’s where we stopped the test.

Impressions

I’ve asked Helene to look at the home page of the app for 5 seconds (Five second testing). Then, I asked her what she could remember from it. She recollected the two research bars and that it was possible to choose the number of travelers. The app being quite sleek, it was easy for her to know how to start her research for tickets. Helene loved how uncluttered the app is and that it notifies her in case the prices change, very useful for someone on a budget! Having said that, Helene still encountered few problems and said she wouldn’t continue using the app. Let’s find out the reasons why!

Not that intuitive. First, the application didn’t recognize the city “New Delhi” in the research bar. She had to write Delhi or India in order to find the right destination and she had to check to make sure it was the right airport. Solution? Offering a research method that would be similar to Rome2Rio, this service permits users to see all the options that exist to go to a point A to a point B. The user could type one precise address in the research bars and Hopper could then offer different flight possibilities to choose among.

Not clear enough. Second, it was inconvenient not to know exactly how much her tickets would cost her. Hopper didn’t mention explicitly enough that the price indicated for the return already includes the price of the outbound. Solution? We can see that Hopper showed the details of the chosen outbound ticket on the return flight results (screenshot 7). However, there is no reminder on the price of this outbound ticket. A simple way to correct this issue would have been to indicate the price of the outbound ticket and “+0€”, or “+120€” when choosing the return ticket.

Not trustworthy enough. Last but not least, Helene was a bit skeptical about the app’s safety. Everything goes so smoothly that she was not sure the fares found by the app are the most affordable. She fears to pay using Hopper. Solution? Many users are nowadays very cautious when paying online. It is important to reassure them using a logo that shows payments are safe. Also, everything goes so fast, one thing could possibly ease the user: notifications! Before continuing to the next step, we can make sure that the user understands what it means to press on the button (example: “You are about to purchase tickets for an amount of 513€. Would you like to continue? Cancel or Continue”).

Resolving the problem through redesign

Now that Hopper underwent our test, we will try to find a solution to fix the problems mentioned earlier. For our challenge, we will compose mid-fi wireframes in Sketch and use Invision to create a redesign prototype. To see the process, keep on reading 🙌🏻!

Wireframing to give body to our ideas

I used Sketch to wireframe this redesign projects. Here are the most important screens, they change the flow and the way users interact with the app.

Screenshot 1: I added the possibility to make sure the address is known by the app. Thanks to this option, Hopper will be able to create different itineraries for its users.

Screenshot 2: The app is only able to book flights but it will still show the different travelling options in order to help the user in the decision making.

Screenshot 3: The “View Flights” button is now more noticeable, no need to search anymore for the next step!

Screenshot 4: To solve the problem about the clarity on tickets’ fares, the return tickets will now be shown with the additional amount the user will need to pay if he selects one specific return (“+0€”).

Screenshot 5: To make sure the user knows what he’s doing, I added a notification before adding the credit card informations. No more surprise, the user knows what is about to happen.

Screenshot 6: On the page to add the credit card, the user will be able to have more informations on the safety of the payment. To do that, he only needs to click on the “Information button”.

You can witness this redesign on my InVision prototype, only one click on this globe 🌏 will lead you there!

Conclusion:

Well, well, well… I have to admit that this challenge was pretty tough 🤯! Interviewing, brainstorming, wireframing and prototyping took me a long amount of time to finish this very last Prework’s challenge.

I loved interviewing Helene since I would not have seen things the same way as she did 🤔 I learnt that being able to have empathy towards others is so important if we want to create a product/service that would satisfy different kind of profiles. I also enjoyed brainstorming about ways to solve pain points, it does require to put thoughts into it and a bit of creativity at times. Lastly, I must say that I didn’t expect this challenge to take so much time to realize… it’s a very human process. I’m saying that in the sense that I had to interview someone, to put myself in her shoes and to come up for solutions because I do care about her being able to overcome those difficulties. Having said that, I had a lot of fun with this challenge and I’m now looking forward to start the Iron Hack UX/UI Design’s Bootcamp 🙌

Clap and keep on checking my stories for more insights from a complete newbie! Thanks for reading 🤓