UX Hotel
A case study on the hotel booking process
Role:
Student at UX Design Institute
Work:
Project work
Duration:
4 months
Tools:
Figma | Miro | Lookback
Activities:
Heuristic Evaluation | Survey | User Test | Affinity Diagram | Journey Mapping |
Flow Diagram | Sketching | Wireframing | Prototyping
The booking process is a key user journey, and getting it right is business critical.
I was tasked to redesign the hotel booking process and create a prototype for a hotel website, following the design process from research to design.
Aiming to make the booking process frictionless and intuitive, making the user feel in control and confident before check out.
Let me take you through the project ↓
Starting off with desk research
The project began with a detailed analysis of competitors, both hotel websites and search aggregators, in addition to an extensive Heuristic Evaluation of the hotel booking process.
This evaluation identified best practices, revealed key pain points and usability challenges that might not have been uncovered through other methods. The outcome was a detailed overview with valuable insights that served as essential benchmarks and valuable referenced for future design decisions.
This initial research established a solid foundation for further research and testing. Emerging hypotheses and unanswered questions created the framework for exploration in the next steps - surveys and user testing.
Heuristic Evaluation and Competitor Analysis
Collecting quantitative and qualitative data
A Survey was created to collect quantitative data directly from users, aiming to gather user data on goals, preferences, opinions and behaviours at scale.
The main take-aways:
To do research for oneself and others emerged as users primary goal.
Most people book hotels for leisure, which helps to understand secondary goals and preferences.
Location, price and images were identified as the three most important factors when making a decision.
76% of participants stated dates are fixed.
62% of participants complete the booking on a desktop, rather than mobile or tablet, confirming the importance of the website user journey.
The results will inform design decisions with statistically significant data, helping to prioritise features, identify areas for improvement, and ensure the product aligns with user expectations and requirements.
Online Survey
User Testing
Conducted Usability Tests to gather qualitative data and assess how users navigate and interact with a product. By observing real users as they complete tasks, the goal was to gain insights into their behaviour and overall usability, revealing preferences and pain points.
The tests were conducted with a script to guide the conversation, and to make sure areas in need for further research and testing were covered.
Some of the key take-aways:
Quality and quantity of images are important for a positive user experience. They give users a clear view of hotel facilities, room sizes, and amenities. Too few images can create a negative impression.
Users hesitated at payment due to uncertainty about the booking details, highlighting the need for clear booking summary and inclusion statements before payment.
Users wanted more information about hotel locations, including proximity to the city centre and nearby amenities. The "see on map" feature wasn't easily noticeable.
Users disliked extensive scrolling, preferring concise screens that offer a better overview and make comparison easier.
Free cancellation and customer reviews are critical factors that should be prominently displayed early in the booking process.
The desired outcome was to enhance the product's usability by incorporating user feedback into future design decisions, ensuring the product is intuitive, efficient, and effective for the target audience.
“
“
“If you didn’t have loads of photos, that’d be dubious, I wouldn’t go there because I’d say they’re hiding something”
“I don't know how confident I feel..I want to know exactly what I’m getting just before I hit pay”
“Personally I like when that’s actually on the one page, so you don’t have to scroll down”
Turning research data into actionable insights
Through an Affinity Diagram, the research data was organised and categorised to identify common themes, patterns, and insights.
This process uncovered opportunities and areas of focus across the booking process, relating to the overall experience and specific features and functionalities.
Key themes that emerged:
Search functions and result visibility
Price visibility
Location and map features
Images, quality and quantity
Clarity on inclusions and cancellation policy
Add-ons
Customer reviews
Navigation, CTAs, and usability
Ultimately, this exercise provided a deep understanding of user perspectives, leading to more informed design decisions and resulting in user-centred and effective design solutions.
Affinity Diagram
A Customer Journey Map was used as a tool to visualise the complete user experience, from initial contact to final interaction.
This exercise identified key areas for improvement to ensure a positive experience throughout the booking process.
It provided valuable insights on how to improve user satisfaction and create more user-centred solutions.
Costumer Journey Map
Optimising touchpoints to create a seamless user experience
To thoroughly understand the user's journey, a Flow Diagram was created to map out and visualise each step, breaking down the process into individual screens, actions, and screen states.
This comprehensive overview facilitated the streamlining of the user experience and optimisation of interactions, ensuring a cohesive and positive overall experience.
By identifying and eliminating potential pain points, the goal was to create a clear and intuitive path for the user, minimising frustration and improving usability, ultimately enhancing user satisfaction and ensuring a seamless and enjoyable experience.
Flow Diagram
Generating, communicating and refining ideas
Sketching was a quick, low-fidelity method to explore ideas and visualise concepts, establishing a strong foundation for more detailed designs later on.
The process allowed for brainstorming, iteration on design solutions, and helped to identify potential issues early on. Insights from the research were implemented and reflected in the design to ensure user-centric design.
In some cases, components were drawn and cut out, allowing for easy rearrangement and visualisation of alternative structures and designs.
Sketching
Sketching out rough design ideas quickly, before creating more detailed sketches
With the primary goal being research, a visible search bar and filters were added to easily refine and amend the search results
Location was the most important factor so the map feature was given priority through size with option to view in large format
Price and images were also important features, both visible in the hotel description
With images being one of the deciding factors, images were placed at the top of the screen, option to view large format
Short and concise description made scannable with icons
Cancellation policy and customer reviews included early in the process
Location of hotel can be viewed through map feature
Consistent navigation and progress indicator to enhance usability
Option to view all inclusions and amenities of the room
Short description of room with price both per night and total
Add-ons on a separate and concise screen, with the option to skip
Booking summary visible early on, updated with inclusions throughout the process to give the user clarity before payment
Bringing design ideas to life
Prototype
Building on the sketched designs, a medium-fidelity interactive prototype was created to simulate user interaction and functionality.
The purpose was to test and validate design concepts in a realistic context - identify usability issues, gather user feedback, and refine interactions and features.
This was a medium-fidelity prototype, intended to be handed over to a UI designer before development.
The desired outcome was to ensure the design effectively meets user needs and expectations, resulting in a more, user-friendly final product.
Adding annotations for a smooth handover
Comments were added directly into Figma, to clarify and communicate the purpose and functionality of design elements, ensuring everyone understands the design intentions.
They aim to enhance understanding by providing clear instructions for developers to ensure accurate implementation, and facilitate collaboration.
Annotations
Evaluation
Impact
As this is a speculative project there are no metrics to measure the impact. However, the feedback received from the UX Design Institute on this project is included below. Receiving a 90% grade.
Prototype: The prototype contains a good amount of interactive elements to test out the high level user flow. The CTA's are well placed, nice work adding contextual info. throughout the flow. The flow works well from start to finish. Well done!
Annotations: Nice work with your annotations, lots of detail here! This document contains all the information the developer would need to build the booking process accurately.
Lessons Learnt
Had time not been a constraint I would do more user testing after the design of the prototype to pick up any opportunities for improvement, ensuring an intuitive journey and that user needs are met.