UX/UI Case Study — Improving Trip Advisor Application

Brief

I am about to start my Ironhack UX/UI bootcamp and I am getting myself ready with some pre-tasks. This is the first study case assignment I did, so I am a bit nervous to publish it, but at the same time I found the task very exciting! The task was about the usability evaluations and site redesign.

The theme for the task was travel applications and I chose to use TripAdvisor in this practice. The main goal was to do usability testing to understand how TripAdvisor could get even better so that people could use it more easily to travel around the world. In this article I’ll lead you through the whole process starting from the overview, continuing to the research process and giving the prototype suggestions in the end.

Overview

User type

In this task I was given options of already created user types. I selected to use the group of 20–40 years old Young Couples. The scenario was prepared in the following way:

“You and your partner decide to go to a special place next summer. You realize you have both saved enough for the tickets and are planning to save as much as possible for the next 6 months to do this trip. You want to be efficient and have everything you need organized to enjoy at 100% while there. Even if you’re young, you want to have special moments to celebrate being together.”

TripAdvisor application

My main goal was to redesign some features of a travel application. I was given four options of which I did some benchmarking and comparing to find the most suitable app for my selected user type. I used the Usability evaluation of Nielsen’s Principles on the background and it helped me to focus on the main features on the apps.

I selected TripAdvisor, because my user type, young couples, wanted to plan everything beforehand and by this application they could choose everything from flights, accommodation, trips and tours to vacation rentals and restaurant. This American company was founded in 2000 and nowadays it’s used worldwide. TripAdvisor is the largest travel platform where you can read hundreds of million of travel reviews but also compare prices, book hotels, flights, vacation rentals and find famous attractions and reviewed restaurants of the chosen destination.

Extra theme for the task

The assignment included some extra feature I needed to take in count: The couple should plan a trip to one of the seven miracles in the world by using TripAdvisor. The miracle I chose was the Taj Mahal, an ivory-white marble mausoleum in New Delhi, India. I chose this destination, because I thought it’s not very familiar for the users and in that case, without any background information, users need to find from TripAdvisor all the information they need.

The Case Study Process

Background research

For the test, I made some background research about the destination in order to use the create the testing situation as realistic as possible. The information about the nearest airports, how long flights would take and how far the Taj Mahal is from the central New Delhi, helped me to think about the background story for the task; How long trip I could ask the users to plan — is a day trip possible to Taj Mahal and for how long they should spend in India. Also, the budget needed to be realistic.

User testing

Main Goal: The main goal was to do usability testing to find the pain points users had while completing the task in order to understand how TripAdvisor could get even better so that people could use it more easily to travel around the world.

Test group: I tested 5 users who matched the user type of young couples.

Techniques: The test consisted of a task I gave the users to complete with TripAdvisor and a short interview. I used both techniques to get the whole picture of what users do, what do they think about it and if there are any mismatches between those two. The test took 30–50 minutes per person.

Main findings: Even if most of the users were able to complete the task, the main problem was the filters. The users either didn’t find them or were not pleased with how they worked. Also, it seems that users don’t really want to use the app to look for flights or hotels.

For me, it’s essential to have a clear idea and to create guidelines for the test before putting it in practice. Having a clear, organised structure in my head, enables me to focus on the main goals and on the interviewee during the test. Also, well created guidelines make sure that the user-testing is measuring exactly what it should and that every part of the test has a purpose and is well designed. Here you can get a closer look to the guidelines I had in this case study.

The structure of the test

In this case study, I created a usability test which consisted of three different parts:

1. Look & Feel
2. Trip planning task
3. Short interview

Let’s have a closer look what are the different sections about:

1. Look and feel

The users had 5 seconds to take a look at the home screen of the application I was testing. After the given 5 seconds, I covered the screen and asked them:

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

The purpose is to have an idea what is the users’ first impression of the application and what are the eye-catchers on the first screen.

2. Trip planning task

In order to do research about TripApdvisor usability and to find the pain points users have while using it, I decided to make them to plan a whole trip to New Delhi. I created a background story based on the background research I did about the destination and the user group I had:

“You guys have always wanted to go to India to see one of the 7th miracles Taj Mahal. This Autumn you decided that it is time to make your dreams come true and you have planned to go there for a one week next summer. Your holiday dates are confirmed and it’s time to start to plan the trip. You wrote in Google “flights to India” and the TripAdvisor was the option you decided to click first.

TASK: Plan your trip with the TripAdvisor application. Your destination is New Delhi and you’ll be there one week. The attraction you want to see is around two hour drive from New Delhi. You have been saving a long time and your budget is around 2000€ to plan the trip.

Search for the trip:

1. Look for the flights

2. Search the best accommodations for you two

3. Plan your day trip to the Taj Mahal

Remember the budget and schedule for your holidays!

Making the topic familiar is important because otherwise, the task ends up abstract and might not give very good results. For that reason, I decided to print a big picture of the destination we are going to use in the test. Also, I was a bit worried if there is too much information for the users to remember in the task and I decided to use a memory trick to help them to remember the main components “the budget”, “the time for the trip” and “the destination”. I print and cut those components and add them one by one different places on the picture so it might help the users to remember them during the task.

Before the task, I asked for permission to record the screen of the phone while the users were completing the task. Recordings helped a lot to review, how the users were behaving with the application. Also, in the beginning of the whole test, I clarified that the people themselves won’t be evaluated in any kind of way and there are no wrong answers or wrong ways to complete the task. It was important that the interviewees knew that the application is the main focus.

3. A short interview

I decided to add a short interview at the end of the task in order to get more details about the experience the user had while using the app:

• “Free comments about your experience with the app and the task?”
• “How would you describe the Trip Advisor as an application?”
• “Was something difficult or confusing?”
• “What was easy and worked well?”
• “For what would you use this app?”

Straight after the users completed the task, it’s a good time for a few questions, because everything is fresh in memory. First, I gave a chance for free comments because they give a chance for users to bring out the first impression of the task and the app. Also, I asked what the users found confusing and difficult and compared it to the pain points the users had while using the app. Comparing the acts and the words together can give essential information. Also, the short interview in the end gives a possibility to ask about something you can’t find out during the test. For example how did the users like the look of the app and how did it feel to use it.

The Analyzing Process

What did I analyze?

1. What did users see during the Look & Feel task
2. Which were the pain points during the Trip Planning task? Comments and clicks!
3. What did users tell in the interview? Did it match with recorded pain points?

How did I analyze it?

I like to use colour markers when I want to find similarities from the data I have. That wouldn’t be possible with bigger data but with these few users it worked well. I highlighted with the same colours the same kind of answers of the interviews and also my own notes I made while watching the recordings.

I watched recordings several times and made my own notes. I focused on the user flows the users had when searching for flights, accommodation and a day trip. Especially I wanted to figure out the pain points users had during the task.

Usually the pain points came out when the user got stuck with something, like clicking several times an icon that didn’t respond or stopping for a longer time just to look what options the screen shows at the moment. Also users comments gave a lot of information on what is confusing and what they didn’t understand.

After I went through all the answers, I summed the main topics I had found and wrote them down to the post-it notes in order to make clear categories. In this point, if I found still very similar topics, I was able to change them to the same category. Groups helped me to find the main issues that came out during the tests and I was able to pick them for a closer look and start to redesign those features of the app.

Findings And Solutions

After user testing and analysing the results of the interviews and the video recordings, I decided to concentrate on 3 aspects of TripAdvisor

• Creating filters for Things to do — category
• Making filters, price and travel companies more visible when user is searching for flights
• Relocating the filters and the map to a more visible place when user is searching for an accommodation

1. Creating filters for Things to Do

Based on user testing results, users had difficulties to sort and find attractions that fulfilled their requirements

Pain points:

• Users found easily the icon for “Things to do” from the first page. The problems came out on the next page, where appears options for attractions and tours:

1. Users were mostly confused by the headings which they didn’t found out very informative. Also, the application gave attractions and tours in a random order and that caused confusion.
2. Nobody in the test used the calendar that was placed on the top or the page and in the end when users found a suitable trip, the trip might not have been available for the days they were looking for. There was no possibility to use any other filters.

• Users liked the pictures, but they thought there were too many of them and it made the page look a bit messy.
• Usually they would use blogs and other travellers’ stories to get ideas for their own trips but they didn’t find that kind of feature from the app.

Solution: Create filters

In the current version, the user chooses a destination and selects the “Things to do” from the categories (Screens 1 and 2). That directs the users to a page where all the “Things to do” options where shown in different and random categories (Page 3). The calendar was seldom seen by users and the page included lots of pictures.

In the new version, the 3rd page will include more filters which will help the users to look for options for specific dates. Because the “Where to?” seemed to be an eye-catcher on the app’s first page, I’ll use the same idea for this page but I the heading is “What to do?”. Also, I decided to leave some examples to offer a quick access to top attractions and travellers’ stories. At the same time, it fulfills the users’ wishes of having little bit less photos and to be able to read other peoples’ experiences in the destination. The look of the page is also more consistent with other pages of flights and accommodation.

Click “What to do”

In the new version when the users clicks “What to do”, user can select from given categories what kind of trips he/she would like to search for. Below it, there is a calendar to look for dates, a box for selecting the number of guests and an icon for a filters to sort the options even more.

Click “Filters”

The filters includes a price range, time of the day travellers would like to have the trip, language option and other amenities.

Click “Search”

After selecting the filters, user presses the Search button and there will appear the options with the same headings that they were chosen from the list “What to do”. That brings consistency and the users know what to look for.

2. Clarifying the details of the flights

This case study brought out clearly that users were not used to book flights with TripAdvisor. According to the results of the tests and interviews, there are few main issues with filters during the users flow when users search flights:

Pain points:

• Users found easily the flights icon and how to search for flights. The pain point seemed to be when the page was downloading the search results and:

1. The user wanted to add filters but it didn’t work before the downloading was ready.
2. The user didn’t see the filters at all but was wanting to sort the flights somehow.
3. If the filters were found, the user wasn’t satisfied with the options the filters had or how they worked.

• The application took the users to another website of a travel company to buy the tickets. This caused dissatisfaction to every user. It seemed that every interviewee had their own strong preferences where they would like to search for flights and to buy the tickets. That brought distrust towards the app and caused confusion. None of the users realised that there was an option to select, from which travel company he/she would like to look for the offers of flights.

Solution #1: Make the filters and the price of the flights more visible

Users had difficulties to find filters when they were looking for flights. In the current user flow, the user needs to choose first dates for flight, airports and a number of passengers. After that the website downloads all the existing options. The problem was that the user can click the filters to start to sort results only when all the flight options were downloaded. Confusing was that the user was able to modify the flights and dates during the downloading process, but not the filters. That brought a problem that the users tried to click the filters’ icon many times during the downloading and gave up in the end because they thought the icon didn’t work.

Users can modify the flights but not use the filters. Also the price doesn’t indicate for how many people it is.

The problem is that the filters are quite hidden and they don’t work before the downloading is ready. After a few useless tries and clicks, the user usually gave up and didn’t use it at all. While the filter button is of a decent size, it was not very useful.

The solution is to make a bigger downloading bar and to make all the selection bars fade out behind during the downloading process. In that way the user understands that he/she needs to wait downloading before starting to use filters or to modify the flights. Also, the icon of the filters is bigger. When the downloading is ready, the colours will appear stronger.

As a small addition: The users were confused by the price because theydidn’t know for how many people it is. For that reason, I added a sign to clarify it.

The screen fades out the selection bars and filters while downloading search results.

Solution #2: Make travel companies more visible

Each of the users were confused when the application directed them to another website of a travel company to buy the tickets. It gave a feeling that TripAdvisor is not reliable because it takes them to to buy the tickets from the page they didn’t select by themselves. They would have liked to seen to which travel company’s website they will be directed.

The problem was that users didn’t see that there was an option to check which travel company is offering the deal for the flight. User had even a possibility to choose which company’s offer they are interested in. Also, the chance to lock the price for 2 weeks caused confusion because it wasn’t informative enough.

It seemed that the travel company was a big matter to the users and for that reason I decided to make the options of the different deals more visible. I add more examples of the deals on the page so users realises that there are many of them and that they are from different flight companies. Also, I specified that a customer can lock the price for 2 weeks with some extra cost.

Deals of the companies are more visible.

Because the fact that the users are not able to buy the tickets from Trip Advisor application itself caused dissatisfaction in every user, one and a bit radical option could be not have that feature at all in the app. If that is not the case, the suggestion is to modify the filters so that the users can choose the flight company they want to use.

3. Relocating filters for accommodations

In the last section I concentrate on the accommodation and the filters to sort the options.

Pain points:

• Users didn’t see where the filters were
• Users wanted to have a map to see the locations but they didn’t find it either
• Filters and map where located very low on the screen whereas the filters were on the top of the screen in flights

Solution: Relocate the filters and the map better

In the new version, all the filters and the map are located to the same place so they are more visible. Users can choose the dates, number of guests and rooms and now also to select filters and look places from the map. Also, the addition of this section with the selection bars, is now consistent with the flight and “things to do” searches.

All the selection bars and filters are at the same place.

Below are located few suggestions of Top hotels and Best reviews of accommodations. In the new version there are not as many suggestions as before, because users felt there were too many of them and it made the users scroll the screen too long. When they had all the information that is needed, they can start looking for options by clicking “Find accommodations”.

Ideas for the future

In this task I did some suggestions on how to improve the TripAdvisor application based on the information I gathered in user testing. I decided to concentrate on the filters and to make them more visible so that users would find them faster and it will make the app easier to use. In the future I would concentrate on the content of the filters.

What did I learn?

• The structure, how to make a case study become familiar.
• I became more fluent with the Sketch program.
• In this case I had only 5 users and for that reason I did the analysis different that I would have done with a bigger user group. In the future I need to concentrate more on that section.
• I found it hard to recognise and find different fonts and to find a proper one for the app I redesigned.
• I learned about writing a case study, but I there is still a lot to learn how to sum up the main ideas.