MHR
Redesigning MHR Hotel’s Rate Card: Enhancing the Guest Experience
ROLE
UX Designer
DURATION
5 weeks
Background
When confusion costs trust, MHR turned to us for solutions
MHR Hotel reached out to us with concerns about recurring guest complaints regarding the clarity of their non-refundable rate conditions. Guests found it difficult to understand which rates were flexible, leading to frustration during the booking process.
Problem
A Frustrating Experience: Disconnected rate information and limited comparison
The root of the issue was a restrictive rate card layout. On a standard screen width of 900 pixels, users could only view one rate card at a time without scrolling. This layout made it incredibly difficult for guests to compare rates side by side, especially when distinguishing between flexible and non-refundable options.
Furthermore, there were no clear indicators or labels stating that a rate was non-refundable; users could only find this information buried within the cancellation policy text. The result was confusion, which directly impacted the booking experience and customer satisfaction.
Approach
How might we simplify MHR Hotel's rate display to help guests easily differentiate between non-refundable and flexible rates?
To tackle the challenge, we began by analyzing competitor strategies to understand how leading hotel brands design their rate displays. By benchmarking against industry standards, we identified key practices, such as intuitive labeling, side-by-side comparisons, and the strategic use of visual cues. These insights shaped our approach to crafting a simplified and user-friendly rate card that addressed MHR Hotel's specific pain points while aligning with guest expectations for clarity and transparency.
Competitor: IHG
How IHG’s Three-Column Layout enhances rate transparency
IHG’s three-column layout effectively displays multiple rate types side by side, allowing guests to compare options at a glance. This design not only improves clarity but also reduces the need for excessive scrolling, creating a more seamless and efficient booking experience.
Clear icon callouts
Icons create a strong visual hierarchy, enabling users to quickly scan and understand key information at a glance. By reducing cognitive load, they help guests effortlessly identify the most relevant details about each rate, improving clarity and streamlining decision-making.
Competitor: Marriot
Simplifying rate details and reducing clutter
Using a lightbox overlay to display rate details enhances the user experience by providing quick, focused access to essential information. This approach minimizes scrolling and reduces clutter on the main page, creating a clean and streamlined interface that helps users stay engaged and make informed decisions with ease.
Client's concern
The client wanted to clearly highlight refundable rates without overshadowing the benefit of free member bookings.
Solution
Clear labels and intuitive layouts for better booking
To address the client’s concern about highlighting free booking for members, we ensured that member rates were prominently displayed first on the rate cards. The original price was shown with a strikethrough, emphasizing the reduced member rate. This visual hierarchy guided users toward the preferred action, encouraging them to sign up or log in to secure the best deal. Additionally, a "Not a member yet?" hyperlink opens a lightbox showcasing the benefits of membership, further incentivizing users to join and enjoy exclusive rates.
3 column layout and lightbox overlay
This layout allows users to easily compare rates side by side, making it simpler to find the best option for their budget and preferences. It also displays more rates at once, reducing page length compared to a single-column layout. Rate details are hidden in an accordion to maintain a clean, concise layout. Users can expand sections to view more details as needed, avoiding visual clutter.
A single "Book Now" CTA
A single "Book Now" button is featured prominently. When users click "Book Now," they are directed to the checkout page, where they can choose to book as a guest, sign up as a member, or log in. This approach keeps the process straightforward while still offering flexible options at the appropriate stage of the journey.
Final Takeaways
Intentional decision-making
Throughout the project, I learned the importance of having clear objectives for each iteration. At times, shifting goals caused inefficiencies. Moving forward, I’ll ensure that every decision is tied to specific user or business outcomes for better clarity and direction.