The Challenge: How can a mobile website for a hotel be best designed?
The Goal: To find out users’ goals, behaviours, and pain points regarding making hotel bookings on mobile through in-depth user research
Research methods include:
- competitive analysis
- online survey
- usability tests
Findings were synthesised through affinity diagramming and presented in a customer journey map.
For the design outcome, please refer to The Island Lodge Hotel Booking case study.
To understand users’ goals, behaviours, and pain points regarding the online hotel booking process, I conducted an online survey with family and friends.
This was a valuable source of insights. The full report on the survey results can be found here.
- The online booking process can be split into four distinct stages: Research, Comparison, Investigation, and Booking. Users conduct initial breadth-based research with a search engine like Google or a travel aggregator, compare and investigate options, and finally book a hotel, often through its own specific site.
- Finding and comparing options were the most time-consuming processes. Hence, tools that helped (eg. filters, map view) were very much appreciated.
- Price savings and flexible/free cancellation policies were the most important things that users looked for.
- Hidden fees were by far the most common source of frustration.
Time to get more specific: I was designing the website of a luxury beachfront hotel located St John’s Island, Singapore. Its closest competitors are hotels located on the touristic holiday island of Sentosa, which offers a myriad of high-end hotels, resorts, and holiday programmes. To find out established conventions, best practices, as well as mistakes to avoid, I looked at the mobile websites of four hotels in Sentosa - The Shangri-La Rasa Sentosa, The Barracks Hotel, Amara Resort Sanctuary, and Capella Singapore - with a particular focus on their hotel booking process.
A 25-page document containing the full analysis of the first two hotels can be found here.
- Constant display of price thus far incurred establishes price transparency
- Microtasks such as date selection are on separate modal pages with nothing else to distract users’ focus
- Filters for room selection mitigate an overwhelming number of options
- Collapsible sections save screen space and implement progressive disclosure
- Establish visual hierarchy and maintain consistent typography and formatting
- All images should be optimised for mobile
- Text should be concise, especially with limited screen space on mobile
- Labels (text and icons) should be tested to ensure they make sense to users
- Avoid an overwhelming number of options that are not significantly different from each other
To see how real-life users interacted with existing mobile hotel websites, I conducted a usability test with the Shangri-La Rasa Sentosa website and The Barracks Hotel website. I saw firsthand that browsing was an important part of the booking process, as users naturally wanted to see what the hotel had to offer.
- Browse first, book later. The browsing and booking processes should be smoothly connected.
- Date selection usually occurs before room selection, but this can be reversed.
- Pricing structure needs to be clear and upfront.
- Difficulty in comparing many different room and payment options leads to frustration.
- Avoid information overload. A direct quote: “Because there are too many words I’m not going to read.”
Affinity diagramming was used to synthesise the findings from all these research methods, generating a 10-step hotel booking sequence as well as general notes about best practices, content, and layout.
Zoom in and explore the affinity diagram here:
Customer Journey Map
The affinity diagram results were then translated into a customer journey map about the hotel booking process. All quotes are directly taken from research participants.
Breadth first, then depth. Users would first conduct a broad-based search for hotels with travel aggregators, and then book directly from individual hotel websites. By contacting hotels directly, they hoped to get a better price, the most accurate and updated information, and increased customisation options.
Browse first, book later. Within a single hotel website, users engage in an exploratory browsing process first, finding out what the hotel has to offer, before switching to the linear booking process.
No hidden fees. Hidden fees were repeatedly mentioned as a huge pain point.
TL;DR. Information overload frustrates users and delays decisions, especially when it comes to tbe most crucial point: payment.
These research insights lent themselves to several key design approaches:
- I chose to design an individual hotel website, focusing on the later part of the hotel booking process.
- Smoothly connecting the browsing and booking processes within a hotel website is important to increase user satisfaction as well as conversion rates.
- Price transparency should be implemented throughout the booking process, prices should be displayed upfront.
- Only the most relevant information should be shown, and progressive disclosure implemented to increase comprehension and scannability.
In summary, I came up with 3 main design goals to focus the design.
🎯 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.
This research case study leads to the design of The Island Lodge mobile hotel website. Find out what happens next!