TripAdvisor – Smart Filters

UI Design, UX Design, Interaction Design


TripAdvisor's iPhone and Android applications are great for helping users find what they need anywhere in the world. However, there was an issue that I needed to tackle. Any TripAdvisor product list is sorted from top to bottom by users' feedback and ratings.

Oftentimes, a city's most expensive restaurants are mixed in with some of its cheapest finds. This presents a challenge for users that want to quickly make a decision on a restaurant.

In larger cities or destinations, these lists can contain thousands of results. Users generally either give up on the search altogether, tap on one of the first results, or search for a specific thing without ever realizing that something they might be interested in, is not that far away.

If you're interested in exploring some of these features more in-depth, please download the TripAdvisor® iPhone® and Android® applications.

Approach to the challenge

Because list views are such a core feature of any ecommerce product, I worked with our respective product teams (Hotels, Restaurants, Attractions) and documented requirements. At the same time, I did a competitive analysis of other apps and researched best practices in this area.

We thought of different ways to present the list of options, outside of a traditional list format. I explored image-heavy options, image and text grids of four results, and large CTAs to direct users to go into the filter page to refine their search.

After a few explorations, I ended up with two options I wanted to test with users. Image-heavy filters or "tag"-based filters at the top of the list of results that would have smaller footprints.

Prototype and final design for smart filters

We decided that in order to get users to what they need faster, we should adopt a common interface pattern today in the form of "quick filters".

I made the decision to expose a smaller filter UI at the top of the list to show users some possible filters, but also stay out of the way of users that just want to browse. Users can quickly refine the restaurant results by cuisine types, price ranges, whether or not the restaurant is open now, or if it accepts reservations.

Here is a simple prototype built in InVision. It helped me and the product manager I collaborated with validate decisions and assumptions we had made. We tested with users on and in local, Bay Area coffee shops.

This feature informed a lot of future product directions, as it tested very positively during user testing.