Hotel Luxe
Designing an end-to-end digital customer journey for a hotel mobile app
A project undertaken as part of my UX Diploma by UX Design Institute & Glasgow Caledonian University (2024)
Goal
Design a prototype for a new hotel booking app
Role
UX research, strategy
& design
Tools
Figma, Miro, LetsView
& Zoom
Business Goal
Hotel Luxe, a prominent hotel group, recognised the surging trend in app-based hotel bookings. With 44% of UK travellers prioritising seamless online bookings, the group set its sights on enhancing its online booking process with a native mobile app.
Project scope & constraints
Background
The primary business goal was to boost conversion rates by streamlining the hotel booking process with a smooth user experience. The strategic move also aimed to strengthen the customer-brand relationship and increase competitive advantage in the hospitality landscape.
“Through an intuitive mobile app, they aspired to empower their 50,000+ customers effortlessly discover hotels and manage bookings.”
The scope was to build the booking process: search, select, and pay.
If there weren’t any time limitations, I would have employed a quantitative research approach for triangulation. I envisioned designing and executing a comprehensive survey on a large sample to cross-validate my qualitative findings and enhance the overall research validity.
The process
To deliver the project goal, I first needed to understand similar digital products and, most importantly, to observe how real people use them.
I analysed the large volume of raw data to define and articulate the problem. I uncovered pain points and opportunities for better design solutions.
This process informed my design framework for creating effective flows and interactions, which later guided me to implement the solutions and test their effectiveness.
1. RESEARCH
Competitor Analysis
User Interviews
Usability Test
2. ANALYSIS
Affinity Diagram
Customer Journey Map
3. STRUCTURE
User Flow Diagram
Interaction Design
4. PROTOTYPE
Prototype
Usability Test
Developer Handover
1. Research
My research focused on two core areas, employed primary and secondary research methods, and aimed to answer these research questions:
1. How do best-in-class design their booking apps?
I conducted Competitive Benchmarking to gather secondary data, uncovering the design principles underpinning top-performing booking apps.
2. What do users think, feel, and do when using hotel booking apps?
I conducted user interviews and usability tests to generate rich, qualitative data on users' goals and pain points when using hotel booking apps.
1.1 Competitive Benchmarking
I analysed key industry leaders in the hospitality and travel sectors, including Airbnb, Booking.com, Premier Inn, and British Airways,and identified:
Standard steps in an online booking journey
Best practices we can adopt
Established conventions and heuristics that we should adhere to
1.2 User Interviews
User interviews revealed users' context, key motivations, and critical considerations during the hotel booking process.
For example, the core priorities driving users' decision-making process were location, price, imagery, essential hotel details, and reviews. The findings from these interviews informed the design process.
Method: I conducted two interviews as the sole interviewer via Zoom. Additionally, I participated as a note-taker in two interviews led by the UXDI team.
The raw data collected from these interviews, along with usability testing data, underwent in-depth analysis during an Affinity Diagram workshop (2.1), where key themes were identified and fed into my design solution.
PARTICIPANT #2
“I wouldn’t say that I’d purchase solely on looking at good reviews. It’s normally on the location, the price, and the facilities that it has."
PARTICIPANT #1
“Booked my recent holiday directly on EasyJet website, as it was the cheapest and the most transparent option. All costs were shown upfront.”
PARTICIPANT #3
“I booked with a company that I trust. Reliability is key. If anything goes wrong, I want to be able to get a refund or cancel without losing money.”
PARTICIPANT #4
“Booking.com is always the first port-of-call. I can access a wide range of hotels with them. I usually use the filter to narrow down my options.”
1.3 Usability Tests
Observing users interact with booking apps revealed their goals, behaviours, mental models, and pain points.
For example, three out of four users preferred a map view but got frustrated by the map experience.
PARTICIPANT #1
“I’m stuck [on the map view]. That’s annoying. I’m going to have to quit the app and start again.”
PARTICIPANT #2
"If there was a shorter and quicker way of doing that...[entering details]. When I’m booking things, I don’t want to put an essay into the app.”
Method: I conducted two usability tests and participated in two additional tests as a note-taker. I used LetsView, the screen mirroring software, to mirror participants’ phones to screens and recorded the sessions via Zoom.
2. Analysis
As my analysis methods, I chose the Affinity Diagram and Customer Journey Map. This was to analyse the large amount of qualitative data obtained from my research as efficiently, effectively, and collaboratively as possible to generate and share actionable insights.
2.1 Affinity Diagram
My objective was to structure the raw data collected from user interviews and usability tests collaboratively, aiming to uncover similarities among problems experienced by multiple users.
To structure the data, I designed and facilitated an online workshop using Miro. In this collaborative session with a team of three, we analysed our observations, and identified, grouped, and named emerging themes.
The result was an illustrative diagram representing the booking flow, highlighting positive and negative experiences, and users' goals, behaviors, and mental models.
The map elaborated on the Affinity Diagram, pinpointing major pain points, particularly during the Search & Select phase, such as destination input, date selection, and navigating between map and list views.
Additionally, the map highlighted gaps and opportunities in the booking process. It emphasised the critical importance of refining the Search & Select phase as a top priority in the overall process.
2.2 Customer Journey Map
Key research findings
1. WORKFLOW
The standard workflow for a hotel booking app consisted of these steps: Enter criteria, choose a hotel, enter details, payment, and confirmation.
2. SEARCH & SELECT
Standard data points required for search: destination, dates and number of people.
3 out of 4 apps led to frustration during search, especially with date selection.
3. DISPLAYING RESULTS
Initial search results should provide: location, price, hotel key info, reviews and imagery.
3 out of 4 users preferred the map view when comparing options.
4. PAYMENT
Different payment options are desired: pay now and pay on arrival.
Their mental model matches this flow: enter personal details, review, enter card details to pay, and conformation.
How might we develop a booking process that simplifies the standard workflow, effectively addresses the pain points identified, and imbues excitement and trust from the get-go?
With the aim to empower users with a smoother, more efficient booking process:
The design challenge
3. Structure & navigation
Guided by research findings, one of my priorities was streamlining the user flow and interaction design to reduce data input and result comparison time, promoting confident decision-making.
Additionally, I simplified the payment process with a three-step flow to enhance the overall user experience throughout the booking process
3.1 User Flow
The user flow diagram encompassed the entire booking process and integrated key design decisions.
For example, it unified map and list views on the results display screen, facilitating quick initial comparisons and aligning with users' goals of finding and comparing results by location and price.
3.2 Interaction Design
I translated the booking steps into rough sketch prototypes, following the user flow diagram. Rough sketches enabled flexibility to amend my designs quickly and saved me time when working on the digital wireframes and the prototype.
4. Prototype
The next step involved creating wireframes and an interactive prototype for user testing to validate my design solutions.
4.1 Usability Test
I conducted four moderated usability tests on the prototype, incorporating user feedback for improvements. Participants #1 and #2 from the initial research were joined by two participants recruited from my network of frequent travelers.
BEFORE
AFTER
4.2 Developer Handover
I created detailed annotations embedded within the Figma file to serve as a bridge to the development phase. These annotations outlined controls, rules, and feedback for each screen and its states, streamlining collaboration with developers to ensure accurate product realisation.
Feedback From UX Design Institute
“Well done on a great prototype, it contains enough detail to test the high-level flow, the screen layout, and interactions. It’s clear that a lot of time and effort has gone into this and it has paid off! As well as the interactions, the visual design of your prototype is impressive.
Really great wireframes, this document contains all the information the developer would need to build the booking process accurately. Well done!"
Thank you for reading
