overview
This is a conceptual project as part of my Professional Diploma in UX Design.
The client is a new hotel. They’re looking to create an online booking experience that is simple, accessible and based on a deep understanding of their target users.
the task
My task was to design a new website for my client, focusing specifically on the hotel booking process: how users search for and book hotel rooms online. To do this, I had to go through the full UX process from research and analysis through to prototyping and wireframing.
Goal
The end goal was to design and build a clickable prototype that can be tested with users, along with a detailed set of wireframes to aid handover to developers.
The process
research
Online surveys
Competitive benchmark
User interviews
analysis
Affinity diagram
Customer journey map
concept
Flow diagram
Interaction design
bring to life
Prototype design
Wireframing
verify
Prototype testing
User testing
Research phase
In the research phase, I focused on gaining a deep understanding of user needs and pain points through a combination of activities. This research helped me ensure that my design solutions would directly address user challenges when making online hotel bookings.
competitive benchmark
The first phase of my research involved carrying out a competitive benchmark of 3 hotel booking websites. The goal of this activity was to:
Learn from best-in-class websites/apps
Understand the conventions
Highlight best practice
The websites I chose to benchmark were Clayton Hotels, The Ritz-Carlton and Fitzpatrick Castle Hotel.
I documented key learnings per page (homepage, room reservation page and booking confirmation page) to reflect back on during the future design phases.
online survey
I created an online survey using SurveyMonkey to help me understand the goals of potential customers, and shared it with friends, family, and the UX Design Institute to gather insights.
Some survey questions included:
When was the last time you visited a hotel website or app?
Why did you visit the hotel website or app that day? What were you trying to do?
Were you able to complete your task that day?
What would you change about that website or app? What improvements would you make?
usability tests
I conducted a series of usability tests to gain an understanding of user’s goals, behaviours and pain points.
Along with the previous activity’s findings, this allowed me to create a bank of insights to bring into the analysis phase.
Analysis phase
In the analysis phase, I synthesised the data gathered during research to uncover insights and key themes. This allowed me to prioritise user needs and identify pain points, forming the basis for data-driven design decisions.
AFFINITY DIAGRAM
I created an affinity diagram to give the data structure and provide me a good overview of my findings.
I then began putting the post-its into logical groups or themes and gave each theme a name.
customer journey map
I used these insights to create a customer journey map to give an overview of the most common customer journey when booking a hotel stay online.
Concept phase
During the concept phase, I translated insights from the analysis into actionable design concepts. I explored multiple solutions by brainstorming and sketching ideas.
user flow diagram
I designed a user flow diagram to map out each interaction and each screen state in the process to figure out the problem in stages.
sketching
Using pen and paper, I sketched the screens from the homepage up to and including the booking summary. This allowed me to quickly hash out several iterations before committing to any one design.
Design phase
In the design phase, I turned the concepts into detailed designs. This phase focused on creating a user-centred, functional solution that aligned with the project’s goals.
clickable prototype
I created a clickable prototype in Figma to allow me to test important aspects of the solution including the flow, screen layouts, copy and key interactions.
See link to full prototype here
usability tests
I conducted usability tests to test the flow and interactions of the prototype, and capture any pain points.
I made changes to the designs based on insights gathered from the usability tests such as adjusting the order of the filtering options, and the layout of the gallery view.
wireframe annotations
My final task was to add design annnotations to the wireframes for developers. They detailed the functionality and behaviour of how the product should work.
Conclusion and key learnings
Completing this hotel booking experience project marked a significant milestone as my first full UX design project. It provided me with hands-on experience in applying the UX process end-to-end.
Some key learnings include:
The importance of user research in uncovering insights that directly shape design decisions
Iterative testing is essential for validating assumptions and refining designs
Creating a seamless user flow requires balancing user needs with business goals
Collaboration and feedback throughout the process are critical to achieving a user-centered solution
Completing this project has given me a strong foundation in UX principles and methodologies that I continue to build on, and I’m excited to carry these lessons into future projects.