Ironhack Prework — Trip Advisor

Challenge 3: Usability Testing and Site Redesign

Carlos Groth
8 min readMar 15, 2021
Machu Pichu: 15th-century Inca citadel in Southern Peru. @agnieszkam

It’s always been a dream to visit the ancient 15th-century Inca citadel of Machu Picchu. It is a breathtaking site build by the Incas at the height of their reign before the Spanish conquest and is located in the high mountains of the Cusco region.

To plan a trip to this part of the world, the first step would be to go to a travel booking site. But there are so many!? Which one do I choose, and how do I know if they are any good? For that reason, as part of Ironhack’s challenge in a site redesign, I’ve been tasked to pick a travel booking site and conduct a heuristic evaluation on three travel sites and pick the best one to have it tested for its usability among 3 users.

User Type & Scenario

For this challenge, I wanted to choose world travelers from my age range that I know have taken similar trips before. For that reason, my target users were of the following user type.

Worldtrotter, Backpacker — 18–38 y/o (1)
You’ve decided to finally go visit that wonder that has been sitting in your dreams for a long time now. Yo 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.

Photo by Dmitrii Vaccinium on Unsplash

Details about User Persona

When researching my target users, which primarily are my friends, our conversation revealed that we had many things in common when it comes to travel experience. Falling in the group of Millennials & Xennials, the actual backpacking experience was more important than a fancy hotel or a luxurious ride to the destination.

For that reason, it was important to focus on the budget of the travel and on accommodations that were accessible and backpacker friendly. In addition, capturing the experience and sharing it on social media was also important.

Mobile Device Preference

Given the fact that the smartphone will be their most important companion, most if not all the travel information should be accessible on the device, which makes the booking experience on the mobile platform crucial because it eliminates the step from having to transfer the travel plans from your laptop to your smartphone.

Photo by Clem Onojeghuo on Unsplash

Trip Details

To travel to Machu Picchu, I had to research which was the closest airport. Technically, that would be Cuzco in Southern Peru, for simplicity and later user testing, I’ve only chosen the destination to be Lima, Peru, which is the capital and the international gateway to the world. From Lima one could take a local flight or other forms of transportation to get to the destination.

  • Destination:
    Machu Picchu
  • Nearest / Airport:
    Lima, Peru
  • Currency and exchange from your currency:
    Sol (1 EUR = 4.40 Sol)
  • Vaccinations:
    Hepatitis A, hepatitis B, typhoid, yellow fever, rabies, meningitis, polio, measles, mumps and rubella (MMR), Tdap (tetanus, diphtheria and pertussis), chickenpox, shingles, pneumonia and influenza.
  • Visa:
    From Germany, you don’t need a visa if you stay as a tourist for 90 days or less. Your passport needs to be valid beyond 6 months from the day of arrival.
  • Wardrobe recommendations:
    Functional clothing for trekking and backpacking. Water resistant jackets and shoes in case of wet weather. Breathable hiking gear (e.g. hiking pants, long-sleeves, etc.)
  • Day needed to visit attraction:
    Minimum 5 days, 2 days of international travel (round trip), 2 days to explore Machu Picchu, 1 day to acclimate. Preferred would be 10 days.

After having figured out the trip’s details, I went on to try some travel booking apps. My preferred booking app has always been Google Flights, but for this exercise I looked at the following apps.

Travel booking apps Trip Advisor, Skyscanner, and Kayak.

Benchmarking

To compare the travel booking apps I’ve conducted Usability Heuristics evaluation using Nielsen’s Principles. These principles look at the overall look and feel and functionality of the app using ten principles described below.

Nielsen’s Usability Heuristics for Interface Design

To keep it simple, I’ve looked at which sites did a good job in the heuristic rubric and which didn’t. So, I evaluated them on good vs. bad. I’m sure there are levels of implementation for a more detailed evaluation, but I think that would take a deep dive into the site’s functionality. If I wasn’t sure whether a heuristic evaluation was neither good nor bad, I left it blank and added “not sure.”

Usability Heuristic Evaluation

Grading my experience evaluating travel booking sites on mobile

Although Kayak overall did better than Tripadvisor, I opted to give Tripadvisor a shot to evaluate it further because it’s also an application I’ve never used but a brand that I’ve always heard about. I also wanted to see if creating a trip feature would help in the overall process of booking the flight and hotel.

Testing with Users

Before starting with the usability test, I’ve told the users to take the 5-second quick evaluation test of the home page for the Tripadvisor site. Then I asked them what they thought they saw and what the site is all about.

Tester 1:

“I think it’s a travel site but not sure, there is a search field to search for stuff but not sure what I can enter there.”

Tester 2:

“Something about trips. Can I search for trips?”

Tester 3:

“A site to search for a destination? Can I book a flight or something?”

All testers had the same reaction that I had, which was the fact that yes, I was looking at some sort of site for trips and with a search field, but it wasn’t exactly clear what you can actually do there because the design was so minimalistic and too much focus was given to illustrations.

Problem 1:

No clarity as to what to do when first accessing site

The only informative thing you see, is the “Hotels” and “Vacation Rentals” button. You don’t see anything about flights or even planing a trip.

Also, what does “Find the good out there” really mean? How does it explain what Tripadvisor does? Maybe that’s only one functionality of the app?

Conducting Usability Tests

For the actual usability tests, I’ve made the user go through two task flows. The first one is telling them that they are booking a trip to see Machu Picchu, and they need to book a flight and accommodation. For simplicity, I told them to book a flight from their hometown to Lima, Peru (LIM).

So, I’ve presented them with the mobile version of Tripadvisor and started recording their interactions. Below you can find one video showing the struggle to get this simple task done.

Usability Test: Booking a Flight

Video showing task flow for booking flight to trip on Tripadvisor App

As you can see, it took a lot of time, lots of scrolling, lots of back and forth, to figure out how to complete this task of “booking a flight.” I think Tripadvisor made it more complicated by offering “the create a trip” feature, but not adding to the flow by offering a way to quickly add a flight to that trip.

The overall experience was confusing as the users complained how unclear it was as to where exactly to book the flight. What added to the confusion was a cluttered screen with unnecessary side information that made distracting.

Usability Test: Booking a Hotel

Booking a hotel was actually more straightforward because it was a visible button you could hit and go from there. From left to right, once you search for your destination and hit “Hotels” you end up here, and then it’s a straightforward way to book, but the overall interface is cluttered with too much information and advertising.

Problem 2:

It was hard to combine the experience of booking a flight and a hotel for your trip. The two task flows are quite different and the starting point for each is also different. This makes it harder to use the app, especially if you are a new user.

Redesign “Booking a Flight” using Wireframes

To solve the main problem of the app of not being able to book a flight quickly, I put my focus on that task flow to see if future usability testing would alleviate the current cumbersome task of flight booking. Should that be successful, I would take a closer look at the hotel booking functionality.

Figma Wireframes

Wireframe redesign of booking flight on Tripadvisor

Conclusion

Overall, I really enjoyed this exercise especially because of the user testing component. It’s often hard not to design for yourself, so to take your internal biases out, you have to let go and let others struggle with a task. During my observations and conversations with my testers, I’ve realized that there were some similar behavior in where they struggled. But sometimes it would take them longer to complete a task than what I’ve needed to do the same job. This might be because as a designer, we are used to playing around more with the user interface.

Next Steps

I hope to learn a more thorough process of going through the heuristic evaluation and have also a more structure usability testing procedure to save time with the testing and evaluation part of this challenge.

I hope I will get to travel to Machu Picchu some day, once this pandemic comes to an end and adventure travel may be allowed. Until then: Stay safe my friends!

Photo by Mukuko Studio on Unsplash

--

--

Carlos Groth

I’m a Berlin-based UX/UI Designer from California with an Engineering & Marketing background. I love solving problems and create amazing digital experiences.