Simplifying Hotel Booking
This UX design case study on hotel booking apps was completed as part of my Professional Diploma in UX Design from the UX Design Institute.
This design was completed for Eastern Estate - a fictional luxury hotel chain with multiple locations on the East Coast of Canada. The app is intended to provide its clients with a quick and intuitive booking process while increasing customer loyalty and trust in the brand.
My Role
UX Researcher
UX Designer
Team
Solo Project
Tools
Figma/Figjam
Google Slides
Duration
4 Months
(Part Time)
The Problem
A stay at a luxury hotel should evoke feelings of peace and relaxation for its users, however, current hotel booking apps follow unconventional patterns, leaving the users confused and frustrated.
Some of the most common pain points of these hotel booking apps are:
Non-intuitive search entry and search results screen
Presenting too much, or unnecessary, information
Fluctuating costs or presenting hidden fees at the last step of booking process
Lack of freedom and control for the user to enter information in their preferred way
These pain points can result in the user losing trust in the brand, and abandoning the platform.
“My instinct is to exit out of the app at this point and try a different one”
The solution
To design an app that prioritises minimizing user pain points, and places emphasis on areas such as:
Creating an intuitive search process to decrease confusion
The use of concise information with clear visual hierarchy
Providing complete price transparency throughout the booking process
Creating a personalized and optimized user experience
My Design Process
Research
Competitive Benchmark
In order to grasp a deeper understanding of current hotel booking apps, I completed a competitive benchmark against four different mobile apps. This helped me to identify industry conventions/best practices, along with areas of the current systems that could be improved.
Usability Testing
The best way to understand how users will interact with a product is to witness it firsthand!
I conducted a usability test, using two different hotel booking apps, and also took detailed notes of two additional user tests that were provided to me.
Key Takeaways:
Keep a clean and simple interface, with clear call to action.
Personalize user experience based on their previous booking history and phone location.
Optimize date picker by using standard intuitive systems, and be forthcoming on availabilty
Give users Freedom and control by providing alternative input and navigation options
Define
Affinity Diagram
To provide logical structure from the qualitative data obtained through my research, I completed an affinity diagram. This included adding all of my research notes to a FigJam file, and creating groups and subgroups based on similar data, identifying patterns.
Customer Journey Map
Based on the patterns identified through the affinity diagram, I created a customer journey map to portray the standard user experience. This helped to identify user pain points, positive experiences, behaviors, and mental models, to help form decisions for the design phase.
Key Takeaways:
Enticing imagery and personalization help users to make a decision and increase satisfaction
Search entry and date selection should be intuitive and allow user to enter information in different formats
Users want to quickly identify full rates, without hidden fees, and have control on the displayed currency
Users do not want to be forced to sign up: Provide a clear and quick option for user to continue as a guest
Design
User Flow
To help visualize the optimal user flow through my design, I created a user flow diagram in Figma, focusing on the primary use case. This was effective in helping me define a clear structure of the software while considering information architecture, visual hierarchy, and the overall relationship between content.
Sketches/Interaction Design
Keeping in mind the key features identified through research, and following my user flow diagram, I created low-fidelity sketches. This allowed me to quickly get my ideas out on paper, and revise as necessary, before moving to a digital platform.
Wireframes
Once I was confident that my sketched design was meeting the project goals, I recreated the sketches in Figma with mid-fidelity wireframes to form the overall design structure.
Deliver
Annotations
The design is now ready to be handed over to developers! To make the handover process as smooth as possible, I have included annotations as Figma comments in my Figma file, to help detail my design intentions to developers.
High-Fidelity Prototype
Now it is time to see the design come to life! I increased the fidelity of the design to help stakeholders visualize the final product, and see exactly what we were looking to achieve.