ALL ROADS LEAD TO HOME
Usability Case Study: Tripadvisor
Proposing improvements to the responsive mobile website
Planning a summer vacation is no ordinary task. You’ll always have to figure out at least three things: how to get to your destination, where you’re sleeping, and what you’re going to eat. Tripadvisor is a well-known travel assistant that can take care of those — and much more — for you, it’s designed to help people in search of an easier way to plan trips. From flight tickets to excursions packages, it comes with loads of user reviews, travel advice, shopping guides, and a bunch of other cool features that will fit most travelers. They also have an awesome purpose statement that sums up the idea that traveling makes us aware of all the good in the world:
“There’s good out there.”
In this usability case study, Tripadvisor’s mobile website will be on the spot. The main goals are to:
1 - Run a heuristic analysis to uncover possible flaws for users;
2 - Interview and conduct usability tests with users to confirm bias or discover new ones;
3 - Design a solution and develop a wireframe to address the main pain points.
The scenario
The user type to be worked on was already provided in this challenge. It will be a young couple looking for a summer vacation of their dreams, with enough money saved for airline tickets and six months to plan the whole thing ahead of time. They want to get around but also have nice little moments together. The destination? Rome, the Eternal City! The capital of Italy and one of the cradles of human civilization. Home to many imposing palaces, thousand-year-old cathedrals, big monuments, statues, glorious fountains, and ancient squares, not to mention the Vatican being just by the corner. It also has a vibrant nightlife and quite a market for fashion lovers, making it one of the most visited locations in the world. No wonder it’s a UNESCO World Heritage Site. Speaking of wonder, the downtown holds one of the Seven World Wonders: The Colosseum — which will also be subjected to this study as part of two of the user tasks.
First steps
The starting point was benchmarking Kayak, Skyscanner, and Tripadvisor through a heuristic analysis to try to find usability problems, and it was quite a surprise to identify issues in them all. The mobile site is probably not their most streamlined experience, but that’s what we got for today. All in all, this was a great way to get to know the companies and visualize possible solutions from one to another.
Then I went to Tripadvisor to distill my findings.
Right off the Home screen, some things popped to my eye:
A lot of pop-ups and banners and notices to read/close, an annoying AdChoices (advertising cookie preferences) overlay that cant be closed
The weirdly long and confusing carousel menu thing
The survey dialogue box
After exhausting all features and options, I headed to interviews. To really understand what kind of people use the app, I asked the following questions to users within the provided spectrum:
#1 - How do you feel when you have to buy airline tickets?
#2 - What do you consider when choosing the dates of your ticket?
#3 - Where do you seek information about travel requirements, like visas or vaccines? Why?
#4 - What do you take into consideration when choosing your accommodation?
#5 - How do you plan your activities on your trip?
And then conducted a usability test with each of the users. They were asked to complete 3 tasks:
#1 - You and your partner are planning a dream vacation and both saved enough to buy airline tickets to Italy. Book an airline ticket to go from São Paulo to Rome in July.
#2 - Your partner always wanted to visit the Coliseum. Find accommodation in Rome that makes the Coliseum easily accessible.
#3 - Plan a special day including a visit to the Coliseum and eating at a restaurant.
With answers and recordings on hand, I grouped everything using an affinity diagram to try to find the main pain points:
Pain Points
Pain Points, problems I’m working on:
3/3 users did not find filtering options for coliseum related hotels or restaurants.
Filters were not scrolled enough to find the relevant options.
The responsiveness isn’t well executed when it comes to the filters. All it does is to take the desktop version and shove it in the mobile version as a one-column infinite drag screen. Not very helpful. It’s confusing, overwhelming.
Print desk + mobile: filters.
3/3 users experienced frustration when using the map view option
Task 1
“Flights” is not an easy to find option, not readily available. You have to scroll right all the cards (or down in the menu) until you can find it. I find it hard to believe that Tripadvisor would make the mistake of leaving the “Flights” link deep down like that without knowing it. For me, it looks like it’s intentional — a business decision — so I would not try to change it. Maybe the experience in the app is different. Either way, will not be subject to modifications.
⅔ users do not find flights quickly
⅔ users got confused at one-way and two-way flights.
⅓ users made a mistake and selected the wrong destination airport. He was shown an error, got confused, and went back. It took him a few seconds to understand what was wrong.
⅔ completed the task
Task 2
Hotel listings map option
3/3 users experienced frustration when using the map view option
⅔ went to google to find where the Coliseum is located.
⅓ users did not complete the task because the browser crashed with the loading.
⅔ users did not complete the task intentionally and went to Google to close the deal.
⅔ users did not close the survey dialogue box at the bottom of the screen.
It’s overloaded with little price icons, the “nearby places” carousel stuck to the bottom of the screen that takes half of the map. Your screen is flooded with little price flags marked down on the map. The “showing nearby places” is actually a very misleading filter. Once you click it, it opens a sidebar with checkboxes.
Task 3
⅔ users did not complete the task, went to Google instead.
⅓ users complete the task by applying filters and relying on reviews. The user chose a restaurant 7.6km away from the Colosseum.
When it got to the third task, users were already exhausted. None of them was interested in completing the task. 3/3 users expressed that if it wasn’t a test, they would’ve left the website.
Solution
Too many options and no choice makes Jack a dull boy.
When users face too many choices, it can be demotivating. According to Professor Sheena Iyengar of Columbia Business School, it’s a jam problem. In the mid-’90s, Iyengar — at the time a doctoral student at Stanford — conducted an experiment at a grocery store with 24 flavors of jam, that would challenge the number of choices vs. purchase rate. In the end, they found out that even though more choices may attract more people, when it comes down to actually making the choice, they are more likely to purchase when they see fewer options.
“As both the number of options and the information about options increases, people tend to consider fewer choices and to process a smaller fraction of the overall information available regarding their choices.”
Iyengar, Sheena, and Mark R. Lepper. “When Choice Is Demotivating: Can One Desire Too Much of a Good Thing?” Journal of Personality and Social Psychology 79, no. 6 (December 2000): 995–1006.
Three things might happen when a user is presented with too many options: they are more likely to delay making a choice; they make worse choices for themselves; they are more likely to choose things that they are less satisfied with (less confident they made the “best choice”).
Our human capacity for processing information will handle from five to nine different colors, words, flavors, concepts. If you’re not an expert on the given subject or matter, beyond and about seven, plus or minus two options, the information starts to crumble away. So I tried to bring this principle into the design.
How can I make this a great choosing experience? By giving the user confidence, so it can trust and enjoy their choices. It should be fun, right? Picking your stay at the Eternal City to see the Coliseum, finding a sweet spot for dinner for two.
I started by cutting off redundant information, categorizing it to help people break them apart, and conditioning the user to gradually understand the options.
Get rid of “Sort” when in map view and the “Showing nearby places” pill.
Improve the filtering experience, brake down the filter into recognizable categories
Take the user onboard by presenting fewer price flags at first, adding more zoom to the map.
Add relevant points of interest to help users locate themselves
Aggregate price flags by region or district: a simple outlines region overlay
How could I preserve the stakeholders' interest without manipulating the user to getting not what they wanted? How can I make this a beneficial, mutual relationship between the business (the choice provider) and the user (the chooser)?
Rethink the map view
My first thought was to try to reduce the amount of clutter on the screen.
Rethink the filtering options and filter view
Future ideas
Map explorer: Why not give the map the spotlight? It could be a very interesting feature to have users explore their destinations by map.
