bookme.com
Hotel Booking Desktop
Case Study

This was my first project as part of the UX Design Institute course, designed and built a hotel booking desktop website from scratch.

Role

UX Designer

Industry

Hotel Booking

Duration

6 months

Introduction

When I started the UX Design Institute course, I was both excited and nervous, I was stepping into a brand new world, ready to build something from scratch with no prior experience. Our first challenge? To design a hotel booking desktop website that not only worked but felt intuitive and delightful for users.
I named my fictional product bookme.com and committed to going through the entire UX design process from in-depth research to testing, sketching, prototyping, and refining every detail.

Project Goals

Identify and resolve common usability issues
Ensure users can search, filter, and book with confidence
Reduce friction and confusion during the booking journey
Create a clean and visually engaging interface

Key Focus

Clear and effective search and filtering
Streamlined booking process
Trust signals and ease of decision-making
Consistency in layout and navigation

My role

Research
Analysis
Design
Prototyping

Research

Before jumping into any designs, I knew I had to slow down and listen. If I wanted to design something truly useful, I first needed to understand what people were struggling with when booking hotels online. I didn’t want to rely on assumptions I wanted real insights, directly from users and competitors.

My first steps were Competitive Benchmarking, Note Taking, and Usability Testing. Each method served a different purpose, but together, they helped me build a clearer picture of what users truly needed.

1-Competitive Benchmarking

I started with competitive benchmarking because I wanted to understand the current landscape. I explored platforms like Booking.com, Airbnb, Agoda, Trivago, not just as a user, but as a curious designer. I paid close attention to how they structured their search bars, filters, hotel listings, and booking flows. Some platforms impressed me with their simplicity and visual clarity, while others felt overwhelming and cluttered.

Objectives

What are others doing well (or not)?
If is there anything, how we can do it better or how we can emulate?
Have any design conventions been establish? If so, should we follow them?

Summary and key findings

Simplicity is powerful , even with lots of useful features can easily overwhelm users. I learned the importance of prioritising content and using visual hierarchy to guide users naturally through their journey.
It also exposed common issues cluttered interfaces, outdated filters, and a lack of clear feedback in navigation.
Most importantly, it helped me understand core patterns and UX conventions in hotel booking platforms, which shaped the foundation of my own design.

2-Note Taking

After analysing what competitors were doing, I turned my attention to real users. The next step was observing how people actually behave when booking hotels online and for that, effective note-taking was essential.
I observed two usability tests, each with a different participant tasked with booking a hotel for a specific scenario. My goal wasn’t just to see if they could complete the task, but to deeply understand what they were trying to do, how they interacted with the interface, and what got in their way.

During the sessions, I carefully documented: goals, behaviours, context, positive interactions, and pain points throughout their hotel booking journey.

Summary and key findings

Users struggled with the hotel search bar functionality, finding it confusing and unintuitive.
Users preferred to see all essential booking details upfront rather than at the final payment step.
Visual content (photos and layout) played a key role in decision-making, yet was often overlooked or hard to access.
Important room and hotel amenities (e.g. size, AC, views, bathroom details) were either hard to find or missing.
Changing dates was difficult and caused frustration.

3-Usability Testing

This project guided me through the entire usability testing process from recruiting a participant to moderating and recording the test. I used a predefined test script and carefully structured tasks to evaluate two different hotel booking websites in a comparative test setting.

My Process

Recruited a adult participant using a screener.
Set up and tested my recording environment (screen, voice, and camera).
Moderated the sessions remotely via Lookback.
Encouraged participant to “think aloud” as she completed booking tasks
Observed without interference, asking open-ended follow-ups when needed.
Compared how user interacted with two different platforms.

Objectives

Understand user goals and booking behaviours.
Identify pain points in the user journey.
Observe patterns in navigation, decision making, and interaction.
Capture insights to inform and improve design decisions.

Summary and key findings

The participant immediately focused on the search bar, indicating that this is her usual entry point when using booking websites, without engaging any other content.
The participant focused mainly on price, guest ratings, and location when browsing hotels.
Breakfast availability and user reviews were key decision-making filters.
The participant appreciated that the hotel opened in a new tab, allowing her to compare options without losing her search.

Analysis

After gathering hours of usability recordings, detailed notes, and competitive insights, it was time to turn information into insight. While raw data is valuable, it only becomes meaningful when organised and analysed. In this stage, I applied two key analysis techniques; Affinity diagram and a Customer journey map to uncover patterns, identify pain points, and define the real problems users face when booking a hotel online.

1-Affinity Diagram

After gathering research from competitive benchmarking, note taking, and usability testing, I needed a way to make sense of all the scattered observations. An Affinity diagram is an analysis technique used to organise pieces of information by grouping them based on shared meanings or relationships. For UX professionals, it’s an essential tool to reveal user patterns, uncover hidden problems, and bring clarity to complex data.

My Process

I started by reviewing all the research I had gathered across

Competitive Benchmarking
Note Taking
Usability Testing

I created individual Post-it notes for each meaningful observation, whether it was a user pain point, a goal, a behaviour, or a mental model. Each note captured just one insight, written clearly and concisely.

Using Miro, I began grouping similar notes together. Some patterns were obvious, while others took time to emerge. I moved notes around, merged duplicates, created sub-groups, and gradually watched my wall of scattered thoughts transform into structured insight.
I grouped the observations into key stages of the hotel booking journey: Homepage, Search & Select, Hotel Page, Booking Flow, and Discounts & Offers. Within each of these main categories, I also created subgroups to capture more specific themes. This structure not only helped me pinpoint where users were struggling, but also gave me a clear roadmap for where to focus my design improvements.

Summary and key findings

While user feedback covered a variety of areas, I prioritised key themes that consistently affected the user experience:

Website Navigation – Users wanted a clear, intuitive layout.
Easy Destination Search – Quick, accurate results were essential.
Filters –Key filters needed to be visible and easy to use.
Confident Booking – Users needed clear summaries to feel secure.

These insights became the foundation for my design decisions.

2-Customer Journey Map

Using insights from the affinity diagram, I created a customer journey map to visualise each step of the booking process. It highlighted user goals, pain points, and positive moments helping me identify where the experience could be improved and guiding key design decisions.

My customer journey map captures each step of the hotel booking experience—from initial search to booking confirmation through the lens of real user behaviour. It includes user goals, behaviours, mental models, pain points, and positive points, structured into a clear and cohesive flow.

This structured artefact helped me translate raw research into a visual, story driven map that guided my design decisions and kept the user’s voice central throughout the process.

Design

To bring my hotel booking experience to life, I followed a structured design process that focused on clarity, iteration, and user intent. This phase of the project was divided into three key stages: Flow Diagram, Interaction Design, Prototyping and Annotations. This process allowed me to transform early concepts into a clear, functional design always guided by the user journey and focused on solving real user needs.

1-Flow Diagram

I began by mapping out the user journey through a flow diagram, outlining every step a user would take from the homepage to the booking confirmation. This helped me identify all the screens needed and ensured that the navigation and user paths were logical and efficient.

2-Interaction Design

Next, I brought the flow to life through hand-drawn sketches, exploring how each screen would work. I focused on layout, interactivity, and realistic UI elements like drop-downs, calendars, buttons, and filters. Sketching multiple variations allowed me to refine ideas quickly before committing to any one direction.

3-Prototyping

Once the sketches were finalised, I moved into Figma to build a high-fidelity prototype. I translated each screen into a clickable design, incorporating real content and visual consistency. This step made the experience feel realistic and ready for user testing.

Homepage Design
The homepage was designed with the understanding that most users want to search immediately.

Minimal Navigation: A simplified navigation with just the essentials to reduce cognitive load.

Visual Appeal: A clean layout with engaging destination imagery to inspire travel without overwhelming the user.

Highlighted Offers: Subtle promotional banners placed below the search bar, visible but not intrusive.

Responsive CTAs: Clear, actionable buttons like “Search Hotels” designed for visibility and accessibility.

Hotel Listing and Selection Design
The hotel listing page is a critical decision making point in the booking journey. My design focused on clarity, filter usability, and helpful previews to support users in browsing and comparing options with ease.

Clear Sorting & Filters: Filters like “Free Cancellation”, “Breakfast Included”, and “Pay Later” are easily accessible and visible from the top. Sorting options (e.g. Price, Guest Rating) help users customise results quickly.

Hotel Cards: Each hotel is displayed in a card format with key details at a glance price per night, star rating, user review score, and short descriptions.

The goal was to create a listing page that feels organised, efficient, and informative—giving users the confidence to explore and shortlist options without getting lost or overwhelmed.

Hotel's Details Page Design
This page is designed to give users all the information they need to book with confidence.

High-quality images showing room layouts, amenities, and views.

Clear layout with sections for rooms, facilities, reviews, and location.

Easy room comparisons with pricing, benefits, and prices.

The goal was to reduce uncertainty and make the booking decision easy and informed.

Booking Page Design
The booking page is designed to provide clarity and reassurance before final confirmation.

Booking Summary with selected hotel, room details, dates, guests, and total price,

Progress Indicator A simple progress bar at the top shows users where they are in the booking process, This helps reduce uncertainty and reassures users they’re almost done.

Currency clearly displayed to avoid confusion.

Minimal distractions to keep the user focused on completing the process,

4-Annotations

To clearly communicate how each screen works, I added annotations to my prototype. These explain the logic behind key interactions, layout choices, and content placement.

Annotations ensured that anyone reviewing the prototype could understand the intent behind each design choice, making the experience easy to interpret and ready for handoff or testing.

Reflections

This project was my first deep dive into the full UX design process from early research to a fully clickable prototype. Stepping into the shoes of real users, I began to see how their goals, frustrations, and behaviours could guide every design decision I made.

I focused on simplifying the journey: making it easy to search, filter, and book with confidence. Every screen, every interaction, was rooted in real feedback and refined through iteration.

Looking back, I would have aimed to conduct more usability testing throughout both the research and design phases to continuously refine the experience. I also recognise the importance of considering accessibility from the outset, ensuring the design is inclusive and usable for everyone.