Better filter experience on Trivago
Case study on the evolution of filter experience on Desktop & Mweb
The Brief
Proposing an evolution of the filter experience that aligns both desktop and mobile experience on Trivago.
Design process followed
Discover
- Step 1 Identify the design challenge: I did not have any existing data about CTRs / conversion or as to how the filters are doing on web/mweb . Hence, I started by doing usability tests of the current filter experience in web & mobile with 5 users. I observed where the users are getting stuck at, what is working & what isn’t.
- 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
- Step 4 The Hypothesis: From learnings in the above steps, I formulated hypotheses & identified possible opportunities that would make the experience better for the users, to test out in the user study in the next step. Ideally, at this stage, I would have spoken to product & engineering leads about effort estimation & priority of execution of these ideas.
Design
- Step 5 Ideation: Based on hypothesis & opportunities, I started with paper-mocks & quick iterations in black & white on Figma. I asked for early feedback from a few people around me & made more changes. Finally made hi-fidelity wireframes & prototypes
Validate
- Step 6 Usability testing: I tested out both web & mobile prototypes with 5 participants and identify areas of improvement.
- Step 7 Way forward: The way forward is to test with more people and keep iterating!
Step 1: The design challenge
Usability research
I did usability testing of the existing filters on Desktop & Web with 5 participants.
Task given to users
You are planning a surprise trip with your spouse/mother/best friend to Paris for a week. You want it to be special & book a great hotel for your trip. Think of a budget and what activities you want to do on this trip. Shortlist some hotel options for the same.
Users tested
3 males & 2 females, 25–30 years
Observations
- Even though the topbar filters of Price, location, accommodation & rating open on hover, users took some time to find these as they just started scrolling. Filters are not persistent in the header nor are there are any filters inline, on-cards or exposed side-panel on both desktop & M-web. It took some time for the users to realize they should scroll back on top to look for filters. One user mentioned
“ 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”
- 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
- 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.
- 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.
Step 2: Market study
- I looked researched about the filters on Web, MWeb & mobile of 20 products in the e-commerce sectors of travel, retail & food. These were MakeMyTrip, Booking.com, Skyscanner, TripAdvisor, Airbnb, Myntra, Shein, Yatra, Zomato, Swiggy, Nykaa, Amazon, Flipkart etc. I used them as free prototypes for the user study I conducted with 5 users.
- 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.
Step 3: User Research
Learnings from available research material online & market study
I read a lot of blogs on filter & sort behavior of users found on UX collective, Medium & Baymard research documents to get a better idea as to the user behavior & interaction patterns preferred by users while using filters.
- 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.
- 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.
- 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.
- 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.
Learnings from survey
I felt like I should validate some of the above learnings through a quick survey on google forms to get a preliminary understanding of the filtering behavior of users. I pitted popular e- commerces sites that had different filter experiences against each other and asked what the users liked about their preferred experience & most used filters.
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.
- 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
- Filters on the web should be in the top bar or a combination of both top & side-bar to avoid banner syndrome & reduce cognitive load in users.
- 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.
- Applied filters should be visible outside for quick comparison.
- 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
- 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.
- 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.
Step 5: Ideation
Paper — mocks
Based on hypotheses I decided to quickly sketch some variations that would align both web & mobile experience. I decided to keep the other elements of the page of listing cards, search, header & bottom bar the same as it did not fall under the prevue of the brief and would require additional tech effort.
Option 1: Filters only in top-bar with concept filters as quick click tags
Option 2: Main Filters in sidebar & concept filters in top-bar
Wireframes
I took feedback on the paper mock options from people around me and re-iterated the following wireframes on Figma directly.
Final Visuals
Desktop
Mobile
Step 6: Usability study
I tested out both web & mobile prototypes with the same 5 participants for earlier study giving them the same task.
Results
- The “Concept search” filters were not hidden anymore. Filters increased user engagement leading to faster search and quicker booking.
- 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
- Most users used personalized filters like closest to Eiffel tower or Preferred by couples filters like double beds
- 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.
Step 7: Way forward
- Make a detailed prototype where all filters work with real-time data updation after application.
- 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!