Define the problem
As a Senior UX Designer and then a Design Lead at Hotwire, I led design on the Hotel team. This was the largest team at the company and contributed to 75% of the sales.
Hotwire uses an Opaque Pricing model, where customers buy remnant inventory at a discount from high-quality brands. Because purchases are made without knowing the name of the hotel or the exact location, special care is needed to communicate quality and value.
Background Research
Our business was primarily desktop-based. About 80% of purchases were on the desktop, and trips booked more than 30 days in advance were generally longer stays and had a higher profit margin. This behavior was characterized by a persona that we called Plan-it-out Patricia.
Business Goals
We knew from data analysis that over 1/3 of our customers dropped out of our funnel between the search result and the product page step.
User Goals
We knew from user research that our customers engaged in "pogo-sticking." This is where they would go back and forth between the search results page and the product page to find exactly what they needed. We observed customers getting frustrated when they couldn't find what they needed, and many would leave the site. We also knew that the Patricia persona was particularly interested in Location and Quality.
Hypothesis
Introducing a new screen before the product page with relevant information would persuade customers to book hotels earlier in the flow. This would improve conversions.
Requirements
The core team consisted of a Product Manager, a User Researcher, me (UX), and a team of engineers. We worked with analytics partners to figure out content that would be helpful for the test.
From a user perspective, we focused on content that increased confidence in Location and Quality. We used winners of conversions tests and highly clicked content.
Iterate on solutions
At this point it was time to start sketching. I had multiple ideas now and brought them to the team. I like to think about existing patterns as well. If there's an existing pattern you don't have to teach it, but you can make it better.
I had three ideas right away, a popup, a slide out, and a drawer. The popup was problematic for several reasons, and I eliminated that right away. But the drawer and panel both had benefits and drawbacks.
I increased fidelity of the wireframes as we discussed what kind of content we'd be using.
Prototype testing, Round 1
First round was a click-through prototype that gave us another data input for the drawer vs. panel debate. Users were more comfortable with the panel.
Agile Delivery
Once we were confident on which direction to take, the engineering team took my wireframes and began building out a version of the feature. The content was still TBD, but they could start working on it now
Prototype Testing, Round 2
This was the true usability test. We were able to see if users had any problems manipulating the UI. No red flags came up, so delivery of final assets started next.
Test solutions
We rolled out the test and saw an immediate increase in engagement with the module. Over 10% of customers clicked the link, but conversion was flat. We weren't discouraged, because we believed in the testing framework that we had built. We went back to our Persona, the User Data, and also ran another round of User Testing.
We noticed that users would move their focus directly from search onto quickview. Because of this, we hypothesized that some users would need reinforcement for location and quality. We introduced a quality score higher on the quickview panel for test #2. With that change, we saw an increase of 3% in conversion.
Reflections
I'm really proud of how Hotel Quick View turned out. We combined data and user needs to find a problem that was helpful to the customer and big enough to matter to the business. Quickview gave us a testing framework, and led to a hotel comparison tool. As mobile traffic increased, a drawer UI was later developed and launched.