trivago Deals navigation

Booking a hotel

In the trivago app, the final step of the flow is for the user to visit the partner website (for example, Hotels.com) to book their hotel.

The partner website is presented in a browser within the trivago app. This means that, for the user to navigate back to trivago, they simply need to tap the back button in the top left of the screen.

Navigating between different partner websites, such as Hotels.com, within the trivago app.

Multiple back/forward buttons are confusing

As it's a browser, there are also browser back/forward buttons displayed at the bottom of the screen. Having multiple back/forward buttons on the same screen is confusing. So we decided to A/B test presenting the browser view with a close button instead of a back button. To try and reduce confusion.

But after A/B testing the change, there was a significant drop in users visiting different partner websites.

Launching a usability test

As a followup to the A/B test, I decided to run a usability test to try and better understand why there was a significant drop. I also saw this is a learning opportunity to setup and launch my own test.

I decided to use the “Navigation test” on UsabilityHub, because I wanted to simulate a realistic scenario of a user navigating between different partner websites. To compare offers.

I would see what percentage of users would successfully know how to navigate back to trivago. Five variations were tested:

  1. Back icon, positioned on the left of the screen.
  2. Close icon, positioned on the left of the screen.
  3. “Close” text, positioned on the left of the screen.
  4. Close icon, positioned on the right of the screen.
  5. “Close” text, positioned on the right of the screen.
Versions tested Two out of the five versions tested.

Conclusion

Even though I tested multiple variations for “Close”, the back icon still performed strongest. With 19/40 participants successfully completing the task. Our initial assumption, that “Close” would be clearer, wasn't correct.

User test results The back icon, on the left, performed strongest.

More company projects

trivago Privacy settings
Small UI adjustment
Nov 2018
GNARBOX (Part 1)
Managing HD content
Feb 2015 - Dec 2016
GNARBOX (Part 2)
Editing photos and videos
Feb 2015 - Dec 2016
Cabify
Your private car and driver
Apr 2013 - Aug 2014
Richard was a pleasure to work with. He guided me during the entire project asking all the right questions and providing valuable guidance throughout. It is a such relief to find someone whom I trust to give me the best possible advice to enhance the user experience right down to the smallest of details.
Laura Elizabeth Laura Elizabeth
Designer at Laurium