Hotel Halara
UX Design Case Study
Client
UX Design Institute
Timeline
July – Dec. 2023
UI Mentor
Mustafa Al Awad
My Role
UX Design
Project Tools
Booking a hotel can often be a challenging task, filled with complexities and uncertainties. However, I embarked on a mission to change that.
My goal was to create a simple, intuitive and user-friendly hotel booking experience.
I started with the idea that UX is a problem-solving discipline; It’s all about identifying users’ problems, developing & validating solutions for them.
MY PROCESS
Recipe for UX Success
Research
01
Concept
02
The key stage: defining further solutions
Design
03
A prototype is worth thousand words
Validation
04
Testing my prototype: the moment of truth
Research
Understanding users’ goals is key to creating products that truly resonate with their needs. Secondly, we must discover if users can achieve these goals and, if not, find the reasons why.
Competitive Benchmarking
For this project, I analyzed four competitors: Loveholidays, Airbnb, Samsara Ubud, and The Maritime. Loveholidays and Airbnb operate as booking platforms, while Samsara Ubud and The Maritime are hotel websites. Notably, Samsara Ubud received the highest total visits in February 2023, with 4.0 million visits, compared to Airbnb’s 1.1 million.
Key Findings
Adopting a conventional layout with minimal distractions
By minimizing distractions and adhering to established design conventions, users can navigate the website more easily.
Error messages
By providing users with precise explanations of errors encountered and offering alternative solutions, we can avoid user frustration and guide them towards successfully completing their tasks.
Clear Visual Cues
Clear and intuitive visual elements help users understand where to click or interact, making the overall experience more intuitive and user-friendly.
Structuring information
By avoiding unnecessary details or clutter, we allow users to focus on the essential aspects of their booking process and reduce cognitive overload.
Language clarity
By employing clear and concise language, avoiding technical jargon, and providing explanations where necessary, we can improve comprehension and facilitate better understanding.
Key Findings
Recent Engagement with platforms
A significant 77.7% of participants had used hotel websites in the last three months.
Preffered website among participants
Room for improvement
Online Survey
The next step in my research was to conduct an online survey to collect quantitative and qualitative data about hotel booking websites.
I used Google Forms to make the survey and distributed it across SurveySwap and various social media platforms.
This approach aimed to provide a comprehensive insight into users’ goals, behaviours, and contexts, while also identifying room for improvement in the realm of hotel booking websites.
Reflection
Gathering a larger sample size would be necessary to gain more comprehensive insights. With the current small sample size, there’s a high likelihood of a large margin of error. Increasing the number of participants would enhance the reliability and accuracy of the findings.
Key Findings
Room photos
Users prioritize seeing photos of the exact rooms they are booking, and inadequate room photos can consequently lead to a lack of trust.
Filters
Users expect to have filters to adjust their search, especially filters by location, price and meal plan.
Room Extras
Users prefer flexibility and choice of room extras.
Room description
Analysis
Affinity Diagram
After researching the problem, I utilized the K-J method, also known as an affinity diagram. Initially, I collected raw data and shared it with my friend. Together, we digested the data and used post-it notes to record observations. I then grouped notes into categories based on common themes, such as: search tools, map/hotel location, search results/filters, and ease of use/clarity.
I found the affinity diagram to be extremely valuable and enjoyable. It allowed me to explore new connections between complex ideas by grouping related ideas.
Everything was literary in front of me – I was ready to take action.
Customer Journey Map
Customer Journey Map
Customer Journey Map shows the customer’s point of view and tracks how the product can affect customer mood. I outlined the customer journey from website visit to hotel payment, defining user goals, behaviours and context through each step. I added direct user quotes to give the user a voice and enhance empathy throughout the process.
I noticed a decline in the user’s mood starting from the search step, primarily due to the difficulty in changing dates.
Concept
How Might We (HMW) Statements
How might we allow users to narrow down their search?
How might we design room descriptions for easy scanability?
How might we give users freedom and control when adding extras to their stay?
How might we present the booking summary concisely and clearly?
Flow Diagram
During the analysis, I identified opportunities to optimize the hotel booking flow. For example, I implemented filters to allow users to narrow their search according to their needs and option to skip add-ons.
This user flow diagram outlines all screens users will encounter and the actions users can take at each step, from the home screen to payment confirmation. Additionally, there was a clear description of what happens off-screen to ensure the entire process is well-understood.
Interaction Design
The next stage of the design process involved creating an advanced flow diagram.
This helped me visualize the layout and structure of the digital product before diving into digital design tools.
Through this process, I was guided by my research findings prioritising clear layout, descriptive context, and visuals to aid scanning.
How Might We (HMW) Statements Solutions
How might we allow users to narrow down their search?
We can implement robust filtering options. This includes providing filters for price range, amenities, and other relevant criteria. Additionally, incorporating advanced search capabilities, such as sorting options, can help users quickly find what they’re looking for.
How might we design room descriptions for easy scanability?
Room descriptions should be organized in a way that allows users to quickly scan and understand key information. This can be achieved by using bullet points or lists to highlight amenities and by providing clear headings for different sections of the description. Additionally, the use of icons can further enhance scannability by visually representing different amenities or features.
How might we give users freedom and control when adding extras to their stay?
To give users freedom and control when adding extras to their stay, we can allow users to easily add or remove extras from their booking without having to navigate through multiple screens. Additionally, users will have the option to skip this step altogether if they prefer not to add any extras to their booking.
How might we present the booking summary concisely and clearly?
The booking summary should be dynamically presented to the user as they select their room. Chunking of information will be employed to ease comprehension, allowing users to quickly grasp key details such as booking dates, room type, and total cost. Additionally, the price breakdown will be prominently displayed and updated in real-time as the user selects additional options, ensuring transparency and clarity throughout the booking process.
Design
Prototype
After completing a UI course, I undertook a complete iteration of my prototype, enhancing its usability and visual appeal.
My objective was to create a more intuitive and visually appealing product that better aligns with user needs and expectations.
Annotations
I created clear annotations to help the development team understand the design vision and user experience better. By providing detailed annotations, ambiguity or confusion is eliminated, reducing the need for constant communication between designers and developers.
Validation
Floor plan
User found the floor plan feature valuable and helpful. This provided users with useful visual information about the room layout.
King bed option
The king bed option was appreciated by the users, indicating that it meets the user’s specific needs or preference.
Search Filters
The filters were chunked into categories, making it easy for users to locate and select their desired criteria.
Hotel location
It would be beneficial to include location or map features in the room description for clarity. User didn’t notice the hotel location on the homepage.
Calendar position
Users of smaller laptops may have had trouble with the location of the calendar, as it was not fully visible.