the inn thing
UX, UXR
Overview
The following is a UX case study concerning hotel booking apps that was conducted alongside my Professional Diploma in UX Design at the UX Design Institute in 2024.
The case study documents the design journey from thorough user research and analysis, to consolidating my findings into a methodical design intention. All of the preliminary work was then focussed in to a high fidelity prototype that addresses the user pain points and solutions that were uncovered in the earlier design steps.
Research
Competitive Benchmarking
Online Survey
Usability Testing
I reviewed and compared the usability of four competitor apps in the hotel industry in order to better understand how best in class websites and apps solve the problems that we are trying to solve. This exercise enabled me to understand not only the conventions that should be followed, but also to locate potential pain points for the user.
Findings:
-
Overall interface should be uncluttered with clear CTAs at each stage of the browsing and booking process.
​
-
Pricing should be consistent throughout the browsing and booking process to avoid misleading the user.
​
-
Impactful visual content presents an accurate representation of hotels and hotel rooms.
Competitive Benchmark Sample 1
Competitive Benchmark Sample 2
Research
Competitive Benchmarking
Online Survey
Usability Testing
Distributing an online survey provided an opportunity to better understand user goals and behaviours when using hotel booking apps. I gained feedback in the form of both quantitive and qualitative data from 36 participants, yielding results that indicated what users were trying achieve in the browsing sessions, what pain points they might have come across, and ultimately what additional features or changes they would like to see in a hotel booking app.
Findings:
-
We can gather from our findings that users are well versed with the hotel browsing and booking process, with 97.2% stating that they visit hotel booking websites of apps at least once per year. 55.6% do so multiple times a year.
​
-
Users preferred to complete the browsing and booking process using a mobile website or app, with 52.8% of respondents opting to use a mobile device over a computer.
​
-
The results showed that 55.6% of users would tend to use an aggregator website or app, and would use it as a search engine to compare deals and prices. Whereas 44.4% would book directly through the hotel’s website for security and reliability purposes.
​
-
Users expressed a number of improvements to hotel booking websites and apps, including; a minimalistic interface that is free from clutter, a simpler search function and more intuitive navigation.
Online Survey Sample 1
Online Survey Sample 2
Research
Competitive Benchmarking
Online Survey
Usability Testing
Usability testing afforded me the chance to observe users interacting with hotel booking apps and discern their mental models, behaviours and pain points throughout their browsing session. I reviewed two usability tests that were recorded prior to my own research, as well as conducting my own usability test. 3 users undertook a usability test in total, with 4 apps being tested.
Findings:
-
Users would appreciate an intuitive log-in/sign-up feature that does not disrupt the browsing process.
​
-
All users voiced an appreciation for visually appealing aesthetics, particularly the striking home page, and the importance of accurate representation of the hotel and rooms on offer.
​
-
Inclusion of customer ratings and reviews are critical for enhancing user trust.
​
-
Users expressed enjoyment at using apps that offered intuitive navigation, with distinct back buttons and clear CTAs.
​
-
An integrated calendar for both check-in and check-out is preferred by all users for an intuitive date selection.
​
-
Uncomplicated location information or map view is paramount for users that struggled to navigate these features on the apps.
​
-
Users value clear details about the booking details and pricing structures of the hotel rooms.
Note Taking Participant 1
Note Taking Sample 1
Note Taking Participant 2
Usability Test Participant 1
Note Taking Sample 2
Note Taking Sample 3
Analysis
Affinity Diagram
Customer Journey Map
Together with an associate I created an affinity diagram as a means to organise the as yet unstructured data into logical groups to discern what the key focus of the app should be. This exercise emphasised the importance of collaboration and allowed me to examine combined user behaviours and preferences.
The groups that emerged from this activity highlighted that emphasis should be placed on the following:
-
Users prior booking habits as well as preferences and suggestions.
​
-
Users place great faith and trust in ratings and reviews.
​
-
Inconsistent pricing, assertive marketing pop-ups, and unintuitive sign-up/sign-in prompts are noted as pain points for users.
​
-
Users enjoy an uncluttered interface that has simple intuitive navigation and clear CTAs.
​
-
Users enjoy enticing and accurate imagery in their browsing sessions.
​
-
Search function should be intuitive, and offer simple date selection, a filter function and a map view.
​
-
Search results should display adequate hotel information that is necessary for the stage of their browsing session.
​
Affinity Diagram Group Sorting Exercise
Affinity Diagram Final Groups
Analysis
Affinity Diagram
Customer Journey Map
Once the data had been assembled into groups I created an overview of the user experience on hotel booking apps, defining the high level steps in the user journey. The customer journey map is a comprehensive depiction of the most common user experience, so is a useful tool to understand where the experience is lacking at a glance.
This analysis methodology provided a summary of user goals, behaviours, mental models, pain points and positive aspects of the browsing and booking process. I used direct user quotes to contextualise each stage of the experience, encouraging empathy for the user.
Findings:
-
User must feel empowered to enter the browsing process as a guest user, and not bombarded with marketing pop-ups and sign up adverts.
​
-
Users find the search results and hotel information to be a predominant pain point. This is due to overcrowded interfaces, and apps not being forthcoming with pricing structures. This will be a key area of focus when designing ‘the inn thing’.
​
-
Users found the search function, hotel room information and payment screens to be satisfactory, with a few noted areas for improvement.
​
Customer Journey Map Sample (Emotion Graph)
Design
User Flow Diagram
Interaction Design
Prototype
Annotations
When commencing with the design phase of the process I produced a comprehensive user flow diagram that determined the high level booking flow for my hotel booking app. The diagram serves a visual representation of the app’s flow from the homepage to the booking confirmation, capturing every user interaction and screen state. I utilised this diagram to acknowledge and address the pain points that were identified in the research and analysis stage of the design process.
User Flow Initial Rough Sketch
Final User Flow Sample
Design
User Flow Diagram
Interaction Design
Prototype
Annotations
I subsequently used the flow diagram as a basis for further development and created a series of sketches to illustrate the interactions within the journey of the app. Careful consideration was given to depicting each screen state, ensuring the sketches communicated a successful user flow.
This iterative process paid attention to the user goals, behaviours and pain points that were highlighted in the research and analysis phase of the design process. After the sketches had been revised I had reached a compilation of designs that conveyed a user-centric experience for browsing and booking hotels online.
Design Sketch Sample 1
Design Sketch Sample 2
Design Sketch Sample 3
Design
User Flow Diagram
Interaction Design
Prototype
Annotations
After finalizing the initial sketches, I proceeded to create a medium to high-fidelity prototype that encapsulated the key insights from my research, analysis, and design process. This level of detail was chosen to facilitate realistic user testing and validation.
​
Throughout the design process, I focused on establishing credibility through thoughtful color choices and ensuring readability with high contrast. To meet users' desire for a minimalist, easy-to-navigate interface, I prioritised simplicity, designed clear CTAs, a streamlined search function, and intuitive date selection tools. I also integrated a smooth log-in/sign-up process to avoid disrupting users' browsing experience, reducing friction during key interactions. Finally, I tackled users' concerns about inconsistent pricing by ensuring transparency throughout the booking process, including accurate hotel imagery and customer reviews.
​
User testing was subsequently conducted to evaluate and refine the design based on feedback.
'the inn thing' Prototype
Design
User Flow Diagram
Interaction Design
Prototype
Annotations
The prototype had been tried and tested, so I produced an accompanied annotated version that describes the essential functionality of the app. This annotated file is part of the handover documentation for developers and details every screen, screen state, component and interaction so that the product is easily explained and can be built accurately.
Note: All interactions have been disabled in this version to not
distract from the annotations. Press 'C' to view all annotations.
Annotations Sample 1
Annotations Sample 2
Annotations Sample 3
Learnings
The value of working collaboratively.
Though this project was part of my Professional Diploma in UX Design I feel that the areas that I benefitted from the most were those where I collaborated with others. It was helpful to have fresh perspectives and I felt the project propelled when I attained these collective insights.
The importance of collating research through multiple channels.
Gathering a wealth of information from different sources laid the foundation for a strong case study. Establishing this foundation enabled me to ensure my later designs addressed the core of the problem.
What I would do differently next time.
If I had more time to complete this case study I would elevate the prototype phase by user testing each iteration of the app. I would also introduce more interactivity within the prototype to enhance the user experience, in particular on the ‘Rooms and guests’ screen - this extra layer of interactivity would facilitate a higher level of detail for user testing and validation.