Ironhack, challenge 3 : Usability evaluation and site redesign

Morgane Lecouffe
7 min readNov 1, 2020
Source : https://adamfard.com

Planning a trip can be something really challenging for everyone, given all the things you have to take under consideration. Is the country I am heading to is expensive ? Which hotel should I book ? Which flight ticket is the most interesting ? So many things to think about… And we are glad some mobile and web applications are here to help us make our choice! But what if the application in question is making the process harder for us instead of helping us?

For this third challenge, Ironhack challenged me to analyze three different apps in the tourism industry and to redesign one of them according to my target users.

  • Who’s our target and where are they heading ?

Our users are traveling as a couple, they are young, between 20 and 40 years old. They have been saving money for a long time for this trip, so they are willing to spend some money on that trip, to treat themselves, but they still need to be careful.

They are going to Tokyo, Japan, around ten days. They have a budget of 1500 euros per person (flights not included). They would like to arrive at Narita airport but they are flexible. They should definitely wear warm clothes and know that one yen equals 0, 0082 euros.

  • Benchmarking

The next step was to conduct benchmarking through a heuristic evaluation. I compared Hopper, Skyscanner and Kayak on the next points and chose the most adapted application for my user.

Heuristic evaluation

I chose Hopper because even if it maybe needs more work than the other applications, I think it is more adapted to our target. It is made for people who want to spend less money on their trip and has several features to help them do so. Moreover it has a “playful” attitude with the characters they use (bunnies) and it could be interesting to use it.

  • User scenario

Our users were:

#1 Romane, 25 years old

#2 Julie, 38 years old,

#3 Olivier, 38 years old

All three of them are hard workers and don’t go often on a trip, even more in remoted countries. They want everything to be perfect and trust any travel application to help them book this trip.

I asked each user three different things during interviews:
- Looking five seconds at the homepage and letting me know what they understood this application is about and what they can do with it.
- Doing the first task: booking a flight to Tokyo for two. The flight was non-stop, with a budget of 500 euros per person round trip.
- Doing the second task: looking for a hotel in Tokyo. Conditions being: minimum 3 stars, breakfast included, maximum 120€ per night.

  • Wireframing

The last step of the process was to make a paper prototype and to redesign the application we had chosen. I focused on redesigning the pages where the pain points were the most important.

1. Home Page

Every user understood quickly what was the application about : booking flights and hotels. They did not all notice the fact that good deals are also very important for this app. I have chosen to highlight each category. User #1 have noticed the funny photo at the bottom of the home page with bunnies and the car. I think this type of animation/photo should be more present, that’s why I have chosen to highlight each category with a photo. The background of each photo should be white, so the design remains simple. I noticed that they put too much different buttons to lead to the good deals, I replaced it with only one category. Lastly, they could not understand the carrott system (at the top of the page), so I added a question tag next to it so they can click on it and see an explanation.

Every user understood quickly what was the application about : booking flights and hotels. They did not all notice the fact that good deals are also very important for this app. I have chosen to highlight each category. User #1 have noticed the funny photo at the botom of the home page with bunnies and the car. I think this type of animation/photo should be more present, that’s why I have chosen to highlight each category with a photo. The background of each photo should be white, so the design remains simple. I noticed that they put too much different buttons to lead to the good deals, I replaced it with only one category. Lastly, they could not understand the carrott system (at the top of the page), so I added a question tag next to it so they can click on it and see an explanation.

2. Booking a flight

All my users faced the same issue when indicating the cities of departure and arrival. They did not understand that they had to choose which airport exactly they wanted to land in to validate the request. I added so go to the next page so it doesn’t automatically to it, like it is doing now. The user can check if he put the right cities.

Selecting the dates was not clear at all either. They tried to click on the colors on top to select the price, whereas it was just an indicator. The new calendar will be different: the user will be able to see one month at a time, on the whole page. Not all dates will have colors, only the most expansive days of the month and the less expansive.

Some informations from this page could easily fit on the first page, so it is where I put it (one way flight, non-stop flight…), moreover the filters were not really relevant and well understood.

3. Booking a hotel

I also mentioned this task but redesigned only one step, because it was a major pain points for user. The next steps were smooth enough and did not trigger users. On this page, they did not understand the color system, with green and lighter green and what it really corresponds to. They could not pick a date properly because the calendar is too low on the page and they would have prefered it it took the whole page and that they don’t have to scroll for it.

So how the user would be able to choose his dates ? He picks the date of arrival, hold it and make it slide until the date of departure…Which I could not do yet on Figma, but soon I will be able to do so (I hope) !!

  • What I learned

I understood how it is crucial to have a methodology to carry out such a long project. I discovered a website which helped me with it:

http://notion.so

I understood how it is hard to lead interview, especially when you don’t know the people who volunteered, when there is no incentive, sometimes you can’t count on them anymore and at the last minute.

I still have some improvements to do to organise my items on Figma, I am easily lost regarding some elements and have trouble to set my items at the right size, I am losing a lot of time with this.

Finally, I realized than redesigning an app can be way harder than to create one starting from scratch. It was a true challenge indeed !

Thanks for reading and see you soon for my next exciting projects!

--

--

Morgane Lecouffe

UX/UI Designer, passionate about anything related to user experience, tourism and hotel industry.