Redesigning the TripAdvisor app

Or, it’s not called a mantra for nothing.

So far, my two main mantras while working on the Ironhack UX/UI Design Pre-Work have been pretty simple: “I’m not the user of the product I’m creating and evaluating” and “Done is better than perfect”. The first one something that Ironhack is teaching me, and the second something I have been trying to teach myself and have only been getting slightly better at over the years (baby steps). When I got to the third challenge of the Pre-Work I was pretty confident I could handle this, but, it turns out: I was getting cocky. I have a sneaking suspicion that this is going to be a recurring thing once the actual bootcamp starts, so let’s analyse what happened.

The challenge

As an avid traveller I was really excited about this third challenge: evaluating and redesigning travel apps. How exciting is this! I get to work on something I use a lot myself too! I went into it thinking this was going to be easy and fun, ’cause I already had lots of ideas about how to improve these travel apps. But, it turns out, this actually made it really difficult to come up with a neutral app evaluation. In the module it is repeatedly stated that you have to keep the mantra “I’m not the user of the product I’m creating and evaluating” in mind, and this was definitely a challenge for this particular assignment. Turns out it’s really difficult to turn yourself off. Not a terribly surprising insight, but I found it very useful to be confronted with this predicament again, as I think it’s one of the most important skills to have in UX/UI: being able to forget yourself and focus on the user. So definitely something I need — and want — to practice more!

Woman on Great Wall of China
Woman on Great Wall of China
Looks easy enough, but note the steep uphill part coming up…

Choosing which app to evaluate and redesign

The next step was choosing which app to use for my redesign. I compared the four apps by looking at Nielsen’s heuristic principles. The results of my comparison can be seen below:

Table comparing Nielsen’s heuristics principles across 4 travel apps
Table comparing Nielsen’s heuristics principles across 4 travel apps

User research

Figuring out the task was one of the hardest things in this assignment. I had a lot of ideas in my head about how to improve the TripAdvisor app, so I kept coming up with tasks that would lead my users to the pain points I had experienced myself already. This is obviously not the point of user research. Again, I am not the user of the product I’m evaluating or designing. The point of user research is to let the users of the app speak for themselves and use those insights to redesign the app, not to change the app in a way that’s more suitable just for me. It was quite the struggle to get around my own preconceptions regarding the app, and in this respect it was good that I decided to do it this way, as it was useful to be confronted with this issue. Useful, but frustrating.

  • Find three things to do, one of which is a trip to the Great Wall. Your budget for all three excursions is 100 euros.

User interviews

So, finally having gotten myself to the actual user testing stage I asked each of my testers to do the 5 second test, and then perform the task I set them.

  • No possibly to save recommendations for flights, though it is possible to save hotel recommendations;
  • Not clear what hotel prices include (one night, all nights, one person, more people?);
  • Not enough filter options for search results in “Things to do” section;
  • The system status was not always immediately clear;
  • Unclear which site you would be forwarded to once you choose a recommended flight or hotel;
  • Most of my users were surprised that you couldn’t book directly on TripAdvisor, but that you were forwarded to another site for the actual booking;
  • Not enough information in the “Things to do” section, so you’d always need to do more research to find out if things are worth doing;
  • No possibility to filter reviews under “Things to do” section, so difficult to quickly decide on the trustworthiness of the trip organizer.

Narrowing it down

Some of the pain points mentioned above would require a major overhaul of the design and structure of the app, and some would only require a small change in the interface. Even though these changes are relatively small, they would greatly improve the experience users have using the TripAdvisor app. I decided to focus on the pain points that would be relatively easy to solve, and chose the following improvements for my redesign:

  • Save recommendations for flights;
  • Make hotel prices more clear.
Comparison of original app, lo-fi wireframes and mid-fi wireframes of the redesign.
Comparison of original app, lo-fi wireframes and mid-fi wireframes of the redesign.

The ongoing search screen

In the search screen it took all of my testers a while to see the narrow yellow bar in the original app, even though it’s actually moving. This bar indicates that the app is still searching for flights. It’s important to make system status very clear, because my testers were getting impatient they couldn’t click on any flights and didn’t immediately see the search was still ongoing. They would also be quite shocked by the prices of flights, not realising cheaper ones might still pop up. In order to fix this I’ve added an airplane icon to the search bar, which makes system status more eye-catching and therefore more obvious. While the search is ongoing, the airplane will move from left to right. It will disappear once the search is completed.

The search results screen

The second problem I worked on is not being able to save flights. The TripAdvisor app has the option to add hotels and excursions to a “Trips” page, where you can save them to look at later. This makes it easy to narrow down possible hotels and excursions, and then compare them later, also keeping an eye on the total budget. Oddly enough, it’s not possible to add flights to this. In order to fix this, I’ve added heart icons to the suggested flights, which will appear once the search is completed. The heart icon is also used to save hotel and excursions, so users will recognise it from elsewhere in the app. Pressing the heart will save the flight to the “Trips” page, which can be accessed through the footer menu.

Hotel details screen

The last change I made was on the hotel details screen. Once you’ve chosen one of the suggested hotels you can click on the name and you will be taken to a page with hotel details. The price is mentioned as well, but it won’t say what the price includes. It is not clear if this price is for one person, for one night, for all the people in the reservation, per room? It’s just a number, no further explanation. All of my testers ran into this issue, having to click on to the booking screen before getting the price details, and then back to the hotel detail screen, and search results, in order to be able to compare hotels. This is a lot of unnecessary clicking back and forth. In order to fix this issue I added the information to the hotel details screen, so users don’t need to click on the “View Deal” button and get taken to the booking site before they get all the details.

What did I learn?

In hindsight it’s easy to see where things went off-track. I spent way too much time mulling over the preparation of my interviews. I thought it would be easy to pick a target group and task that were close to me, but it took me quite a while to realize that I only made it harder for myself to do a well-thought out, neutral study of the needs of the app users. It was difficult to get away from my own opinions and really listen to my users. So I needed a lot of time to come up with a task that was neutral enough to be able to get some good results from my user research.

I like striped socks, and the internet says that is a mark of intelligence. So there you go.