Better filter experience on Trivago

Case study on the evolution of filter experience on Desktop & Mweb

The Brief

Design process followed

Inspired by the double — diamond method

Discover

  • Step 2 Conduct a Market study (identify things that work/do not work for competitor products): I looked at how 20 products in the e-commerce sectors of travel, retail & food have tackled the issue of discovery of filters. I used them as free prototypes for the user study I conducted with 5 users.
  • Step 3 User research: I read a lot of blogs on filter & sort behavior of users found on UX collective & Baymard research documents to get a better idea as to the user behavior & interaction patterns preferred by users while using filters. I used this research to eliminate interaction patterns that have been proven to not work for users. I also rolled out a quick survey on google forms to get a preliminary understanding of the filtering behavior of users. From the above steps, I noted down behavior identifiers, key game-changers, key factors for booking, user needs & pain points.

Define

Design

Validate

  • Step 7 Way forward: The way forward is to test with more people and keep iterating!

Step 1: The design challenge

Usability research

Task given to users

Users tested

Observations

“ I guess I am used to the filters in the left column in booking. They have intresting filters like distance from city center & 9+ ratings, found it really helpful”

4/5 users
  • The “Concept search” filters in Trivago is currently hidden in the “more filters” section. These filters increase user engagement & help with faster search & discovery and hence need to be exposed upfront. But none of the 5 users looked here for filters unless prodded
3/5 users
  • Filters are not a feature that is expected from users, and should, therefore, be easy to discover. Once prodded to explore and search, 2 users clicked on more filters but still did not find the ones they are personally looking for. One user mentioned

“ I am looking for places that have double bed since I am travelling with my spouse , I do not think I can look at properties that only have double beds”

  • The Accommodation filter currently is not multi-select, but a radio button. What if I want to look at homestays & apartments only? Also, there could be more types like “Beachfront” properties, villas, etc. The term “Accommodation” is not something used conversationally by users as well, the term “property type” resonates better.
  • Location: Users did not find the location filter useful, they took a while to understand the interaction. Location suggestions would help here

“ When I am going for vacation, I usually search for inspiration on what to see in destination city and then look for accomodation closeby”

  • Sort: All users referred to sort as filters only. They used terms like

“ I usually filter by price”

“ Booking.com has useful filter tabs on top , I can filter by distance from downtown or best reviewed”

while interacting with sort. They meant sort instead of filter.

  • All 5 users found the sort really confusing, neither of them understood the meaning or difference between “Price & recommended” & “Price only” sorts.
Trivago’s sort
Booking’s sort
  • The filter & sort experience on Desktop & Mweb are not consistent currently. Mweb has no exposed filters, the filter & sort buttons both open up the same full-page, that most users did not take the time to scroll through. 3 out of two users never scrolled down to the Popular filters section and moved on thinking those filters do not exist at all in Mweb.
5/5 users

Step 2: Market study

  • I also looked at individual case studies in the research catalogs at Baymard. Baymard has 42,000+ hours of large-scale e-commerce UX research — uncovering what designs cause usability issues, how to create “State of the Art” e-commerce experiences, comparison of UX performances of leading e-commerce sites. The research is published as articles, benchmarks, and UX case studies, page designs etc
  • I looked at products that have been listed as having good performance with regards to these parameters of Filters: Scope & logic, interface & layout & available filters in their Benchmarking survey results.
Available filters: Target & others
Scope & logic : Etsy & others
Interface & layout: Newegg & others

Step 3: User Research

Learnings from available research material online & market study

  • During user sessions, Baymard reports people to use “sorting” and “filtering” interchangeably.
  • Category-specific filters should be used to educate people who have less experience with a booking or might not know the parameters available to them for decision making.
Myntra offers very detailed category-specific filters. This is particularly helpful giving the sheer number of items — credits, Laura Cunha
  • Users like filters with multiple selections & ones that use real-world language.
  • Research shows that “Applied filters” should be shown in both their original position & in a separate ‘Applied Filters’ section.
Credits: Baymard
  • Horizontal topbars for filtering work better than vertical side-bars used by most e-commerce sites like Amazon. Hence I decided to eliminate the idea of just side-bar filters, and stick to just top-bar filters or try a combination of both.
Credits: Baymard
Credits: Baymard
  • Show the most used parameters upfront. Based on this, I prepared a list of popular filters in the Concept search category and asked participants in the survey, which they use most often. These could be surfaced upfront also to educate.
Saved searches on uber

Learnings from survey

I got 22 responses from users aged 25- 30 years with an equal split of 12 men & 10 women. You can take a look at the questions I asked here.

  • 1. Surface hidden filters: Users are not aware of extra filters in “Concept search”. On the question “Which of the following filters do you find useful while booking a hotel?” one user said

“ I use none of these filters. I assume all hotels now have AC? Or I figured that from the reviews”

another asked,

“Hey is it supposed to be Dining instead of Diving?”

showing that unless we surface these hidden filters of activities either inline, on cards, or as tags, users will not go exploring to find them.

  • 2. Use on-card & in-line filters: Booking.com & Airbnb came out as the clear winner in the survey with 35% each when pitted against 6 other travel sites including Trivago.

Users said their filters experience was

“Granular, and more visible”

“A simple interface that returns results that are customized and often what you’re looking for”

showing that the on-card filters that booking uses are really useful. Booking does this through constant A/B testing on what filter & sorts would work personally for each user and should be displayed upfront like date, free cancellation & pay later.

Booking.com listing card filters
  • 3. Tags for most popular filters: Free breakfast, pay at hotel, wi-fi, AC, 9+ ratings, close to the city center are key factors for booking and should be visible other than the four main categories.
  • Behavior identifier: Filtering is sub-conscious

“Performing search has become such a subconscious task that I haven’t questioned, contemplated or even compared the finer details”

  • Key game-changer: More filters = better conversion

“A lot of options, easy to use, relevant and detailed”.

  • User needs & pain points: Overtime filters should become personalized through AI & ML as users said they want user-generated, tag powered filters. Previous filtration data should be stored and showed upfront in the next search.

“Automatic updation of dates of booking across all filters once the details are provided”

Step 4 The Hypothesis

  • Most important Concept search filters can be exposed upfront for educating the user about the options available to them. They should be quick clicks select & de-select chicklets on both platforms.
Category filters topbar in Myntra
  • Applied filters should be visible outside for quick comparison.
Applied filter tags
  • In mobile due to less space and a large number of filters, search within filters & a clear all would be useful for users that know what they look for in a hotel.
  • Showing the number of search results for that filter would give users a clearer idea if they should be narrowing down their search criteria.
  • Personalized filters based on search criteria would help plan better eg. Distance from Eiffel tour if the search is in Paris, or homestays for group bookings
Many users spoke of the distance from the city-center filter in Booking.com being useful.
Quick sort by distance to downtown in booking.com
  • Location: Filters & search should be bundled for better experience. Location filter, map & distance could be grouped /adjacent. Eg. MakeMyTrip has a search bar right under the Map view that adds an applied filter tag to your search.
  • Suggestions should be given on the application or exploration of certain filters. It also exposes popular areas in destination for users that are unsure and want to explore more.
  • Gradual exposure of filters depending on search behavior would help reduce cognitive load & also aid in the search.
Gradual exposure on Myntra
  • On- card & in-line filters would increase discoverability and make decision making faster. These should be personalized based on previous searches and can be retained in future searches.
Inline property type filters on MMT

Step 5: Ideation

Paper — mocks

Option 1: Filters only in top-bar with concept filters as quick click tags

Desktop
Mobile

Option 2: Main Filters in sidebar & concept filters in top-bar

Desktop
Mobile: Applied filters & overlay state

Wireframes

Final Visuals

Desktop

All concept filters exposed upfront, Main filters in side-bar, In-line filters based on previous searches
Applied filters state
Changing in-line & on card filters based on applied filters & search criteria, back to top in sidebar incase of too many options

Mobile

Step 6: Usability study

Results

5/5 users could discover & use at least 5 concept filters
  • All users used date filters that were in-line, as their search was flexible. They also liked the change in in-line filters on the application of certain filters
5/5 users used in-line & on-card filters
  • Most users used personalized filters like closest to Eiffel tower or Preferred by couples filters like double beds
4/5 users personalized filters like closest to Eiffel toer
  • All users felt the ease of use in quick selection & de-selection of filters in form of chicklets. Exposing applied filters was helped the users informed over time.
5/5 users felt ease of use in quick selection & de-selection of filters

Step 7: Way forward

  • Make hi-fidelity prototypes of two more approaches and A/B test with users.
  • Do more preliminary research by talking to more users about how they plan vacations & book stays and make a detailed user journey & empathy map for filter experience.
  • Work on filtering experience in map view.
  • To test with more people and keep iterating!

Product Designer. Animator. Illustrator. Traveller