Hotel Booking Website
UX Case Study
~ A Journey Towards Simplified Bookings
Key Responsibilities & Deliverables:
-
Conducted in-depth competitive analysis to identify strengths and weaknesses of leading hotel booking platforms.
-
Designed and distributed user surveys to gather data on booking behaviours and mental models.
-
Facilitated usability testing to observe real-time user interactions and identify pain points.
-
Created user journey maps, flow diagrams, and affinity diagrams to visualise insights and guide design decisions.
-
Developed high-fidelity prototypes and wireframes, validating design solutions through iterative feedback.
Client:
Spring Hotels.
Tools:
Figma, Miro, SurveyMonkey, pen and paper.
Role:
UX Researcher and Designer.
Timeline:
4 weeks.
OVERVIEW
Project background and scope
This project was part of my Professional Diploma in UX Design from the UX Design Institute, where the challenge was to design a web application that delivers a smooth and intuitive experience for hotel bookings. The hotel industry, known for its reliance on visual storytelling and streamlined processes, requires websites that enable users to complete their bookings quickly, confidently, and with minimal friction. I aimed to understand common user pain points, enhance usability, and optimise the entire booking journey.
Approach: A User-Centred Design Thinking Process
I employed a user-centred design process to tackle this challenge. By following the Design Thinking frame I ensured every design decision was based on a deep understanding of user pain points and workflows.
DISCOVERY
& RESEARCH
Understanding the problem
To start this project, I first need to understand the problem before I can find a solution. In order to do this, I need to gather information by conducting user research.
My journey began with understanding how hotel booking websites operate and, more importantly, how they fail. The first step in tackling this issue was diving deep into competitive research.
Competitive benchmark
Objectives
-
Research competitors to learn best practices and how best-in-class websites solve user problems.
-
Highlight best practices we should emulate.
-
Highlight weak points we should improve.
-
Learn the industry stablished conventions
Focus
Analyse the following websites:
Mandarin Oriental: I'm designing a website for a hotel chain and MO is a well stablished brand with many positive features than can be emulated.
Ohla Barcelona: This hotel utilises a third party booking system and redirects their clients to finalise the booking. I found this to be a risky move since the user experience is out of our control once is redirected to a third-party software. However, it was worth to explore the user journey to learn about pain points.
Trivago: As a popular aggregator, Trivago offers numerous features than can be emulated and give us an idea of popular filters, searches and other stablished conventions within the hotel industry to book a stay.
Key Insights
-
Mandarin Oriental: While offering a luxurious experience, they need to simplify navigation and clarify pricing to avoid overwhelming users.
-
Ohla Barcelona: Reducing reliance on third-party systems is crucial for maintaining a seamless experience and trust with users.
-
Trivago: They offer great filtering options but should streamline them to prevent confusion and reduce information overload.
Survey
For this online survey I first needed to define the goal; What am I trying to learn? I've tried to learn about the users' behaviours when visiting hotel website and mental models including questions such as
-
Why did you visit the hotel website or app that day? What were you trying to do?
-
Where you able to complete your task that day? If not, tell us why not.
-
Which website/app did you visit?
The purpose of the survey was gathering the following data:
-
Qualitative data – Structured – multiple choice.
-
Quantitative data – Unstructured – open answer.
Objectives
-
Create an online survey for 15 users to learn about their experience when booking a hotel.
-
Learn their goals, whether anything is preventing them from doing it and what other features they would like to see on the websites and apps they use.
-
Obtain the surveys of 15 users that have booked a hotel within the last four weeks. To recruit users in this case study, I reached colleagues and friends via email. In a real scenario I'd use social media and the organisation clients mailing list. For a large scale survey potentially a specialised agency if the budget allows it.
-
Identify the user’s problems when using a hotel booking website.
Why?
-
It’s a way to gather user requirements both qualitative and quantitative.
-
It’s low cost
-
Unambiguous.
15 Participants
07 Questions
User Survey Insights
Usability Testing & Interviews
To understand the problems the users are facing when navigating a hotel website, I approached the user's point of view through three usability tests.
-
Two usability tests were pre recorded and provided by the UXDI.
-
A third in person usability test and in-depth interview was conducted by myself. I made sure the user didn't feel interrogated and explained that 'we are testing the product, not yourself'.
In this last UT, I asked the user to complete a series of tasks on two of the websites previously analysed in the competitive benchmark including booking a hotel room for two with breakfast and free cancellation.
The usability tests helped me to understand how they interact with elements such as the search bar, what they want when booking a room, their mental models and the issues they encounter in their journey.
It was interesting to observe them to validate notes from the competitive benchmark.
A good source to recruit users could be the client base of the organisation itself or via social media.
Ideally, the usability test would be done in person so we can observe and listen alongside recording the session. If the session has to be run remotely, we can compensate by recording the face of the user while performing the task(s) to analyse their facial expression and eye tracking.
Usability test structure
-
Introduction: Explain the test set up to the participants.
-
Interview: Gather some background information about the user and website usage.
-
Usability test: Identify goals, behaviours, positive interactions and pain points.
Usability Testing - User 01
Task 1 - ‘barcelo.com’
Traveling from Dublin to BCN. Book a holiday in Barcelona for a week - 12th June to 19th June.
Hotel in BCN with breakfast included, free cancellation option and pay on arrival. Location - in the heart of the city near the seaside.
Sarah Lee
Admin Manager
Location:
Ireland
Internet Access:
PC, Smartphone at work & evenings at home
Usual Websites:
News, Amazon, Living Social - deals website
Hotel Booking Habits:
As a treat once a month with her husband - traveling with friends. 1 or 2 nights. Looks for good restaurants.
Last Booking:
Faithlegg Hotel:- Booked directly via their website; easy and clear to use; Has never been let down by them.
Typically uses Booking.com to book and Tripadvisor for reviews.
SEARCH
User visits barcelo.com and clicks on ‘beach surroundings’, but immediately searches ‘by location’. Types ‘Barcelona’ and clicks ‘adults only’ suggestion.
A list of hotels pop-up but she doesn’t know where they are located. ‘I’d like a map’.
User wants to pick dates but the system asks for location first. Goes back to dates. She wants to know if the hotel is available first.
Month-by-month calendar pops-up and picks dates smoothly (she’d prefer a year view calendar).
Room is default to 1 and guests to 2. It’s what she needs. She checks ‘discount’ button but ‘there’s nothing there’ she could use.
RESULTS
Tripadvisor score ‘is good’, price and hotels ‘it’s clear’. Clicks on ‘see map’. Not too obvious for her. Selects the one ‘closer to the sea’. She’d be looking at the swimming pool and restaurant.
Scrolls through pictures. It is important for her. ‘If they didn’t have lots of pictures I’d be very dubious’
BOOKING
Clicks on ‘book’ and Black Friday deal pops-up. ‘I’d definitely give that a go’ and join My Barceló’.
Select a room – Shows a list and she has to scroll to see everything and makes it difficult to compare. One-page list would be better. Picks ‘Deluxe Premium’. Slow load. Complains about it.
Experience/adds-on page. She likes this but rather have one-pager. Breakfast at the bottom of the list.
‘Double bed’ add-on is confusing. She doesn’t understand the meaning of it.
She’d have liked to select free cancellation by now. ‘I wouldn’t go through all this hassle if it’s not available’.
Overall Thoughts and Experience
“It’s a little bit clunky”. She’s almost at the end of the process and still hasn’t got the option to choose ‘free cancellation’. She’d rather book the room first and then add extras.
Confusion over booking inclusions:
Users expressed uncertainty about what was included in their reservations. They couldn’t tell if they had breakfast or free cancellation, leaving them hesitant to complete the booking.
Visual clarity:
Most participants desired more images - of the rooms, amenities, and hotel surroundings - to guide their decisions.
They often missed buttons and features with clear affordances.
Security concerns:
Trust was a major issue, especially when users were redirected to third-party payment systems, creating a sense of insecurity.
IDEATION
Building the solution. From insights to design
Designing with Empathy.
Affinity Diagram
Objectives
-
Review previous research, taking notes and use those notes to create an affinity diagram.
-
Create structure on qualitative research data.
-
Collaborative analysis.
Tasks
-
Share the research with teammates.
-
Set-up a room with a whiteboard and review the data to brainstorm. Make notes on post-its to arrange them on the board creating relevant groups.
In order to create an affinity diagram for this project, I've gathered and shared all the previous research data - competitive site reviews, online survey and usability tests - with a colleague. Working together, we wrote down observations and notes that can be relevant to improve the product. This was an excellent exercise to organise data, collaborate and build consensus among the team.
Users want to see
-
Map with hotel location for easy decision-making.
-
More pictures of rooms to help build confidence in the selection.
-
Clear information about hotel amenities.
-
Free cancellation option.
Confusing the users
-
Difficulty comparing similar-looking rates.
-
Confusion over the ‘Double bed’ add-on.
-
Unclear if breakfast is included in the booking.
-
Users don’t know if they’re booking a ‘double’ or ‘twin’ room.
-
Use of acronyms in menus confuses users.
Pain Points
-
Default country selection should be based on the user's location instead of requiring scrolling through long lists.
-
Buttons hidden behind the cookies pop-up.
-
Drop-down menus with only one option is a waste of time.
-
Hotels listed without visible locations.
Potential UX risks
-
Sending users to a third-party website for booking completion risks losing control over the user experience, which could lead to inconsistencies or frustration.
Customer Journey Map
Customer journey maps are a brilliant tool to highlight aspects of the flow that needs to be fixed as a priority.
After analysing the goals, context, behaviour and pain points on each step, I've started making an assessment of whether the experience was positive or negative based on patterns seen when analysing previous data. See map on Figma
This map highlighted opportunities to improve each stage of the journey:
01
Streamlined Search Bar
Presenting room rates more clearly can reduce confusion, making it easier for users to compare options.
02
Enhanced Visual Assurance
Including more room photos builds user trust, giving them confidence in their booking decisions.
03
Clear Hotel Location Map
Providing an easily accessible map helps users verify hotel locations, making the decision process smoother.
04
Simplified Room Rates
Presenting room rates more clearly can reduce confusion, making it easier for users to compare options.
05
Subtle Add-On Integration
Ensure the add-on section is non-intrusive, offering additional features without overwhelming the user.
06
Visible Free Cancellation
Clearly display free cancellation options early in the booking process to boost user confidence and ease decision-making.
Flow Diagram
I created a flow diagram (see on Miro here) to ensure each step of the booking process was straightforward. This allowed me to identify unnecessary steps and streamline the entire flow, reducing user friction.
To design this flow diagram, I considered the different scenarios to build the most critical flow and identify the screen states. As I was creating the flow, a number of iterations were made to adjust the flow and target the issues previously encountered by the users such as wanting to see more pictures, location maps and having a better understanding of what's included in the booking.
Sketches
Fleshing out ideas: Using insights from the flow diagram and user testing, I iterated on sketched design solutions to address user pain points. Key features of the ideated sketch solutions included:
A prominent search bar on the homepage, allowing users to easily input destination, dates, and guests.
A two-month calendar view in the date picker, simplifying the date selection process.
A clear booking summary at every step, displaying what was included (e.g., free cancellation, breakfast, room type) to build trust and transparency.
Search and Location Map
Room types clearly displayed
Extended date range in calendar view
Clear and Detailed booking summary
Low-Fidelity Wireframing
After iterating on sketches and refining ideas based on user feedback, I created low-fidelity wireframes to establish the structure and layout of the homepage and add-ons section.
PROTOTYPE
The Final Product: A Seamless, Secure Booking Experience
I developed a high-fidelity, clickable prototype in Figma simulating the entire booking process. This clickable prototype follows the user flow to book a hotel room in Florence in March 2025 for two guests. The user books a Superior room with free cancellation and breakfast included. The next logical step would be to fed back into a validation phase and iteration over time for further improvements.
Hero Section - Search Hierarchy
Visibility of Hotel Locations on Map
Detailed Info on Available Rooms
Transparent Booking Policies & Process
RESULTS
Summary
-
Participant Engagement: All recruited users participated in the online survey, but a larger sample size is needed for more representative insights.
-
Usability Testing Value: Conducting more usability tests would provide deeper feedback and highlight both pain points and positive user interactions.
-
User-Centric Focus: A crucial lesson is to prioritise the user in the design process; we must design for their needs, not our own.
-
Business Viability: Ensuring that a project is viable, feasible, and desirable from the outset is essential for market success.
-
User Observation: Observing users in action revealed critical frustrations, enabling targeted design solutions.
-
Iterative Design: Continuous testing and prototyping is vital for refining the design into a seamless user experience.