Site redesign: Tripadvisor

Juliana Felippe
8 min readOct 2, 2020

--

Conduct a usability case study to understand how travel website can be
improved. Creating a better journey site for a business, enhancing the travel experience for users.

PROJETC GOALS

  • empathize with the user(s) by creating a user persona.
  • conduct a usability heuristic evaluation, to think through the possible outcomes quickly and arrive at a solution that will work for your unique problem.
  • conduct a benchmarking process
  • perform usability tests of the site, observing user(s) pain points.
  • propose changes in lo-fi wireframes to resolve major pain points.
  • Using Figma create mid-fi wireframes

WHY TRIPADVISOR?

I decided to choose the TripAdvisor app because it makes it possible to plan most travel needs in one place: book flights, hotels, attraction tickets, car rentals and more. Although the app had many great features, there were a few issues caught my attention. The filter page (Image 1) for example, appeared to be not being used efficiently. Interviews and testing were done to clarify some pain points.

Image 1: Filter page. List with many options, without much contrast and spacing can overload the user.

1. USER PERSONA + research

First is needed to understand who is the human you are designing for. The reviews of the site, helped me improve persona creation a realistic persona that reflected this user-type.

Brasilian family w/ 2 children (10y, 3y).
Mauro, 34y | engineer
Cintia, 40y | architect

Next year family vacation is going to be BIG. We go take our children to know all the world’s wonders. The chosen destination by everyone traveler of home was Rome, in Italy, to visit the Coliseum and much more (Image 2). The departure flight will take place in the Airport of Montreal (YMQ) heading to the Roma-Fiumicino Aiport (FCO). Italian currency is the Euro (€), and 1 dollar canadian = 0.64 cents in average.

Because our children have different needs and cannot keep up with only doing tourism, we will go for a good place to stay and relax. I assumed this is going to be quite an expense but i had looking for opportunities if there would be any.

There is no need for a visa for brazilian people (until 90 days), and vaccination is not mandatory. From 7 to 10 days it would be necessary to get to Rome (if you have a very complete itinerary). However, a wide weekend would also be enough to know at least 2 or 3 of the most famous places.

Image 2: Photo by Photoholgic on Unsplash

Frustrations

Mauro and Cintia´s been saving for a year, so there’s a lot of preasure on his to make it an unforgettable trip;
There’s a lot for Roma tour out there so he wants to make sure he picks the best one for their budget and family;

2. BENCHMARKING

Heuristic evaluation
It was Conduced Usability Heuristics Evaluation from Nielsens´s Principles comparing three travel sites for my selected user type/scenario. Foram eles Kayak, Skyscanner and Tripadvisor.

In general, all the sites presented a medium “visibility of system status”, a good “match between system and the real world” and “consistency and standards”. There is a common level of consistency and standards noticed among all three apps, this might be referred to the nature of the industry it self where it’s required by law to provide sufficient amount and kind of information. When the principle is “Aesthetic and minimalist design”, I would say that all three needs improvement. But Tripadvisor is behind Kayak and Skyscanner, mainly because it displays a lot of information (text + images), which also break the “flexibility and efficiency of use” rule.

“Recognition better than recall” haved issues. In the three sites when you select a date and how many passangers for a trip, the same data is not automatically selected if later on you want do book a hotel. The three sites a little failed the “Error Prevention” principle in one situation.

3. INTERVIEWS AND TESTING

I recruited four participants, aged 30–35, to conduct a 5-second test, task scenario, and interview.

» 5-second test
First, I ran a 5-second test to understand how well TripAdvisor’s design quickly communicated a message. I showed an image of the homepage for 5-seconds then I asked a series of questions. The results are in the image 3, 4.

Image 3 and image 4: 5-sec results.

» task scenario
I provided users with two tasks and asked them to talk through their process. I used the video call (Google Meet) to record the screens and audio of my participants and provide a survey after. At the end of the test, I interviewed the participants about what they liked and didn’t like about the experience.

task 1
Go to tripadvisor site and select a Rome flight for 2 adults and 2 kids.
Requirements:
* 7 days travel
* 5 star rating
* at least 50 ratigns
*price: no worries

task 2
After booking the flight, research a good acommodation for your family in the city center.

USER FEEDBACKS

“ How can I buy the ticket? going to a cart?”

“Too much information leaves me lost (…) after that, I didn’t even want
to buy here”

“Why did the number of people and children change when I switched to the
hotel search page?”

“Is it in my currency?”

“ It is important to know what other people think of the service”

4. INSIGHTS

To find the main pain points of my users when using the site, I created a affinity mapping (Image 4). I wrote down the key findings I took note of during the interviews and separated the answers by themes (usability, tourist experience and behavior).

Image 4,5 and 6: Affinity mapping.

PAIN POINTS

A. The user gets lost on the site if he needs to do more than one action. For example: book a flight and book accommodation;
B. Users do not seem to notice the existence of the filter and leave the filter at default. Until the moment they need to look for specific information, and then they go exploring the whole site to know where to find it;
C. Users feel cheated when the first search price is “x” and then at checkout it is “x + y”;
D.Users are surprised by re-directed to another third party page to purchase the flights, without warning;
E. No information displayed about the distance between the hotel and the points of interest;
F. The search data is not recorded when you leave the flight search and go to the hotel search.

6. REDESIGN WIREFRAMES

Sheena Iyengar in her TED talk on “How to make choosing easier”, talks about how people make a huge amount of decisions over the course of a normal day. And as in half of them (50% of decisions), we don’t think very deeply. We choose not to choose.The most important is that it demonstrates from cases that the overload of choices in grocery stores, car sites, among others (such as a travel research site) directly affects the user’s choice, even if they are serious decisions. One of the techniques she teaches is to cut items, ensuring that there is not only an improvement in the choice experience, but an increase in sales. For example, when Proctor and Gamble went from 26 different types of Head & SHoulders shampoo to 15, there was a 10% increase in sales.

Image 7: Choice overload. Image 8: important item hidden at the bottom of the page. (UX CHECK).

I’ve decided to focus in four problems:

  1. Not being able to search for more than one option at the same time, such as “Flight” and “Hotel”;
  2. Choice overload;
  3. The difficulty of finding details about the flight;
  4. The lack of support in certain actions that surprise the user, such as moving to a partner site to finalize the purchase;

In general, my objective was to minimalist design without cutting too much content. To cut content effectively, it would be necessary to better understand the company’s goals.

Image 8, 9: Mid-fi wireframes.

A “Promotion” feature was created, which allows the sides of the website to be used for useful information to the user, without having to overload the page with advertising images. “Recent search” and “My travels” were features that were also suggested for easier access later, either from searches already made or from future travel tickets. Last but not least, the “Currency”, which used to be at the bottom of the site, is now more in evidence.

Image 9,10: Mid-fi wireframes

Link for prototype here.

A. To search for flights and hotels, simply click on these two buttons separately.
B. After that, adjust the currency to Canadian dollars.
C. Click Ok.
D. Upon returning to the home page, after completing the forms, you are able to click on «Let’s plan»
E. On the results page, you can see which step is in the process and now you have more options to customize your flight.
F. After selecting “Preference for your flight”, it is still possible to select the results by price (from lowest to highest, or other) and by the type of flight class.
The flight information is now more visible, and the price adjusted for the initial search.

7. CONCLUSION

This challenge is one of the last one of the prework for Ironhack’s bootcamp. In my opinion, it was been the most challenging and the one I have taken more time to complete, because now i have some many more knowlegmente to ponder. After research, spend a lot of paper and penmaking many changes, I completed the task with even more certainty that this is the profession I want to have. If I had more time, I would continue to develop the hotel search page, which would have a layout very similar to the flight results page. The change would be in the “preferences for your hotel” options.

--

--

Juliana Felippe
Juliana Felippe

Written by Juliana Felippe

Graduated in Visual Communication and with background from her other life as a scientist, Juliana is changing careers: UX / UI design student at Ironhack.

No responses yet