Design Challenge: Create an easy way for customers to compare hotels.
Through tracking and interviews, we knew that customers often click back and forth between our search results page and our hotel detail page before purchasing. Our hypothesis was that customers were comparing results and trying to find the best deal. We also knew from direct observations that clicking back and forth (pogoing) increased frustration in the purchase experience. One way to streamline the process would be to allow customers to pick several hotels and compare them directly from the search results page. This is the idea that started my work on the feature.
Step 1: Requirements, Research, Ideation
Our largest customer base was still on the desktop breakpoint, so that was the focus for this test. I did a thorough competitive audit to figure out existing compare patterns, and to see if I could reuse designs I’d already worked on for Quickview.
Step 2: Define User Flow, Identify Key Screens
We wanted to keep customers on the search result screen and test whether they could book directly from a compare UI. This interaction would bring purchase one step closer, similar to the Quickview feature.
Step 3: Create a User-Centric Experience
Originally, we tried to re-use Quickview designs for the compare feature. After a paper prototyping round, we decided to use a grid system that was easier to scan.
Step 4: Prototype & Usability Testing
I created an InVision prototype and we tested it for usability problems on usertesting.com. Feedback was good, and unprompted interaction was high.
Step 5: Launch & Feature Support
We launched the feature for the desktop breakpoint and engagement was high (10%). This was enough signal to begin exploration on a system that would work for mobile and desktop together.
