Hotel Booking · A UX/UI App
As part of my first UX Design Institute course, I designed a hotel booking application with over 30 screens. The project followed the full UX process, from research to prototyping, focusing on improving the booking experience by analysing competitors, uncovering user needs and expanding on what travellers truly value in a booking app.
Company
UX Design Institute
Year
2023
Duration
6 Months
Hotel Booking · A UX/UI App
As part of my first UX Design Institute course, I designed a hotel booking application with over 30 screens. The project followed the full UX process, from research to prototyping, focusing on improving the booking experience by analysing competitors, uncovering user needs and expanding on what travellers truly value in a booking app.
Company
UX Design Institute
Year
2023
Duration
6 Months
Hotel Booking · A UX/UI App
As part of my first UX Design Institute course, I designed a hotel booking application with over 30 screens. The project followed the full UX process, from research to prototyping, focusing on improving the booking experience by analysing competitors, uncovering user needs and expanding on what travellers truly value in a booking app.
Company
UX Design Institute
Year
2023
Duration
6 Months
Hotel Booking · A UX/UI App
As part of my first UX Design Institute course, I designed a hotel booking application with over 30 screens. The project followed the full UX process, from research to prototyping, focusing on improving the booking experience by analysing competitors, uncovering user needs and expanding on what travellers truly value in a booking app.
Company
UX Design Institute
Year
2023
Duration
6 Months
Work Breakdown
Work Breakdown
Work Breakdown
Competitive Benchmark
I analysed existing hotel booking platforms to understand industry standards, strengths, & usability gaps.
Competitive Benchmark
I analysed existing hotel booking platforms to understand industry standards, strengths, & usability gaps.
Competitive Benchmark
I analysed existing hotel booking platforms to understand industry standards, strengths, & usability gaps.
Online Survey
I conducted a survey to gather insights into user behaviours, expectations, and frustrations when booking hotels.
Online Survey
I conducted a survey to gather insights into user behaviours, expectations, and frustrations when booking hotels.
Online Survey
I conducted a survey to gather insights into user behaviours, expectations, and frustrations when booking hotels.
Usability Testing
I reviewed course-provided usability tests and conducted my own moderated session.
Usability Testing
I reviewed course-provided usability tests and conducted my own moderated session.
Usability Testing
I reviewed course-provided usability tests and conducted my own moderated session.
Affinity Diagram
I grouped research data into themes to uncover patterns and define key user needs.
Affinity Diagram
I grouped research data into themes to uncover patterns and define key user needs.
Affinity Diagram
I grouped research data into themes to uncover patterns and define key user needs.
Customer Journey Map
I mapped the end-to-end booking experience to visualise friction points and opportunity areas.
Customer Journey Map
I mapped the end-to-end booking experience to visualise friction points and opportunity areas.
Customer Journey Map
I mapped the end-to-end booking experience to visualise friction points and opportunity areas.
Flow Diagram
I designed the core app flow, defining the structure and logical progression of screens.
Flow Diagram
I designed the core app flow, defining the structure and logical progression of screens.
Flow Diagram
I designed the core app flow, defining the structure and logical progression of screens.
Interaction Design
I created low-fidelity wireframes to translate flows into functional screen layouts.
Interaction Design
I created low-fidelity wireframes to translate flows into functional screen layouts.
Interaction Design
I created low-fidelity wireframes to translate flows into functional screen layouts.
Final Designs
I produced high-fidelity screens aligned with user insights and usability principles.
Final Designs
I produced high-fidelity screens aligned with user insights and usability principles.
Final Designs
I produced high-fidelity screens aligned with user insights and usability principles.
Prototype
I built an interactive prototype to demonstrate booking flows and key interactions.
Prototype
I built an interactive prototype to demonstrate booking flows and key interactions.
Prototype
I built an interactive prototype to demonstrate booking flows and key interactions.
Handoff
I documented interaction behaviours and specifications to support implementation.
Handoff
I documented interaction behaviours and specifications to support implementation.
Handoff
I documented interaction behaviours and specifications to support implementation.
12
Reflections
I evaluated the overall process, challenges, and areas for future improvement.
12
Reflections
I evaluated the overall process, challenges, and areas for future improvement.
12
Reflections
I evaluated the overall process, challenges, and areas for future improvement.
12
Reflections
I evaluated the overall process, challenges, and areas for future improvement.
Project Context
Project Context
Project Context
The Problem
The Problem
Hotel booking platforms often prioritise volume and functionality over clarity, resulting in overwhelming interfaces and friction throughout the booking process. The challenge was to design a mobile booking application that simplified the journey from sign-up to checkout, while better aligning with what travellers truly value when reserving accommodation.
Hotel booking platforms often prioritise volume and functionality over clarity, resulting in overwhelming interfaces and friction throughout the booking process. The challenge was to design a mobile booking application that simplified the journey from sign-up to checkout, while better aligning with what travellers truly value when reserving accommodation.
The Process
The Process
The project was structured around a research-led UX approach, ensuring that each design decision was informed by real user insight rather than assumption. Initial discovery focused on understanding competitor patterns and traveller expectations, before translating findings into structured user journeys and screen flows that prioritised clarity and ease of use.
The project was structured around a research-led UX approach, ensuring that each design decision was informed by real user insight rather than assumption. Initial discovery focused on understanding competitor patterns and traveller expectations, before translating findings into structured user journeys and screen flows that prioritised clarity and ease of use.
The Solution
The Solution
The final outcome was a mobile hotel booking application consisting of over 30 screens, covering the complete journey from account creation to booking confirmation. By simplifying navigation, clarifying key decision points, and refining the overall flow, the design delivers a more streamlined and user-focused booking experience.
The final outcome was a mobile hotel booking application consisting of over 30 screens, covering the complete journey from account creation to booking confirmation. By simplifying navigation, clarifying key decision points, and refining the overall flow, the design delivers a more streamlined and user-focused booking experience.
Constraints
Constraints
Constraints
First End-to-End UX Project
Being my first full UX case study, the project involved navigating unfamiliar research methods while developing confidence in design thinking.
Time-Bound Project Structure
As part of a course timeline, the project was completed within a fixed schedule, requiring prioritisation of key flows and features over extended exploration.
Limited Participant Access
Recruiting participants independently proved challenging, limiting the scale and diversity of primary research conducted.
First End-to-End UX Project
Being my first full UX case study, the project involved navigating unfamiliar research methods while developing confidence in design thinking.
Time-Bound Project Structure
As part of a course timeline, the project was completed within a fixed schedule, requiring prioritisation of key flows and features over extended exploration.
Limited Participant Access
Recruiting participants independently proved challenging, limiting the scale and diversity of primary research conducted.
First End-to-End UX Project
Being my first full UX case study, the project involved navigating unfamiliar research methods while developing confidence in design thinking.
Time-Bound Project Structure
As part of a course timeline, the project was completed within a fixed schedule, requiring prioritisation of key flows and features over extended exploration.
Limited Participant Access
Recruiting participants independently proved challenging, limiting the scale and diversity of primary research conducted.
Final Designs
Final Designs
Final Designs
Entry
Search
Select
Results
Checkout
Entry
Search
Select
Results
Checkout
Research
Research
Research
Competitive Benchmark
Competitive Benchmark
Understanding industry patterns and pain points
Understanding industry patterns and pain points
To understand how existing hotel booking platforms approach the booking experience, I analysed four leading apps including Airbnb and Booking.com. This allowed me to identify common interaction patterns, usability strengths, and areas where the experience could be improved.
The analysis highlighted the importance of clear user control, particularly making key actions such as “Continue as Guest” easily accessible. I also observed how effective page titles and strong visual hierarchy help users navigate complex booking flows, while the use of imagery, icons, and structured layouts makes large amounts of information easier to scan and understand.
To understand how existing hotel booking platforms approach the booking experience, I analysed four leading apps including Airbnb and Booking.com. This allowed me to identify common interaction patterns, usability strengths, and areas where the experience could be improved.
The analysis highlighted the importance of clear user control, particularly making key actions such as “Continue as Guest” easily accessible. I also observed how effective page titles and strong visual hierarchy help users navigate complex booking flows, while the use of imagery, icons, and structured layouts makes large amounts of information easier to scan and understand.
Online Survey
Online Survey
Collecting data to understand user behaviours
Collecting data to understand user behaviours
To better understand how people book hotels and what they value most in booking apps, I conducted an online survey targeting users who had previously used hotel booking platforms. This allowed me to gather both quantitative and qualitative insights about user goals, behaviours, and common frustrations during the booking process.
The results showed that users rarely struggle to complete bookings, reinforcing the importance of keeping familiar patterns such as standard calendar date pickers. Price also emerged as the most important factor when selecting a hotel, highlighting the need for clear and consistent pricing visibility throughout the booking experience.
To better understand how people book hotels and what they value most in booking apps, I conducted an online survey targeting users who had previously used hotel booking platforms. This allowed me to gather both quantitative and qualitative insights about user goals, behaviours, and common frustrations during the booking process.
The results showed that users rarely struggle to complete bookings, reinforcing the importance of keeping familiar patterns such as standard calendar date pickers. Price also emerged as the most important factor when selecting a hotel, highlighting the need for clear and consistent pricing visibility throughout the booking experience.
Usability Testing
Usability Testing
Observing real users to uncover misalignment
Observing real users to uncover misalignment
To understand how people interact with hotel booking apps, I analysed two pre-recorded usability sessions and conducted my own moderated test with a participant. During the session, the user completed booking tasks on Airbnb and Booking.com while their screen and reactions were recorded.
These sessions revealed how strongly users rely on familiar patterns, such as selecting dates within a single calendar view and easily exiting menus. They also showed how smart defaults can sometimes lead to mistakes, while rich imagery and detailed hotel descriptions help users feel more confident when choosing where to stay. Observing real interactions helped uncover subtle usability issues.
To understand how people interact with hotel booking apps, I analysed two pre-recorded usability sessions and conducted my own moderated test with a participant. During the session, the user completed booking tasks on Airbnb and Booking.com while their screen and reactions were recorded.
These sessions revealed how strongly users rely on familiar patterns, such as selecting dates within a single calendar view and easily exiting menus. They also showed how smart defaults can sometimes lead to mistakes, while rich imagery and detailed hotel descriptions help users feel more confident when choosing where to stay. Observing real interactions helped uncover subtle usability issues.
Analysis
Analysis
Analysis
Affinity Diagram
Affinity Diagram
Organising research findings to uncover patterns
Organising research findings to uncover patterns
To make sense of the research collected, I organised all qualitative and quantitative findings into an affinity diagram. Grouping the data into related themes helped reveal patterns across user behaviours, goals, and pain points, turning scattered observations into clear, actionable insights.
The analysis highlighted how visuals such as hotel images help build trust and confidence when choosing where to stay. It also reinforced the importance of simplicity, as cluttered interfaces distracted users from their main goal. Clear, well-placed calls to action and structured information were also key to helping users move through the booking process with ease.
To make sense of the research collected, I organised all qualitative and quantitative findings into an affinity diagram. Grouping the data into related themes helped reveal patterns across user behaviours, goals, and pain points, turning scattered observations into clear, actionable insights.
The analysis highlighted how visuals such as hotel images help build trust and confidence when choosing where to stay. It also reinforced the importance of simplicity, as cluttered interfaces distracted users from their main goal. Clear, well-placed calls to action and structured information were also key to helping users move through the booking process with ease.
Customer Journey Map
Customer Journey Map
Mapping the user journey to reveal pain points
Mapping the user journey to reveal pain points
To further understand the user experience, I created a customer journey map using insights gathered from the affinity diagram. This allowed me to visualise the user’s journey while capturing their goals, behaviours, emotions, and pain points at each stage of the booking process.
The map highlighted several opportunities to improve the experience, including offering flexible payment options, avoiding disruptive pop-ups that frustrate users, and prioritising a well-designed mobile experience. These insights helped clarify the core problems and guided the direction of the design solutions that followed.
To further understand the user experience, I created a customer journey map using insights gathered from the affinity diagram. This allowed me to visualise the user’s journey while capturing their goals, behaviours, emotions, and pain points at each stage of the booking process.
The map highlighted several opportunities to improve the experience, including offering flexible payment options, avoiding disruptive pop-ups that frustrate users, and prioritising a well-designed mobile experience. These insights helped clarify the core problems and guided the direction of the design solutions that followed.
Design
Design
Design
Flow Diagram
Flow Diagram
Mapping the booking flow from sign-up to checkout
Mapping the booking flow from sign-up to checkout
Before designing screens, I mapped the complete user flow of the app, from account creation and hotel search through to booking confirmation. This helped define the key steps users would take, the pages required, and how each interaction connects across the experience.
Visualising the flow made it easier to identify unnecessary steps and ensure the booking process remained simple, logical, and focused on helping users complete their task quickly.
Before designing screens, I mapped the complete user flow of the app, from account creation and hotel search through to booking confirmation. This helped define the key steps users would take, the pages required, and how each interaction connects across the experience.
Visualising the flow made it easier to identify unnecessary steps and ensure the booking process remained simple, logical, and focused on helping users complete their task quickly.
Interaction Design
Interaction Design
Translating the user flow into interface concepts
Translating the user flow into interface concepts
Using the flow diagram as a guide, I created a series of interaction design sketches to explore how each stage of the booking journey could work on screen. These low-fidelity wireframes helped establish the structure and layout of key pages before moving into higher-fidelity design.
Sketching allowed me to quickly test ideas, refine the booking flow, and ensure each step of the experience felt clear and intuitive for users.
Using the flow diagram as a guide, I created a series of interaction design sketches to explore how each stage of the booking journey could work on screen. These low-fidelity wireframes helped establish the structure and layout of key pages before moving into higher-fidelity design.
Sketching allowed me to quickly test ideas, refine the booking flow, and ensure each step of the experience felt clear and intuitive for users.
Prototype
Prototype
Designing the final mobile booking experience
Designing the final mobile booking experience
With the structure defined through sketches, I moved into Figma to design the final interface. Starting from the wireframe layouts, I refined each screen into a polished UI while keeping the flow simple and intuitive for users moving from search to booking.
Research insights guided key design decisions, from clear pricing visibility to familiar interaction patterns such as the standard date picker. The result was a clean, mobile-first hotel booking experience that balanced usability with a visually engaging interface.
With the structure defined through sketches, I moved into Figma to design the final interface. Starting from the wireframe layouts, I refined each screen into a polished UI while keeping the flow simple and intuitive for users moving from search to booking.
Research insights guided key design decisions, from clear pricing visibility to familiar interaction patterns such as the standard date picker. The result was a clean, mobile-first hotel booking experience that balanced usability with a visually engaging interface.
Handoff
Handoff
Documenting the design for development
Documenting the design for development
To ensure the designs could be accurately implemented, I created detailed developer annotations across the key screens. These notes documented interaction rules, navigation behaviour, states, and feedback patterns so the intended experience was clearly defined beyond the visuals.
Providing this level of documentation helps bridge the gap between design and development, allowing engineers to understand exactly how each element should behave. This ensures the final product reflects the intended user experience rather than relying on assumptions.
To ensure the designs could be accurately implemented, I created detailed developer annotations across the key screens. These notes documented interaction rules, navigation behaviour, states, and feedback patterns so the intended experience was clearly defined beyond the visuals.
Providing this level of documentation helps bridge the gap between design and development, allowing engineers to understand exactly how each element should behave. This ensures the final product reflects the intended user experience rather than relying on assumptions.
Reflections
Reflections
Reflections
Key Takeaway
Research Drives Better Design
I learned that research isn’t optional, it’s foundational. The most valuable insights came from user behaviours, pain points, and mental models, not assumptions.
Key Takeaway
Research Drives Better Design
I learned that research isn’t optional, it’s foundational. The most valuable insights came from user behaviours, pain points, and mental models, not assumptions.
Key Takeaway
Usability Testing Is Invaluable
Although I was nervous to run my first test, usability testing proved to be one of the most insightful methods for uncovering real user friction and validating decisions.
Key Takeaway
Usability Testing Is Invaluable
Although I was nervous to run my first test, usability testing proved to be one of the most insightful methods for uncovering real user friction and validating decisions.
Key Takeaway
Users Value Simplicity & Efficiency
Users rarely fail tasks but they deeply value straightforward flows and dislike re-entering information. Reducing effort matters more than adding features.
Key Takeaway
Users Value Simplicity & Efficiency
Users rarely fail tasks but they deeply value straightforward flows and dislike re-entering information. Reducing effort matters more than adding features.
Key Takeaway
Mental Models Reduce Friction
Maintaining familiar UI patterns (e.g. standard date pickers, visible “Continue as Guest” option) reinforced usability and prevented unnecessary cognitive load.
Key Takeaway
Mental Models Reduce Friction
Maintaining familiar UI patterns (e.g. standard date pickers, visible “Continue as Guest” option) reinforced usability and prevented unnecessary cognitive load.
Do-Over
Go Deeper with Research
Next time, I would prioritise broader and more persistent research efforts to gather richer, more varied insights before moving into design.
Do-Over
Go Deeper with Research
Next time, I would prioritise broader and more persistent research efforts to gather richer, more varied insights before moving into design.
Do-Over
Test Earlier & More Often
I would run multiple usability tests at both the research and prototype stages to validate ideas earlier and reduce any rework later.
Do-Over
Test Earlier & More Often
I would run multiple usability tests at both the research and prototype stages to validate ideas earlier and reduce any rework later.
Do-Over
Design More Independently
While referencing Airbnb gave me a safe starting point, I would now focus on developing a more original visual direction rather than heavily mirroring an existing product.
Do-Over
Design More Independently
While referencing Airbnb gave me a safe starting point, I would now focus on developing a more original visual direction rather than heavily mirroring an existing product.
Do-Over
Refine Visual Craft
With stronger UI knowledge now, I would improve spacing, typography, hierarchy, and overall polish to elevate the product quality.
Do-Over
Refine Visual Craft
With stronger UI knowledge now, I would improve spacing, typography, hierarchy, and overall polish to elevate the product quality.
Interested in more?
Up next is a real-world AI fashion app MVP, where I designed a complete mobile experience within a fast-paced startup environment, under agile methologies.
Interested in more?
Up next is a real-world AI fashion app MVP, where I designed a complete mobile experience within a fast-paced startup environment, under agile methologies.
Interested in more?
Up next is a real-world AI fashion app MVP, where I designed a complete mobile experience within a fast-paced startup environment, under agile methologies.