trivago: Easier location comparison

Role: Product Designer

Working together with 4 team members: Product Manager, User Researcher, UX Writer, and iOS Engineer.

Explore restaurants and attractions near hotels.

About trivago

trivago is a metasearch, allowing users to find the best price for their chosen hotel. The business model is cost per click. So, instead of booking on trivago, online travel agencies, hotel chains, and independent hotels pay trivago for referring users to their site. The benefit to the user is that they can see a range of prices from different providers.

Objective

Increase the users' ability to compare and decide on a hotel based on the location.
We wanted to make it easier for customers to compare the location of different hotels and help them decide where to stay.
We decided to focus on location comparison, as a competitive analysis from the User Research team revealed that trivago was weaker compared to competitors on hotel location.

The problem

trivago doesn’t provide the necessary location information which users name as important, when making a decision about booking an accommodation. The location info offered on trivago is a weakness compared to the other websites.

No location context was provided on trivago when using the map.

Nearby
attractions

We decided to focus on providing context on nearby restaurants and attractions, because in a research study which ranked location information importance, nearby restaurants and nearby attractions were ranked as 2nd and 3rd respectively.

Initial concept

On the map we already show a lot of information. For example, at the bottom of the map we show information about the currently selected hotel, which takes up a lot of space. So, any solution would have to keep the map visible.

I sketched out an idea where the user can select nearby restaurants and attractions. The hotel information is minimised to save space.

Initial sketches where the hotel information is minimised to save space.

Usability test

I mocked up a quick prototype and we launched a usability test to see if the “Explore” entry point was understandable to users.

Findings

No users mentioned the Explore button, when they were asked what do they think they can do on the map.
4/5 users were confused about what Explore button actually means and didn't know what it would do. However, 5/5 users understood its utility once the feature was opened by them.

Followup copy test

We iterated on the copy and landed on “What’s nearby” - as we felt that it was more specific than “Explore” and better communicated that you are searching in a smaller area.
I ran a followup usability test on the copy, and whilst users understood that "What's nearby" was for adding places to the map, some participants thought they would only be shown near the selected hotel.

Prototype screens for the initial usability test.

Refining the UI

Smaller pins: One piece of feedback I received was to remember that the focus of trivago is still hotels. And the restaurants/attraction pins were quite large in comparison to the hotel pins.
Blue pins: We use green, red, and orange to communicate the rating of a hotel. So, I decided to use blue as it is a colour that couldn’t be mistaken for a rating.
“Explore this area”: We adjusted the copy to include “…this area”, to better communicate that you are searching in the visible area and not just near the selected hotel.

Improving the UI of the pins, and updating the copy.

Map pins for: Entertainment, Food, Nightlife, Shopping, and Transport.

Click test

In the initial usability test, users didn’t mention the “Explore” entry point unless they were prompted.
So before A/B testing, we decided to run a click test to see how many participants were able to find the entry point.
62% of users were able to find the "Explore this area" entry point. We had no control to compare against, but we felt that this was high enough to proceed to A/B testing.