trivago: Increasing map usage by 15%
Role: Product Designer
Working together with 3 team members: Product Manager, User Researcher, and iOS Engineer.
New map entry point UI.
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
As we started to improve the map experience for customers, we additionally wanted to improve the findability of the map entry point, so that customers who are looking for more location information, are able to find the map within the trivago app.
We knew this was a problem because:
The quantitative app data on the percentage of customers opening the map was low.
The blue map entry point floats above the hotel cards at the bottom of the list, so there’s a lot of competing visual information.
The existing entry point didn't stand out against other information on the result list.
Initial concepts
For my initial exploration I tried 2 approaches:
Finding another position for the map entry point which is more obvious. For example, a large entry point at the top of the screen.
Keeping the map entry point in the same position, but thinking about how to make it stand out more. My idea was to make the button itself look more like a map. Which uses the map colours to create more contrast, and connects the button with the map visually.
Using map colours and UI to create a stronger visual connection that it's a map entry point.
Click test
During the discovery phase, we wanted to get an indication that the concepts improved the findability of the map entry point before building a solution. So, we setup a click test comparing the original design to 4 new concepts. A click test is a research method, where we present participants with a scenario and ask them where they would click. Their first click is recorded, along with the time it took.
Findings
There was a higher percentage of clicks on the floating button variations.
The floating button variation with the red pin (variation 3) had the highest success percentage.
The large card was perceived as easiest to find.
Next steps
A/B test the floating button on its own, moving more into the direction of the red map pin idea, as that had the highest percentage of clicks.
Variations 1 + 2
Variations 3 + 4 (variation 3 on the left had the highest success percentage).
Refining the UI
The floating button variation with the red pin (variation 3) had the highest success percentage. Before A/B testing, I further refined the UI:
Introducing the blue button to this variation, so there’s clearer affordance that it’s an entry point.
Adding multiple pins, to visually communicate that there’s multiple results available. Not just one.
New UI that was A/B tested.
A/B test and outcome
The results of the A/B test aligned with what we found in the click-test. And the redesigned floating map button increased engagement by 15% compared to control. With no negative impact on top-line metrics.