Hotel Booking with Combined Rates

The Challenge

The existing hotel booking rooms-and-rates interface suffered from some usability issues that could lead to user confusion at best and user abandonment at worst:

• Information overload that makes it hard to scan
• Lack of clear separation between room types
• Lack of emphasis on special rates and perks
• Call-to-action buttons the don’t clearly indicate what they do
• Haphazard spacing of elements creates visual confusion

And when we add more information such as combined rates that have different nightly rates and perks, our usability problems get worse:

Design Iterations

Round 1: my first attempt at addressing all of the usability issues and providing a couple of variations on the call-to-action buttons.

To break down my solution, I’ll focus in on one room type from above (the 2nd screen from left):

• To address information overload and improve scannability, I reduced information density by collapsing certain details that can be expanded with a toggle
• Special rates are emphasized with a red brand color, and perks—although collapsed—are emphasized with a blue interactive color
• A combined rate is labeled as such and its nightly rates are laid out and styled in a more scannable way
• A room type is contained in a card UI pattern to create clear separation from other room types
• Spacing of elements is “tighter” and more visually organized

Round 2: I continue to iterate on the UI …

• I suggested consolidating the special rate title (in red) to simplify the UI but the Product Director said it would create more technical complexity rather than less.
• For the UI on larger screens, I designed a better pattern for the “Details” toggle that expands the room type information.

Round 3: I focused on designing the “Combined Rate” UI in order to provide useful information and be transparent about rates, which helps to reinforce Travelzoo’s customer-first business and product approach.

• I determined that a pop-over on click/tap would be the best approach to display the information.
• Adding an icon next to the title of the pop-over helps to visually describe its content and also makes it more distinctive. I created several variations for review to see which would work best.

Round 4: I focused on improving the call-to-action buttons that begin the checkout process.

Although it seemed relatively intuitive that a rate inside a prominent button would imply “book at this rate,” there was an opportunity to make it even more clear for users.

• Adding an arrow: since browser and mobile app users have become accustomed to using rightward arrow buttons to trigger “next” or “go” actions, we could utilize the same UI pattern on our call-to-action buttons to improve usability. I created several variations for review to see which would work best.
• Adding action text: I also created variations with “book” text to provide even more clarity.

Outcomes

The updated user interface was successfully implemented and shipped, with business stakeholders and internal users complimenting that it looks better, more organized, and easier to scan. I hope to get quantitative data on end-user impact soon.

Next Steps

I plan to work with the PMs to optimize conversions by A/B testing a few variations: expanded details vs. collapsed, “Book Now” vs. nightly rate CTA text. The work to improve hotel booking UX never stops, however, and more user studies and product enhancements will be needed in order to build user trust and loyalty that sets Travelzoo apart from its competitors and the OTAs.

Thanks for reading! 🙏

---