Usability Test and Site Redesign for mobile — Tripadvisor Case Study

Ironhack’s Prework: Challenge Usability Evaluation and Site Redesign

from Anna-Zsófia Csontos’s blog post

This document is only being used for educational purposes. The task is to create a Usability Report and Site Redesign Prototype for a specific mobile web version application.

Usability Testing is an essential step on any designer’s path. Testing an application to understand if the product built is convenient to use and easy to learn is what today should be a daily task. Not only the user appreciates it but also generates time and costs saving and other resources for any type of business.

Goals for this Case Study:

  • Identify a specific user type (persona) / scenario that regularly uses mobile trip planning apps for any type of destination.
  • Benchmark 3 mobile websites from the same type of business by applying Usability Heuristics evaluations with Nielsen’s Principles and select the one that best performs for my selected user type / scenario.
  • Conduct usability tests with 3 users to perform my given tasks / scenarios within the selected application.
  • Gather insights / findings and elaborate a plan to improve the most common pain points and frictions given by the users.
  • Address the improvements through a Mid-Fidelity Prototype.

User Type:

First, I needed to determine the personas that use trip planning apps.
This helps on the overall design process / thinking as they’re the ones who actually use the product.

Behind the scenes, you should always tell yourself:

“I’m not the user of the product I’m creating and evaluating”

They are! Therefore, after carefully researching the reviews within some travelling applications I decided to go for the following type of audience:

A “young group” between 20–40 y/o.

  • Decided to invest and spend some quality time together.
  • That like to plan at least everything with one year in advance to ensure and accommodate everybody’s schedules and needs.
  • Interested in culture and leisure.
  • Conscious about prices but willing to spoil themselves all the way.

User’s type destination:

rio de janeiro, city view from Cristo Redentor (Christ the Redeemer).

The main destination I designated for the European “young group” is Brazil, Rio de Janeiro. It will be a trip of 15 days (~2 weeks) where all the attractions can be visited in less than a week.

Current currency in Brasil is the Real and at the moment there’s no need for VISA, neither there’s a COVID 19 quarantine requirement at the moment.

Brasil’s weather is quite stable and sunny most of the times. If spring/summer is an option, then clothes should be as light as possible, otherwise we need suitable clothes for heavy tropical raining.

Benchmarking

The only way you can make your business succeed is to learn from your most direct competence.

I decided to scan and compare 3 different mobile web applications that are also commonly used amongst trip planner users and conducted Usability Heuristics evaluations with Nielsen’s Principles to determine the one that best scored.

The one that best performed would be the winner and the subject to continue my use case. The selected apps were Kayak, Skyscanner and Tripadvisor.

Having in mind Nielsen’s 10 Heuristic Usability Principles:

I got the following results:

As you may have noticed already at this point, specifically through the title of this post, the “winner” was actually Tripadvisor.

Why? Even though Kayak scored better — the usability and UI is more intuitive, familiar and easy to learn — the one that actually offered the specific experience I was looking for — young group that wants to spend quality time and plan fun activities together collaborativelyis Tripadvisor.

Not only that. Tripadvisor offered also quite other nice features that were a requirement to organise a nice group trip. Overview on other user reviews about restaurants, attractions, hotels, excursions and others. Where actually the others were only about booking flights, hotels and cars.

I did find some pain points and frictions in Tripadvisor while I was conducting the initial usability test on their mobile website application. However, and to keep the scope of this project, I will only focus on the pain points described by the users I interviewed below while interacting with Tripadvisor.

Some quick context on Tripadvisor’s history and business:

TripAdvisor is one of the world’s largest travel platform that helps millions of travellers make every trip their best trip.

Although TripAdvisor is nowadays one of the biggest social media review sites for trips, Stephen Kaufer (CEO) mentioned that this wasn’t the original idea when he founded it 20 years ago:

“We started as a site where we were focused more on those official words from guidebooks or newspapers or magazines. We also had a button in the very beginning that said, ‘Visitors add your own review’, and boy, did that just take off.”

Testing

I would say, this was the most surprising phase of the whole process.
It was incredible to see live 3 users within the same user type I previously selected and realise how different they handled the user experience within Tripadvisor through the tasks / questions I delivered.

The users I’ve selected are between the ages of 25 and 40 and have already travelled abroad, extensively.

Let’s look in detail on the overall process:

1st — I used the 5-second method. It allows each user to have a look & feel during only 5 seconds at a specific image (Tripadvisor’s homepage) and answer 3 questions afterwards:

  • What did you see?
  • What can this tool do for you?
  • Where would you search for a flight?

2nd — I created a specific task where each user would need to execute within Tripadvisor’s mobile website and narrate their actions. No time limit here btw. Here’s the delivered task:

You want to take a trip with your closest friends this year to Rio Janeiro for 15 days. Using TripAdvisor ( https://www.tripadvisor.com/ ), how would you create a trip to Rio and invite a friend to add ideas to that trip?

I also made some follow up questions about their experience:

  • Anything really confusing you saw?
  • Were you expecting something else or other ways to reach your goal?
  • Do you like / missed any features?

The answers were really insightful and helpful.

Insights / Redesigns

By using the 5-second method on Tripadvisor’s mobile homepage I got the following results:

5-second test results
  • Different nationalities, different mobile devices.
  • They all recognised it was Tripadvisor or a similar search trip planner site.
  • They all knew that it is a platform that helps you search and plan for travels, accommodations, city trips, restaurants, etc.
  • They all knew that to search for a flight you would need to go into the search bar, except for one, which was unable to detect that option within the 5-second time.

The assigned task plan a trip to rio for 15 days and allow your friends to add ideas into it — delivered me some really good visual and narrated feedback on how Tripadvisor could perform better to allow this task to be executed smoothly and flawlessly in the future.

After laying out their actions / routes into MIRO I started to add my conclusions and found 2 major pain points that could be addressed easily.

MIRO board for laying out users actions / feelings

PAIN POINT 1:

Within the edit the trip view no user was able to add a friend properly:

pain point 1

Not only that. One of my initial observations, if you would click any of the generated links from both UI’s that would lead you into a screen to register and not a specific page to have somehow a bit of information about what it is exactly, eg. — “Hello there. Your friend {username}, invited you to a trip to Brasil within these dates {xxx} so you could also edit the plan by adding more things to it. Check it out.

Solution:

Currently the add a friend icon (+) is not as intuitive and clear as Tripadvisor’s expects. It is also not a most wanted feature by the community according to the user inputs from the interviews.

You can have the perfect feature (utility). But if it is not usable / reachable then it already fails (usability).

Changes were done at a UI / UX level and a Copy level. Through UI / UX I opted to change the hierarchy of the feature to below the description, changed the + icon to a clear and understandable one, a user with a plus sign. I also added a label on the right which would emphasise the call to action.

To ensure that the user would understand the differences between the add a friend feature and share the trip one I also added a label on the right of the share icon. No need to change the icon as it is already universal and familiar within digital.

ui and copy improvements

PAIN POINT 2:

Two of the three users had really issues and frustration to locate the edit the trip page.

When you create a trip by giving it a name and determine if it is public or private you land into a Listing Page, like the one below. Those users believed that by tapping the create the trip call-to-action, they would eventually reach the trip they just created.

create a trip page (left) - trip listing page (right)

And instead they ended up creating a new trip again.

Solution:

A simple user journey flow correction would simplify it.
When a user creates a trip it will immediately land on the detail page, the edit the trip page. That way, the user will understand that a trip was created and that it is now possible to starting editing its details.

new user flow to reach the edit the trip page

Conclusions

When doing usability tests and site redesigns there will always be room for any improvements. The mindset is to keep testing and validating daily our actions and design decisions.

I’m Rocio. A UX | UI Interaction Designer with a user centric approach to solve problems. https://www.rocioalbertos.com/