This project was completed as part of my Diploma in Product Design through the UX Design Institute, which I undertook from June 2024 to May 2025. The goal was to design a hotel desktop booking experience that is intuitive, user-centered, and based on real research insights. It challenged me to apply the full UX process—from research and analysis to prototyping and usability testing—while developing a functional, clickable prototype that could be handed off to developers.
Travelers often encounter friction when booking hotels online, from confusing interfaces to unclear booking summaries. The goal of this project was to reimagine and streamline the hotel booking process for a fictional desktop-based application—focusing specifically on one core user flow: searching for a location, selecting dates and guests, choosing room types and extras, and proceeding to a final booking summary.
As the sole UX Designer on this case study, I was responsible for conducting user research, analyzing insights, conceptualizing user flows, designing wireframes and prototypes, running usability tests, and delivering annotated handoffs to the development team.
The project followed a structured UX design process, consisting of:
Research: Conducted usability testing, note-taking, and optional surveys to gather qualitative insights.
Analysis: Created affinity diagrams and a customer journey map to identify user pain points and opportunities.
Concept Development: Mapped out the user flow and produced initial interaction sketches to explore solutions.
Design: Developed a high-fidelity clickable prototype in Figma, supported by optional usability tests and detailed annotations for developers.
This project strictly adhered to the end-to-end UX process. I began with understanding real user problems through qualitative research and usability testing. Insights were synthesized into actionable findings, which informed the journey mapping and flow design. The iterative prototyping and testing phases ensured that the final experience was smooth, intuitive, and user-focused.
This case study highlights how thoughtful UX research and process can reduce design risks and improve the quality of digital products. By grounding design decisions in real user needs, I was able to deliver a functional prototype that not only meets business goals but also provides a seamless booking experience for users.
User research was the foundation of this project, ensuring that every design decision was grounded in real user needs and behaviors. This phase focused on uncovering both pain points and opportunities within the hotel booking experience. The research methods I used were a combination of qualitative and quantitative approaches to gain a holistic understanding of user expectations.
To understand current industry standards and identify strengths and weaknesses in competitor booking flows. This helped me recognize patterns users are familiar with and discover areas where the experience could be improved.
I analyzed the hotel booking processes of leading travel websites, evaluating them on aspects such as layout clarity, ease of use, filtering options, and the booking summary experience.
To gather broader, initial feedback on users’ past experiences with booking hotels online. The goal was to validate assumptions and identify user priorities across a larger sample.
I created a short Google Form and shared it to my friend & Family and some gathered from social media sharing, collecting data from a range of users with different booking habits.
To ensure meaningful and unbiased capture of user behavior during usability testing. Note-taking helped me organize observations into themes later used in the affinity diagram.
During interviews and usability testing, I documented user actions, comments, hesitations, and emotional responses in a structured format.
To observe how users interact with existing booking systems and identify usability issues in real time. This was critical for understanding where users get stuck and what features improve their flow.
I asked 1 participant to complete a booking journey on a competitor site while thinking aloud. Sessions were recorded and conducted over Google Meets.
From this research phase, I identified several key user needs and frustrations that informed my design decisions:
After gathering qualitative and quantitative data through research, the next step was to make sense of all that information. I used two core analysis techniques — an Affinity Diagram and a Customer Journey Map — to identify patterns, uncover key user insights, and lay the groundwork for informed UX decisions.
This phase was critical to synthesize what users were really experiencing, to separate anecdotal feedback from consistent patterns, and to prioritise which problems to solve first based on real user needs and potential business impact.
An Affinity Diagram is a powerful technique to organise scattered observations and data points into meaningful clusters. Since my research included both note-taking sessions and usability tests, there was a large volume of findings to work through. This tool helped to:
Identify repeated patterns across multiple users
Highlight surprising findings that stood out
Align all insights into digestible categories
Set a foundation for the Customer Journey Map
Users often struggled with filter visibility or placement. Important search fields (dates, guest numbers) weren’t always clear.
CTAs were frequently overlooked. Users scanned for price or ratings first — these were inconsistently prioritized.
Users wanted clearer pricing breakdowns. Reviews and location details helped increase confidence.
Users appreciated map integrations. Local language and imagery added a sense of familiarity.
The Customer Journey Map allowed me to visualise the end-to-end experience of a typical user booking a hotel. It took the structured themes from the Affinity Diagram and laid them out in sequence, from first interaction to final confirmation. This helped identify where users face friction and where delight occurs.
I mapped the user journey in 6 core stages:
Landing on Homepage
Entering Search Criteria
Browsing Results
Selecting a Property
Viewing Booking Summary
Finalising the Booking
I filled in observations, pain points, emotional responses, and positive moments for each step using my research data.
I ensured the map was concise and easy to scan, with color-coded indicators and formatting to guide the viewer’s eye.
Based on both analysis techniques, the primary problem to solve is:
Users are struggling to complete bookings efficiently due to inconsistent layout, unclear CTAs, and a lack of pricing and property transparency.
This affects both user satisfaction and business conversion — solving this will improve retention and reduce booking abandonment.
The Concept phase marks the shift from understanding the problem to exploring possible solutions. Building on research and analysis, this phase aims to transform identified user pain points into practical design concepts — specifically through User Flow Diagrams and Interaction Sketches.
By working with flows and paper sketches before jumping into high-fidelity wireframes, I ensured that core interactions and structures were user-focused, iterative, and informed by real needs — rather than visual assumptions.
Creating a Flow Diagram helped break down the complex booking process into manageable, sequential steps. By mapping out the ‘happy path’ — the ideal flow a user would take from landing on the homepage to confirming a booking — I could:
Clarify the logic behind screen transitions
Avoid feature creep before screen design begins
Pinpoint exactly which screens would need to be sketched
Align user interactions with problem areas found in the Customer Journey Map
This was essential to ensure the solution addressed the right problem without overwhelming the design phase.
Before diving into digital design, I created Interaction Sketches to explore how each screen would look and function. Sketching allowed me to iterate quickly, test layout options, and define interface logic with clarity and speed.
By sticking to hand-drawn sketches, I stayed focused on usability and structure, not visual polish. This kept the process lean and user-centered.
The design phase is where all the insights, flows, and sketches come together in the form of a medium-fidelity prototype. This interactive model brings the concept to life, allowing for realistic testing of the experience and usability before any development begins.
The prototype is also accompanied by detailed annotations, which communicate exactly how the interface should function — ensuring alignment between designers and developers.
The prototype simulates the full booking experience, from homepage to booking summary, and includes all key interactions, copy, and screen transitions. This gave me the opportunity to:
Validate my design decisions against real user flows
Test whether my proposed solution genuinely solved the issues uncovered during research
Gather feedback to iterate and improve, without the cost of coding anything
Design annotations are essential for communicating interaction behavior and logic to the development team. They bridge the gap between visual design and technical implementation, ensuring the user experience is developed exactly as intended.
Below are a few screenshots of annotations showing how I went about this task.
As I reached the end of this UX project, my focus was to ensure that the final solution not only looked good on paper but functioned seamlessly for users. Every design decision was grounded in user research, journey mapping, flow analysis, and iterative testing — all aimed at solving the original core problem:
“The booking process is unclear, disjointed, and lacks transparency — leading to user frustration and drop-off.”
Through each phase — from discovery to prototype — I addressed the key issues identified in the Customer Journey Map and Affinity Diagram:
Problem: Users struggled to understand where they were in the process. Solution: The flow was simplified into a clear, step-by-step process, reinforced by strong CTAs and visual hierarchy at every stage.
Problem: Users felt uncertain about total costs and hidden fees. Solution: Each screen prominently displays a dynamic pricing breakdown, even before reaching the final summary.
Problem: Users lacked information about the accommodation inclusions and its surroundings. Solution: The property details screen includes clear descriptions, a photo carousel, amenities, maps, and reviews — all above the fold to inform decisions quickly.
This design succeeds because it is:
User-validated through research and testing
Built on real user pain points, not assumptions
Simple, intuitive, and transparent, reducing friction throughout
Ready for handoff, complete with developer-friendly annotations
The result is a streamlined booking process that builds user trust, reduces drop-off, and encourages conversion — all with usability and clarity at its core.