Colosseum in Rome /©Mathew Schwartz

Tripadvisor and Family vacation

This could be a match!

10 min readMar 12, 2021

--

For my last IronHack Pre-Work challenge, I had to choose one of 4 travel apps for a specific user type and then test the app in order to figure out ways to improve the user experience for this specific target group.

User Type

Scenario for my redesign

Because I do not have kids I decided to examine this user type and even conducted a multiple-choice survey to help understand the needs of a family when being on vacation.
In addition I had to choose one destination out of the “7 wonders of the millennium”. In my survey the majority stated that their next vacation would be within Europe, so I have decided on the capital of Italy: Rome.

“Where would you like to go for you next vacation with your Family?”

In order to brief my interviewees later on, I needed to find out some general information about Italy.

Airport: Rome-Fiumicino or Rome-Ciampino

Currency: Euro

Visa: is not required for EU-citizens

Vaccines: The PHAC and WHO recommend the following vaccinations for Italy: Hepatitis A and measles

Wardrobe recommendations: It is going to be hot! July is a tropical summer month in Rome, with average temperature ranging between min 18°C (64.4°F) and max 30.3°C (86.5°F).
It is also the month with the least rainfall. So no need to pack an umbrella or a sweater.

Days needed to visit attraction: 5 days are quite enough to enjoy all the main attractions in Rome. Going as a family 5–7 days should be fine. The Italian capital has so much to offer and you'll never get bored.

Benchmarking

Now it is time for me to compare 4 travel apps and perform Nielsen's Usability Heuristics Evaluation for at least three of these apps to identified the one that performs better for my selected user.

Travelapps Tripadvisor, Kayak, Skyscanner, Hopper

From the pool of 4 apps: Kayak, Skyscanner, Tripadvisor and Hopper — I found Hopper the least convincing app for my user even though the playful interface seemed to be easy in use. But it was actually not: Hopper uses some confusing terms like “carrot-cash” and “unlock-deals” which made it seem more like a gaming app. In addition to that, it is not possible to set a different language than English, which might intimidate non-native speaker to use the app and eventually book a flight. Rome has two airports but Hopper only displayed a small range of rather expensive flights and omit the low-cost airlines like Ryanair. Based on my survey all of the families preferred staying at an apartment rather than a hotel. Hopper only offers Hotel accommodation.

Majority of those surveyed prefer a vacation rental/appartment

Now it is time to compare the 3 remaining apps with Nielsen's Usability Heuristics evaluation as I wrote earlier. This is important to determine its usability at an early stage of the design process.

Skyscanner succeeds in aspects of aesthetic and minimalistic design and speaking the users language. The user control and freedom in terms of finding an exit to an unwanted state was given at any time. Also the app would always “[…]keeps users informed about what is going on […]”.
Skyscanner also impressed by a very understandable Covid-19 Update feature right after opening the app in order to get all the information the user needs, in a quick and easy way.

Kayak really convinced me with a smart user flow by its simple and aesthetic design. Even the filter feature was well organized comprehensible. Kayak succeeded in having many information on display without creating an overload to the user. They even have a game-feature for kids! I found Kayak almost flawless in every aspect.

However, regarding my scenario, I developed a soft spot for Trip Advisor. It is quite obvious that Tripadvisor lacks in terms of aesthetic and minimalistic design, but I found the app very family friendly and therefore suitable for my target group. I think I fall in love with the Things to do feature, which I think is an exciting tool especially for families. Being on vacation as a family can be stressful at times and you need to be flexible. Having the possibility to check for a citytour or search for an event for kids in your mobile, saves time and gets you all the information you need on your screen.
My user type won't necessarily need a car in Rome so I focused on the provided components like Things to do and vacation rentals/apartments.

Tripadvisor was originally known for reviews of restaurants and accommodations and still is. Therefore, features like finding restaurants make sense and might be a great and family friendly all-in-one app for my scenario. But let's see.

Tripadvisor — well known as rating standard when abroad

According to Wikipedia,

Tripadvisor is an American online travel company that operates a website and mobile app with user-generated content and a comparison shopping website. It also offers online hotel reservations and bookings for transportation, lodging, travel experiences, and restaurants.Its headquarters are in Needham, Massachusetts.

Testing

I started with the 5 second usability test to get some feedback on the app home screen and discover any areas that could be improved from there. I asked my interviewees three questions regarding

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

This was the home screen for my 5 second usability test

All the participants knew what the app was for and how to search for flights.The usability test did not reveal any misconception.

Task

I then guide the participants do a task within the app to see if areas of improvement would come to the surface:

  1. You plan to spend your next family vacation in Rome for 5–7 days
    → look for a flight to Rome for you and your family on Tripadvisor
  2. Find an preferred accommodation for you and your family
  3. Browse at the Things to Do feature and find something interesting for you and your family to do during your vacation

I observed they actions as well as their reactions. Afterwards I asked following questions to detect any friction areas or any pain points.

How did you find using the app?
Are there any changes you’d make?
Was it easy to navigate
Did anything frustrate you during the task?
Could anything be made simpler?

Insight

Nobody of my 3 participants ever booked a flight or else within a mobile app before (they preferred booking online via a standard website), but they found the user flow understandable and efficient. However, they gave me some feedback on 4 main points they have had some difficulties with:

1.Displayed flight prices are unclear in terms of per person or in total

2. Accommodation and flight filter-icons are not visible at first and not well organized

3. Images of selected accommodations are too small to get an impression

4. The Things to Do filter is a bit too busy and feels not organized

Possible solutions and redesign wireframes

1.Displayed flight prices are unclear in terms of per person or in total

My participants wondered if the price for the displayed flight is per person or in total. There was no information about it, until you click on it and even then the price was displayed quite small.
The participants didn't recognize it until they have landed on the partner's website, where the process of booking the flight continues.

I found a simple but efficient solution to that problem: Tripadvisor would just need to add the information next to the displayed price.

As you see below, I also enlarge the Filter feature as well, because the participants have had some problems even recognizing that a filter feature existed.

The current user flow doesn't tell the specifics about the displayed price

2. Accommodation and flight filter-icons are not visible at first and not well organized

As you can see above, enlarging the Filter feature makes it more clear to the user and therefore he will probably use this element more often. This saves time and is even more effective finding a suitable accommodation.

The Filter feature itself does not look intuitive at all. The Sort by list is set at a default state, which the user has to set to the state preferred. That means an extra step.

It’s probably best to get rid of the Sort by-button and integrate it somewhere else.

It would be easier to get rid of the default state and have it sort by review ratings or price in the first place. Another possibility would be, to include some of the filter in the first screen ( see below option 2).

Current user flow and edited version

The user is now able to select his preferred reference on the first screen and he could also refine his search by tapping the Filter button on the display.

The whole design of the filter “…doesn't spark joy”, as Marie Kondo would say. But I don't want to get rid of the feature itself. I would propose to add symbols and buttons in order to make it more clear and fun to select.

The current feature is all about words, letters and numbers. It looks boring and confusing.

To be honest I was inspired by the filter design of other apps, so I kind of used their design to help improve the interface of Tripadvisor in order to improve the users experience.
I first tried to use only buttons, but I was not satisfied. At my second attempt,
I found using icons much more comprehensive and fun, but I noticed that it would need a description as well, in order to prevent misunderstandings. I found the combination of graphics and information creates a comforting and more appealing atmosphere for the user.

Word or icons? Let's take both!

3. Pictures of selected accommodation are too small to get an impression

When looking for an accommodation the user is about to see a list of matching apartments. But it is not possible to slide through the pictures until the user clicks on a certain offer and then clicks again to see the entire gallery.

Current user flow takes too long to actually see more pictures of your apartment.

My participants stated that they found the picture gallery crucial in order to continue checking prices, amenities and eventually booking it.

In a first step I would enlarge the headshot of the displayed accommodation and add a feature to slide through the gallery before even selecting. One participant mentioned that she couldn't read the whole caption of the offer. It just did not fit into the screen. To have a better experience, I would try to limit the caption to the minimum. These solutions prevent the user having to click necessarily on to the next page to view more pictures, getting frustrated instead of looking forward to explore more.

Current user flow vs. larger images with slide feature

When selected a specific offer, the user will now see a more detailed description of the apartment. A gallery sliding feature with larger images, improves the overview and therefore the usability of the page.

All in one.

4. Things to Do filter is a bit too busy and feels not organized

There is so much going on…literally

The participants were surprised to see the Things to do feature and found it very useful to get some inspiration for their vacation. They found it a bit confusing though: There were categories but they seemed to be too similar to each other. Scrolling down, they soon lost interest in looking further. Two users claimed, that they found the feature helpful but wouldn’t book anything in advance to stay flexible.

Tripadvisor seems to focus on the content which is - without a doubt important, but I am sure the travel app would improve its performance by generally going for lager images.

But first of all, I would love to let the user decide which type of activity he would like to do instead of browsing and scrolling and eventually giving up on that feature.
When the user clicks on the Things to do- button, a window would pop-up with several categories to choose from, like Citytours, nature or culinary events. Once decided the user gets a list of activities matching his chosen category.

What would YOU prefer?

Instead of small pictures and captions I would enlarge the profile image in the list of results and -again, the user is able to swipe the picture gallery in this very step.

If the user wants to change the category he is able to do so by clicking the button at the top.

Conclusion

I really liked the idea of doing a site redesign using a real application and find out about the strengths and weaknesses of that usability design and try to improve the user experience and interface.
(Oh Lord, that was a long sentence 😅)
In the beginning I was kind of confused though, there was so much to consider in order to understand and complete the task. Now, I feel like this challenge helped me a lot to understand the role of an UX/ UI designer.

I wonder if my solutions would pass further testings with the users and I am actually looking forward to this next step, where iteration is key to take the user experience on to the next level.

--

--

Magdalena Steinlein

I'm currently studying UX/UI Design at Ironhack Campus Berlin