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.
iPhone mockup


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.


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


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

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.

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.

🕵🏼 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


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.


👨🏼 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%)


💭 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.