trivago Unfavourite icon

Hotel lists

I joined trivago in January 2017, and one of the first projects that I worked on was hotel lists. trivago is an accommodation metasearch, and a common problem users face is narrowing down their list of results. Hotel lists address this problem by allowing users to save their favourite hotels.

Hotels are favourited by tapping on a heart icon. If the hotel is located in “Berlin”, then a list for “Berlin” is automatically created.

Hotels are added to a list by tapping on a heart icon.

Removing hotels from a list

Once a hotel has been added to a list, how do you communicate to the user that it can be removed? A common pattern in other products is that you tap on the heart icon again to unfavourite it. But is that clear to users? I wanted to test it.

Versions tested Is the heart with “X” icon a clearer signifier for removing a hotel?

First-click test

At the time, I hadn't launched a user test before, so I reached out to a member of the user research team to help me set one up. I was introduced to the first-click test, writing a scenario, and the data points we'd get back from the test. I mocked up three icon variations:

  1. Heart only icon
  2. “X” only icon
  3. Combined heart and “X” icon

The idea being that the “X” helps to signify that you're removing a hotel from the list. Something else I learnt was that it's important to have all three variations be exactly the same, except for the difference that you're testing. So I made sure the screens were identical, except for the different icon.

More errors were made with the heart only icon, and it also took participants longer to complete the task. Both icon variations that included the “X” were clearest, with 20/20 participants understanding how to remove a hotel from the list.

User test results The heart with “X” icon, on the right, performed strongest.

Prototyping the interaction

Using the findings from the test, I prototyped the interaction of unfavouriting a hotel from a list.

Prototyping the interaction of unfavouriting a hotel. Based on the findings from the test.

Conclusion

Although this was a relatively simple test, it's one that's very memorable for me, because it was my first introduction to usability testing. I learnt how to setup a first-click test, the importance of a well-worded scenario and task, and how to structure and write-up the findings.

More featured projects

trivago Price alerts
Front-loading push notification copy
Nov 2019
trivago User Research training
Testing a feature for the map
May - Jun 2019
trivago Sprint facilitation
One-day Design Sprint
Apr 2019
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