Redesigning the hotel shopping experience

I reduced cognitive load and increased trust for hotel shoppers by simplifying and standardizing the hotel list. This led to a 14% increase in conversion & a 20% increase in purchase frequency.
Skip to design
iPhone mockup

challenge

Hopper aims to create the best-in-class hotel shopping and booking experience. Currently, the core hotel shopping screens inundate shoppers with banners and pop-ups that distract from and hide key hotel information shoppers seek. Nearly 35% of shoppers aren't seeing a single hotel listing, causing 65% dropoff in the hotel booking experience.

OUTCOME

My design changes and recommendations directly led to a 14% increase in conversion and a 20% increase in purchase frequency.

Role

Lead Product Designer

TEAM

Product Manager

Frontend Eng (2)

Backend Eng (3)

TIMELINE

4 months

Overview

The challenge

36% of shoppers stop moving forward in the flow after the hotel list, where they see an influx of advertisements to save money and jump on deals in the Hopper app.

In a synthesized summary from 500+ survey responses asking how users feel shopping for a hotel on the Hopper app, there is a lack of trust in the shopping experience: 

"The feedback from Hopper users highlights several issues with the booking app. Users complain about the app’s cluttered main page, hidden fees, confusing booking process, and frequent pop-ups. Users mention feeling a lack of trust in the booking experience."

Overview

The opportunity

For the business

💰 Improve conversion and purchase frequency
The goal is a 9% increase in conversion and a 22% increase in purchase frequency.

‍🔁  Increasing repeat customers
Hopper only has a 6.2% retention rate, implying that shoppers are not returning after a first purchase. 

✈️  Be competitive with other travel marketplaces
70% of competitors are showing at least 2 hotel listings on first scroll. 67% show no pop-ups/banners on the hotel list.

For the user

📈  Increased usability
Make the hotel list easy to browse by removing unnecessary information.

💕  Build back user trust
Elevate important purchasing information so customers want to repeatedly return to the Hopper app to book their stays.

⚖️  Showing scale of options
Be able to easily compare multiple hotel options in the same scroll, just like other travel apps.
Overview

Solution : a systematized shopping experience

My design changes led to: 
- 14% increase in conversion (Goal: 9%)
- 20% increase in purchase frequency (Goal: 22%) 
- 100% users seeing 2 or more hotel listings on first scroll (Goal: 2 listings)
- Increased user trust

User Research

What features do users really need?

I leveraged past data and conducted a competitive analysis to form hypotheses about the current state. Subsequently, I validated these hypotheses through 20+ interviews and used these insights to guide my design decisions.
Dashboard mockup
Some of the user insights from synthesis
Discovery

Key learnings from interviews

Only 5% of shoppers use the map on the hotel list.

Not enough shoppers are using the map on the hotel list. However, in other places in the shopping funnel, map users are high-intent bookers, with 80% booking a hotel stay. We don't need a space for the map on the list, but we need an experience for those high-intent bookers. Competitors show a fullscreen map instead of combining the shopping list and map like Hopper.

62% of users mention banners and pop-ups as a reason for wanting to leave the Hopper app.

Additionally, 4/6 competitors show no banners or sell additional products on the initial list.

Location and pricing information matter the most to users.

Emphasizing location and having a clear pricing structure are two main reasons shoppers would choose to book with us. Since elevating this information would require changing hotel cards and building new components, we tabled this for now and did a separate project focused on pricing transparency.

Full size, scrollable pictures are Hopper's competitive advantage.

I was considering having vertical cards like our competitors, where pictures take up less space. However, users are a lot of aesthetic of hotels and actively use pictures in their decision making. This was backlogged in our MVP but latr

Strategic pivot: balancing business and user needs

Although users wanted banners and pop-ups to be removed, Hopper gets 40% of total app revenue from fintech products and add-ons, which are advertised in said banners. Figuring out how to still advertise those products in a non-intrusive manner was key.
Exploration

Starting from individual UI choices...

To putting things together as initial ideas

Tabular navigation bar

Separate tabs for the shopping list, Hopper Picks, and other deals / promos.

Scrollable navigation bar

Only icons are used in the scrollable navigation bar to save space.
The deals page is accessible through this navigation. Map  
access from the floating map button at the bottom.

Integrated deals grid and scrollable banners

This design also has a vertical scroll navigation. There is a deals grid
on top for the best prices. Scrollable banners break up the list into two
distinct sections. The hotel cards are vertical but still full sized.

Scrollable banners and vertical cards

Scrollable banner and navigation used to save space. Hotel cards are
vertically oriented so that more information can part of each listing.
A floating map icon leads to a fullscreen map experience.
View all posts
Iteration

🕵🏼 Taking a closer look at banners

After gathering input from shoppers and team stakeholders, it became clear that the banners were overly distracting, likely due to varying UIs from siloed product teams. To address a significant 65% drop-off in the funnel, I needed to make them less prominent.

Building a design style guide for banners

I implemented a standardized banner system with guidelines, allowing other teams to experiment and promote their products in a designated space. This ensures hotel shoppers can proceed seamlessly with the goal of booking their stay. Some of the guidelines: 
Design office hours for other product teams
No colored backgrounds to improve accessibility
Simplicity to call to action with a header, body copy, and action button
One image max
Fixed height and width
Dashboard mockup

Standardizing banners led to improved engagement

Iteration

Banners being dispersed vs. stacked on top aided in improving engagement

Instead of stacking banners at the top, we interspersed them throughout the hotel listings. We randomized banner position, giving each one an equal chance of appearing in the first position (below the first hotel lodging). Additional banners displayed every 1, 3, 5, and 7 listings (Fibonacci sequence). Interspersing banners led to higher conversion rates and higher intent from those that engaged with the banners.
Final Design -

Key features of the new design

Fullscreen map and list experience
The map and list are fullscreen, with an easy toggling option and the between the two. Both pages have consistent toggle navigation for better user experience.

Hotels header with property availability
The header creates a cleaner division between the navigation and the hotel list. The number of properties changes based on filters applied and helps to assess hotel availability on the Hopper app.

Filter and sort in one picker
Consolidating them into a single picker both conserves space on the hotel list and aligns with the existing mental model that users are familiar with.

Adding drop shadows to shopping list elements
Standardizing banners helped clean up content. Adding drop shadows to cards and banners allows for easier differentiation between listings.

Metrics

👨🏼 User Metrics 
-Shoppers are now seeing 13.1% more lodgings and 10 less banners per session
-100% of shoppers see at least 2 hotel listings
-Loading the hotel list is much faster - an unexpected positive consequence of moving the map to a floating button
‍
📈 Business Metrics 
- Conversion improved by 14% (Goal: 9%)
-Purchase frequency increased to 20% from 6% (Goal: 22%)

Reflection

💭 Adding rules always adds an extra layer of friction, which is sometimes necessary.

Following the introduction of banner rules, a significant portion of my time was devoted to educating other teams about the permissible content for the shopping experience. It took a lot of time to gain buy-in on these standards.

What's next

 ✅  We A/B Tested three different versions: Control (80%), New UI with Banners (10%) and New UI without Banners (10%). Without Banners variant performed marginally better, so given business constraints, we launched the with Banners variant to 100% of iOS and Android users.

✅ Personalizing banner order based on user type / having more logic for which banner gets the first position.