Hop Inn
UX/UI Design Project
Overview
Hop Inn is a hotel booking app designed to remove the complexities when choosing a hotel and selecting a room.This case study is the outcome of the Professional Diploma in UX Design course from The UX Design Institute.
Problem
The hotel industry is one that can benefit from UX. Booking a hotel room online should be a simple process, but sometimes it can feel complex.
My Role
As the UI/UX Designer for my project, I was involved in the entire process, including the overall strategy, user research, information architecture, user testing, interaction design, and visual design.
Tools Used
Figma, Sketch, Miro, Adobe XD, SurveyMonkey
Duration
January 2021 - May 2021
My Approach
The Design Thinking Process
These methods and approaches put design at the forefront of the product development process, which I follow to create products that are better suited to meet a user’s needs and more likely to be the best possible solution.
Research
understand
Both qualitative and quantitative research methods were used to gain a greater understanding of the user’s problems and issues.
Competitive Benchmarking
I examined and analysed four mobile applications to gain some insight into how best to design the app. I wanted to take notice of design patterns across the applications that seem to be used in all applications. I compared three different hotels (two chains) as well as a hotel aggregator.
I analysed and reviewed the following aspects of each app: Homepage, Date Select, Hotel/Room Search, Booking and Payment.
Key Findings
• Large volumes of information should be broken up by means of visual hierarchy, usage of iconography and photography.
• White space is very important but there shouldn’t be random dead space and the rest of the visual hierarchy small etc.
• Important CTAs should be easily accessible and prominent.
• The usage of large beautiful photographs is essential for making the hotel booking process more effortless and intuitive.
• The design of the calendar widget to search for date availability can often be confusing and requires extra attention to detail.
• It is necessary to find out what information is useful to the user to make the hotel search effortless and make it easily accessible while the information that is secondary could be hidden/collapsed as to not overwhelm the user.
• The clever usage of visual hierarchy is essential for an uncluttered design that is easy to navigate.
• Giving the user as much control as possible eliminates frustrations (go back, clear search, edit, change slide etc.)
Online Surveys
Online surveys were the foundation to gain data if there are any general patterns or pain points in the booking process.
I wanted to investigate and understand:
• The goals of users and behaviours/habits when booking.
• What can be improved in the booking process of a hotel.
Key Findings
• The most frequent use case, with 48% of participants, was to check price. This was followed by Book a Hotel (30%).
• The most common device for users was a smart phone.
• 66% of participants prefer to use travel aggregator apps or websites such as booking.com & Trivago.
• Majority of participants would consult an hotel app/ website before making a final decision on the booking.
• The design of the calendar widget to search for date availability can often be confusing and requires extra attention to detail.
• 60% of the participants booking are influenced by the layout/design.
• The most important factor for participants when using hotel platforms was the price, this was a common response throughout the survey.
Research
Observe
I conducted user interviews remotely by reaching out to 3 interviewees comprising of persons that travel regularly. The interviewees were asked to access two mobile apps: The Hilton Hotel Group App and Premier Inn App.
User Interview Goals:
• Understand users’ goals, needs, and motivations when booking.
• Explore opportunities or gaps in competitive apps by understanding user frustrations, triggers, and preferences.
Key Findings
• The hotel selection should show what is nearby the hotel.
• Comparing the hotels take too much time.
• Switching between map view and hotel view, filters don't reset.
• The ability to have add-ons after the room selections.
• The app should show what is being paid now and what is left to pay.
Analysis
Affinity diagram
The research gathered was structured into an Affinity Diagram so I could analyse my data. By constructing my research findings into relevant groups, I was able to lay down the foundation of the Customer Journey Map that follows.
Analysis
customer Journey Map
Defining the Customer Journeys was a crucial step towards deriving user flows and users experiences at each stage. It outlines the goals. behaviours, context, mental modals and pain points.
Design
Flow Diagram
After analysing all the research data from the affinity diagram and the customer journey map, an initial high level flow was drawn up which highlighted the problems from the customer journey map. The focus was on a typical user flow from the homepage up to payment.
Design
Interaction Design
Working in conjunction with the customer journey map and user flow, I then sketched out the possible solutions for each screen. Using pen and paper helped me to brainstorm and iterate through design options quickly. Rules and feedback for the design element were also defined, and after several iterations, the final user flow was ready to be converted into prototypes and wireframes.
Prototype
Mid-fidelity Prototypes
After sketching each screen state, a medium-fidelity prototype was created. This included high-level flow with interactive elements which were then put through a round of usability tests.
Creating the prototype allowed me to see what worked, what didn't and what needed to be changed before the wireframes hand-off.
Wireframes
The handover
As the handover process, I created a detailed blueprint, including the rules, controls, and feedback of every screen and screen state on the hotel booking process for the developers to build the application.
Style Guide
Tell Story
After the testing and refinement of features in the app, bring together the personality of Hop Inn. I established a design language to refine the design of the interface and maintain consistency.
