Hotel Booking App
The Project
This was a continuous project as part of my Professional Diploma with the UX Design Institute. As the sole designer, I was responsible for the entire design process.
The client: A new hotel looking to create a simple and accessible online booking experience based on a deep understanding of their target users.
The task: Design a new mobile app, focussing specifically on the hotel booking process.
The goal: Design a detailed set of wireframes and build a clickable prototype to be tested with users.
Duration: 6 months (part time)
Year completed: 2022
Methods:
Competitive Benchmarking
Online Surveys
Usability Testing
Affinity Mapping
Customer Journey Mapping
Flow Diagrams
Wireframing
Prototyping
Handover
Tools:
Figma
Keynote
Miro
LetsView
Screenflow
Google Forms
The Process
I approached this project following the design thinking method – an iterative process that seeks to understand the user, challenge assumptions, and redefine problems to identify successful solutions. I began with research to discover usability problems with similar hotel booking platforms. I then used analysis techniques to synthesise my findings and define my understanding of the problems uncovered. I created a rough solution in the ideation stage of the process. This was then transformed into a clickable prototype, which I refined through testing.
Discover
Competitive Benchmarking
GOALS
• Learn how best-in-class websites/apps solve the problems I am trying to solve
• Understand the conventions to follow and best practice to emulate
It is important to note that any insights from the competitive benchmarking are speculative. During the analysis stage, insights will be cross referenced to validate.
Key Insights
Aim to include multiple hotel photos that are easy for the user to scroll through quickly and large enough to see clearly.
The use of icons to avoid unnecessarily wordy descriptions may be helpful, although must be perceivable to the user.
Aim to avoid the use of jargon and insider language that would be confusing to the user eg. ‘SuperRooms’ and ‘TravelodgePLUS’.
Reviews can be a useful tool for the user to assess their booking decision. These are to be easily accessible.
Call to actions that avoid general labelling and are more specific may help guide the user through the process with confidence. Eg. ‘Book now for £120’ rather than ‘Book’.
Aim for a cohesive design, with consistency across the process.
Hilton Hotels
IHG Hotels & Resorts
Travelodge
Booking.com
Online Surveys
GOAL
Discover more about user goals: what they are trying to do, whether anything is preventing them from doing it, and what other features they would like to see.
9 questions
17 respondants
Key Insights
Reasons for last visiting a hotel website/app:
Research options prior to a later booking (44%)
Make a booking (31%)
Amend an existing booking (25%)
82% of respondents had been able to complete their task, however, 88% offered suggestions for an improved user experience.
Price, location and customer reviews were the most important features when booking a hotel.
Over a third of respondents had compared across websites/apps when booking a hotel. Why? To research options and compare price.
User Testing
I conducted usability tests on two websites - Booking.com and Hilton Hotels. In addition to this testing, I also analysed two previously recorded usability tests conducted on Barcello Hotels and the Doyle Collection.
GOALS
• Learn about the context of use of people that use hotel booking websites/apps
• Learn about the goals and behaviours of customers when booking a hotel stay
What people are saying
“Screen is really enticing, showing you different stays....immediately putting me into holiday mode”
"The first thing I'm drawn to is the Tripadvisor reviews"
"I do like to have a little look at the images of the hotel - it gives me an insight”
“I can see a free cancellation policy which obviously would be important”
Selection of usability test notes
Define
Affinity Mapping
GOALS
• Review the research gathered to create an affinity diagram
• Put structure on qualitative research data
Gathering observations from research
Organising into categories
The final groups
Digitised findings
Key learnings
Customer Journey Mapping
GOAL
Translate the research data into a structured document to understand how users interact with the booking process.
Key Insights from Analysis
Search
The calendar is a key area of confusion if the layout or date selection process is not as the user expects
Use of Imagery
The inclusion of large, appealing images that can be swiped through is a big win
Importance of Reviews
Independent reviews matter to the user
Marketing Pressure
Adding pressure to hurry the user, upsell rooms and buy add-ons can undermine trust and irritate
Points of Confusion
The use of jargon, especially in room rate descriptions and offers is unhelpful
Ambiguous icons cause confusion
Opportunities to Reassure
Displaying clear summaries of booking criteria throughout the process reassures the user that they’re on the right track
Consistent use of colour, clear icons and layout help with easy navigation through the process
Orientation markers such as ‘step 1’, ‘step 2’ and ‘showing 1-20 of 103 hotels’ help the user know where they are in the process and the scope of the task
Ideate
User Flows
GOALS
• Define the high-level booking flow for the mobile app
• Address all the issues highlighted in the customer journey map
• Lay the groundwork on which to build designs
Interaction Design
GOALS
• Build on the user flow diagram by sketching the screens and screen states for users navigating the mobile app
• Address all the issues and user goals identified in the research and analysis
• Use sketching as a tool for problem solving and a vital step before prototyping
Prototype
Medium Fidelity Prototype
GOAL
Build a prototype which contains enough detail and interactivity to test the high-level flow, screen layouts, text, and basic interactions.
Handover
GOAL
Create a set of annotations containing all the necessary detail a developer would need to build the application accurately.
What did I learn?
This project has taught me the value of empathising with users and testing assumptions. The design thinking process was time-consuming but worth it, proving essential to the success of the final iteration of the design.
How was I challenged?
As my first experience of working through the UX design process from beginning to end, I enjoyed developing new skills and stretching my abilities. Although it was a learning curve, I saw firsthand the value of each step of the process in producing a successful product for the user. Designing for mobile, I was challenged to carefully consider the use of valuable screen space. Although it took a long time to trim content and review layout, that investment and the iterative process behind it led to a better overall solution.
What next?
The project goal was to design and build a clickable prototype that could be tested with users. Whilst I met the brief, the product could be further developed into a high-fidelity prototype for further testing and then fully built into a mobile app. This would also give the opportunity to identify and iron out any issues in collaboration with the development team.