background-shape
feature-image

Overview

The Challenge: Making hotel bookings on mobile should be quick and easy, but are often frustrating because of a lack of clarity, transparency, and trust.

The Goal: To design a mobile website with an intuitive and resassuring hotel booking process, allowing users to complete their booking in minutes.

My Role

As part of my Professional Diploma in UX Design, I was responsible for all research, design, and prototyping. My earlier user research identified clarity, transparency, and trust as three main design goals in achieving a smoother hotel booking process.

Deliverables

The final product is a mobile website for The Island Lodge, a proposed luxury beachfront resort located on St John’s Island, Singapore.

  • Figma prototype (high fidelity & medium fidelity)
  • Wireframes (high fidelity & medium fidelity)
  • Handover documentation: high fidelity annotations
  • User flow diagram
  • Sketches

For a more complete overview of the research process, please refer to the research case study.

Try it out for yourself

Try out the interactive prototype here, booking a room for 2 adults, from 15-18 July.

A note on prototype limitations: please choose the dates of your stay before adding guests. Please choose the Dolphin Deluxe Room, the Flexible Rate payment option, and add the Romance Under The Stars additional package. Enjoy!

🎯 Design Goal: Increase Clarity

TL;DR: Information overload delays decisions. Show only the most relevant information, and implement progressive disclosure to increase scannability.

Smoothly connect the browsing and booking processes: an intuitive booking experience means better conversion rates.

🔎 Design Goal: Increase Transparency

Hidden fees are a huge pain point. Price transparency needs to be implemented at all times, prices auto-updated whenever changes are made, and auto-calculated to facilitate user decisions.

🤝Design Goal: Increase Trust

Unique to online bookings, users need reassurance that there are real people on the other end. Users must be able to contact the hotel directly for special requests. Reviews from trusted external sites and a robust social media presence increase validation and reassurance.

User Flow

This primary user flow brings users across 10 screens. For users who have concluded their browsing - they enter their dates of travel and select rooms they’ve already decided on - this should take no longer than a few minutes.

However, some users are not done browsing!

In usability tests, these users explored the different types of rooms and amenities, without bothering to enter any planned dates for travel. To smoothly connect the browsing and booking processes, it was important to enable room selection before date selection as a secondary user flow.

Wireframe Sketches

Several important design features were already contained in these sketches:

  • a sticky header with constantly updated price and booking information (transparency)
  • external reviews (trust)
  • concise summaries for each room and payment option (clarity)

Medium-Fidelity Prototype & Usability Testing

Key Takeaways:

  • Visual content is key: actual images made it a lot easier for users to interact with the prototype and understand the content that was on the site. All images used are freely usable and obtained from Unsplash or Pexels.
  • Sign In/Sign Up: I had prioritised the ability to complete the hotel booking as a guest, but user testing conveyed the desirability of a membership portal for easy retrival and management of their hotel reservations.
  • Large tap targets on mobile are needed
  • Specific areas where layout can be clearer, copy can be refined, and digital affordances made stronger

Design Iterations

Problem: A user was confused as to whether the price and photo applied to the room above or the room below.
Response: The price is now displayed after the room name, as the user expected. Clicking anywhere in the room title area will bring the user to the individual room page.

Problem: It did not make sense to allow a ‘0 Adult’ or ‘0 Room’ booking.
Response: When the number of guests or rooms is at a minimum of 1, the ‘-’ button disappears.

Problem: Users were equally interested in the ‘Sign In’ or ‘Sign Up’ options as they were in the ‘Continue as Guest’ one. Not all requests need follow-up.
Response: Buttons were standardised in size and alignment, allowing for greater visual consistency. The line about necessary follow-up was removed.

Problem: Making the ‘Sign In’ screen an overlay over the previous screen increased visual clutter. There was potential confusion regarding the grayed-out back button.
Response: The ‘Sign In’ screen is its own screen, and the page title and back button are consistent across all screens.

Problem: A summary of the booking details should be presented legibly, with details such as a price breakdown and reservation number.
Response: More information was added and differentiated through visual hierarchy.

Visual Design

Mood images provided inspiration for the visual design. Since The Island Lodge is a high-end beach resort, I went for warm earthy tones, a primarily dark, muted palette, and serif headings to convey a sense of timeless tropical luxury.

In this style guide for typography and colour, the dark primary green evokes lush tropical vegetation. The light colours are used for pages with specific microtasks, such as date selection, before the user returns to the darker ‘home’ colour palette.

Knowing that yellow and green are a common set of confusion colours when it comes to colour blindness, I tested the colour scheme for accessibility to people with colour blindness and made adjustments.

High Fidelity Prototype

These wirefames are the basis for the high fidelity prototype shown at the start. Besides improvements to copy and content, I designed additional screens to facilitate the secondary user flow where room selection occurs before date selection. Designs for error states are also included.

Design Iterations

As price transparency is very important to users, and there is a lot of information presented, I expanded the price breakdown screen from a modal dropdown to a separate page.

Similarly, I split the final success screen into two, to properly congratulate the user for completing the booking process with a splash image, and give the all-important booking details sufficient space on a separate page. The ‘Back to Home’ button was also replaced with more useful functions of editing the reservation or sharing the trip with friends and family.

Design Annotations

To wrap up the design process, I produced these design annotations as handover documentation for developers to build the website accurately. The full 18-page document can be found here.

Design Feedback

“The prototype functions very well, it was easy to get through, easy to understand and very pleasant to look at.”

Further Exploration

As this was an academic project, a significant next step would be to integrate real-world hotel information, which often has a much higher level of complexity: many more details regarding payment, hotel policies, terms and conditions, health and security regulations, just to name a few. Working with a client with an existing repository of information to be presented would add complexity to the design process.

Since I chose to focus on a mobile website, a separate desktop version would also have to be designed. I’d also sketched out a comparison feature for different payment options if the hotel absolutely needed to offer many different options.

To further expand the scope of this project, I’d integrate this particular hotel into a larger hotel group, which manages several hotels across different locations. This is often the case with large hotel brands such as Four Seasons or Shangri-La. Each hotel would have its own identity, but be linked to the larger brand ecosystem. I’d expect this to make the booking process more exploratory and complex, with greater importance placed on brand loyalty and membership privileges.

Learning Points

Going through the entire UX process from research to analysis to design was highly enriching and educational. I especially appreciated the insights gained through usability testing - nothing challenges or validates a design as much as seeing someone completely unfamiliar with it interact with it for the first time.

Technically, I thoroughly enjoyed learning Figma from scratch through this project. I’d like to delve deeper into user interface design with grid systems for screens that are pixel-perfect, and visual design by developing a strong brand identity.