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.
1 UX designer
1 product manager
1 UX writer
1 prod. marketing manager
Overall: 8+ weeks
Discovery & Research: 2+ weeks
Design & testing: 6 weeks
Good ol' pen & paper
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.
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.
Designed for scalability: The new design could be easily embedded in the Booking.com app, bringing 2x as much traffic and growth.
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.
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.
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.
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.
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.
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.