Project overview

Serenity Hideaway’s website created interest, but it was underperforming as a booking channel.

Zero bookings came through the website and app, with most guests calling or emailing the hotel to check availability manually.

The existing experience worked well as a brand and lifestyle site, but not as a booking journey.

Duration: 4-6 weeks

Scope: Heuristic evaluation · Competitive analysis · UX/UI redesign for Web and App · Usability testing

Role: Senior Product Designer

My approach

I did not have direct access to hotel guests or analytics, so I approached the problem through:

  • heuristic evaluation

  • competitor analysis

  • usability principles

  • hypothesis-driven design

Rather than assuming what users wanted, I focused on identifying likely friction points and validating improvements through usability testing later in the process.

Heuristic evaluation

I reviewed the experience using usability and conversion heuristics, focusing on:

  • visibility of primary actions

  • hierarchy and scannability

  • cognitive load

  • trust and reassurance

  • booking flow friction

  • accessibility

Key issues identified

  • Booking was not visually prioritised. The booking CTA existed, but it competed with secondary actions and lacked emphasis.

  • Availability checking was hidden. Users could not immediately check room availability from the homepage.

  • Decision-making information was limited. The site lacked pricing visibility, room comparison and reassurance signals such as reviews and cancellation messaging.

  • The booking flow felt disconnected. The final booking process relied on a third-party booking engine, creating an abrupt UI transition.

  • The hierarchy reduced scannability. Several sections carried equal visual weight, making it difficult to identify the primary action quickly.

Competitive analysis

To understand common booking behaviours, I analysed hotel and travel platforms including Booking.com and Airbnb.com .

I observed consistent interaction patterns across competitors:

  • immediate date selection

  • availability-first flows

  • strong booking CTA visibility

  • room comparison before commitment

  • trust indicators near decision points

Based on these patterns, I hypothesised that users expected to validate availability first before exploring the property in depth.

Design strategy

I redesigned the homepage around a clearer booking journey:

Validate → Compare → Trust → Book

The redesign focused on:

  • reducing cognitive load

  • improving hierarchy

  • aligning with familiar booking patterns

  • increasing confidence before checkout

  • making the next action obvious

Validate

Dates and availability

Compare

Rooms and pricing

Trust

Reviews and reassurance

Book

Clear CTA & redirect handling

Solution

1. Booking-first hero section

I introduced a date and guest selector above the fold alongside a clear “Check availability” CTA. This allowed users to begin the booking process immediately without navigating away from the homepage.

2. Stronger hierarchy and CTA system

I redesigned the CTA hierarchy to distinguish:

  • primary booking actions

  • secondary navigation

  • tertiary supporting content

I also replaced the low-contrast terracotta accent colour with a more accessible light blue to improve CTA visibility and contrast.

3. Improved room discovery

I introduced room cards that included:

  • pricing

  • guest capacity

  • amenities

  • image carousel previews

This helped users compare options more quickly and reduced decision friction.

4. Added trust and reassurance

To increase confidence during decision-making, I added:

  • verified review summaries

  • cancellation reassurance

  • “best price guarantee” messaging

These elements were positioned closer to booking actions rather than deeper in the page.

5. Improved navigation and accessibility

I simplified the navigation structure and improved:

  • colour contrast

  • typography hierarchy

  • spacing consistency

  • alignment

  • content scannability

I also added language switching and a clearer mobile navigation structure.

6. Designing around technical constraints

One of the main constraints was the hotel’s third-party booking engine, which could not be fully redesigned or integrated seamlessly.

Instead of hiding the transition, I added a pre-booking modal explaining that users would be redirected to a secure booking platform.

This helped set expectations before the UI changed.

New design - Top part of the screen

Expectation-setting before redirect reduced disruption caused by external booking flow

Third party plug-in. Restricted access to any UI changes

Validation

I conducted moderated usability testing with 8 participants.

Task: Book a 3-night stay using any dates of their choice.

Results:

  • 8/8 users completed the booking flow successfully

  • users consistently interacted with the date selector first

  • no participants attempted to contact the hotel during the task

  • users understood the third-party redirect after seeing the explanatory modal

The testing validated that the revised hierarchy and booking entry point aligned more closely with expected booking behaviour.

Next steps

Future improvements could include:

  • redesigning the “Things to do” section into a more interactive discovery experience

  • improving continuity between the website and booking engine

  • introducing behavioural analytics to measure booking funnel drop-offs

  • Metrics about impact and successful booking via the website or app

Reflection

This project highlighted the value of heuristic evaluation as a fast way to identify likely usability and conversion issues when direct user access is limited.

However, the most important step was validating assumptions through usability testing rather than relying on heuristics alone.

It also reinforced that familiar booking patterns often outperform more original but less predictable experiences.

Back to case studies