Optimising room comparison on mobile devices @ Booking.com

How we doubled our product growth by improving room comparison on smaller screens

Image alt tag

The room upgrade feature on Booking.com allows users to compare two or more rooms post-reservation and find the best room for their needs and budget. However, the feature can be challenging to use on mobile devices due to the amount of data and the limited screen size.

Keep reading the project summary, and get in touch if you want to hear more about it.

The team

  • 1 UX designer

  • 3 developers

  • 1 product manager

  • 1 UX writer

  • 1 researcher

  • 1 prod. marketing manager

My role

  • UX design

  • UX research

  • UI design

  • Workshop facilitator

Timeline

  • Overall: 8+ weeks

  • Discovery & Research: 2+ weeks

  • Design & testing: 6 weeks

Tools

  • Figma

  • Usertesting.com

  • Guerilla testing

  • A/B testing

  • Good ol' pen & paper

Optimising room comparison on  mobile devices @ Booking.com

Room upgrades on Desktop with updated design system

Problem

Having so many hotels and room options, users feel overwhelmed and often book the first room they find that fits their budget.

When I joined the Room Upgrades team, the mobile web version of the feature had just been released, but it had a lower conversion rate than the desktop version.

The experience on small screens did not display all of the information that users needed to make an informed decision about which room to upgrade to.

Optimising room comparison on  mobile devices @ Booking.com

Redesigned comparison at the end of this project

Solution

  • Allowed comparison of more than 2 rooms: This is useful for users who are considering multiple upgrade options.

  • Adopting the new design system: This brought more consistency with the rest of the website and app, and it made it easier for users to find and use the feature.

  • Removed dependency on JavaScript: The redesigned room comparison feature resulted in a 20% increase in traffic on web mobile. The new design was more user-friendly and accessible to more users.

  • Designed for scalability: The new design could be easily embedded in the Booking.com app, bringing 2x as much traffic and growth.

Design Process
Optimising room comparison on  mobile devices @ Booking.com

Insights about guest motivation to upgrade

Research & analysis

I conducted research involving analytics, surveys, and user interviews, to understand the pain points, user needs and motivations. I also ran a competitor analysis to see how other companies were doing room comparison.

We wanted to understand:

  • What were the motivations or disincentives for users to upgrade?

  • How did user traffic and conversion compare on mobile vs desktop?

  • What room information was the most relevant for comparison?

Information architecture & content design

Based on the research findings, we restructured the navigation and content, prioritising room features that were most important to users. Together with the UX writer, I improved the content structure to facilitate decision-making.

Optimising room comparison on  mobile devices @ Booking.com

The team in action

Ideation

After exploring a few ideas with my own sketches and wireframes, I facilitated a workshop with my cross-functional team and fellow designers who specialised in App and Mobile design.

We then selected a few ideas to test, considering interaction design, discoverability and intuitiveness.

Optimising room comparison on  mobile devices @ Booking.com

Accordion and swiping interactions with a Framer X prototype

Prototyping

I created three prototypes, each exploring different interactions.

Based on the ideation workshop, we wanted to test how intuitive card layouts, swiping gestures and accordions would be.

Usability Testing

To ensure the new room comparison feature was user-friendly and effective, we conducted extensive testing.

The prototypes were tested with a diverse group of users using both usertesting.com and guerrilla testing methods.

The feedback we gathered helped us decide on the most intuitive solution.

Optimising room comparison on  mobile devices @ Booking.com

Ideas prototyped and A/B tested

UI Design Iterations & More Testing

The old side-by-side comparison was still preferred by users, which took me back to the drawing board.

Using the new Booking.com design system, I updated the typography and corrected the colour usage.

Based on our research findings from earlier, I tested highlighting the most important room features in green, which proved to be helpful for users to see the main differences and most valued amenities.

Each iteration was tested again through A/B testing until we found a winning solution.

Design delivery
Optimising room comparison on  mobile devices @ Booking.com

Updated upgrade flow after testing

Usability test from the winning design

Learnings

This project sharpened many of my skills in collaboration, research, prototyping, and testing, but most importantly, it changed how I looked at data.

By trial and error and sitting with my team to analyse our testing results, we uncovered a deeper technical issue, which prevented 20% of users from seeing our feature.

Fixing that issue also changed our roadmap, because the new tech and design direction allowed us to integrate the upgrade flow into Booking.com's native apps.

Unblocking our paths into native apps brought us twice as much traffic and other interesting challenges to tackle.

26
Total interviews (moderated and unmoderated)
4
Tests in production
-6%
Cancellation & Duplicated reservations
20%
more traffic on mobile web platform