TripAdvisor – Cover Pages

UI Design, UX Design, Interaction Design


Challenge

The TripAdvisor native applications give users the ability to search for virtually anything, anywhere in the world. But therein lies an issue with searching. With an abundance of content for restaurants, attractions, hotels, and vacation rentals, it can often be an overwhelming experience for users.

The challenge we wanted to solve was how to get users into detail pages quicker and more efficiently. We were seeing that users frequently abandoned searches due to search paralysis.

This project was a quick follow-up to a previous test for quick filters.

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 this challenge wasn't relegated to just one TripAdvisor product, I quickly reached out to other designers in the company who had more knowledge of their areas (restaurants, attractions, and hotels).

It became immediately clear that we could group types of users into different personas or buckets. I worked with my product manager to create some rough personas to build empathy. For example, restaurants users could be going out for a number of reasons, including date night, family dinner, lunchtime break, to the bar for a game, etc.

My design partners and I collaborated extensively to try to come up with solutions that could quickly be tested with users and that could be applied to every core product area. We did competitive analyses of other applications and websites to see how they present products in formats other than lists.

Prototype and final design for cover pages

After a few explorations and rounds of user testing, my design partners and I came up with a concept called "cover pages", which would be shown to users before a full list of results. Depending on the product, carousels of POIs would be displayed to users based on their history with the app and what people typically search for before we would take them into a list.

To make sure our power user was still being addressed, we decided to include a "See all" button at the top of the page to give them an out, in case none of the shelves were of interest to them. The cover pages concept was quickly and widely adopted across the native applications and desktop site.

Here is a prototype I built in Principle to test and validate some of the decisions the team and I were making. This was very much a collaborative effort, and one that required a lot of compromising to ensure we had a holistic experience across the applications.

The cover page feature was successful, and helped to convert users higher up in the funnel.