Room upgrades on Desktop with updated design system
Optimising room comparison on mobile devices @ Booking.com
How we doubled our product growth by improving room comparison on smaller screens
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
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.
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
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.
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.
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.
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
Updated upgrade flow after testing
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