HotelHub.

Booking hotel stays just got easier.
Come see!

Client

HotelHub.

Scope of work

UX/UI Design
UX Research
UX Analysis
UI Design System
Wireframing
Prototyping

Introduction

I designed a mobile app for HotelHub, a start-up that facilitates hotel bookings. The app provides users with a seamless and efficient digital experience, centered on their needs. I conducted user research and created wireframes and prototypes that were used for user testing and development.

Contribution

Everything detailed in this project has been completed by myself. I am responsible for all research and UX design. This project is research based and the focus is on the usability of the product. I worked alongside a Junior UX Designer.

Problem

HotelHub wants to stand out in the landscape of increasingly complex hotel apps, and like all hotel apps they have a complex series of interactions that they go through to book a hotel.
This can be frustrating and time-consuming, and it can lead to users making mistakes with their bookings. The average hotel booking app has over 100 filters that users can use to narrow down their search and 40% of users have made a mistake with their hotel booking due to the complexity of the app. HotelHub wants to create a more simple and user friendly interface and user flow.

Key Drivers

Convenience

HotelHub should make it easy for users to find and book hotels. This includes providing a user-friendly interface, a wide range of hotels to choose from, and transparent pricing.

Personalisation

HotelHub should personalise the experience for each user, taking into account their preferences and past behavior. This can be done by recommending hotels that they are likely to be interested in, or by providing them with special offers.

Simple Interface

HotelHub should have a simple and intuitive interface that is easy to use. This will make it easy for users to find and book hotels, regardless of their technical expertise. It should also be visually appealing and engaging.

Hotel booking pages:

Competitive Benchmarking


I analysed three popular hotel booking apps (Booking.com, Hotel.com and Kayak) to understand their user-friendliness. My goal was to identify the best practises as well as issues with their current designs.

Do’s

Prioritize usability over aesthetics.

Use large, clear text.

Use high-contrast colours.

Use a consistent design.

Make it easy to find what users are looking for.

Dont’s

Don’t use too many colours.

Don’t use small text.

Don’t use low-contrast colours.

Don't forget about accessibility.

Online Surveys


An online survey was conducted to understand users' behaviors, needs, and objectives. The survey revealed that most users find the process of searching for and reserving hotel accommodations to be unenjoyable even with an easy understanding of how the application is intended to work. Some of the common complaints included the tedious, confusing, and poorly designed nature of the process, as well as the lack of transparency regarding pricing.

Usability Testing


We conducted competitor user testing on 4 hotel booking apps (Barcelo Hotel, The Doyle Collection, Booking.com, and Hotel.com). We interviewed 10 participants to understand their objectives, previous booking experiences, and pain points.

Findings & Insights:

- Several apps present excessive, unnecessary information, leading to information overload.
- Apps don’t show aesthetic images to entice bookings from the user.
- Certain features can be confusing and lack proper explanation. - Users are unsure whether the cost displayed is with or without member discounts.
- The booking process can be confusing and lacks an easy-to-use 'back' function.

Customer Journey Mapping


To move forward, I consolidated the data collected from the competitive benchmarking, online surveys, and usability tests.
The data was mostly qualitative, so I used a customer journey map to organise it logically.

Findings and Insights:

  • The structure and flow of the application need to be streamlined and simplified.

  • Only relevant and essential information should be displayed to users.

  • Any features or add-ons should be thoroughly explained if used.

  • The design should be sleek, minimal, and aesthetically pleasing.

  • The cost of the stay must be transparent and unambiguous.

  • Searching for and selecting stays was confusing and overwhelming.

  • Not being able to go back in the booking process was frustrating.

Balancing user needs with business needs

The initial user research for HotelHub uncovered a variety of areas of opportunity, such as making it easier for users to find the right hotel, personalising the experience for each user and offering competitive pricing.

It was important to balance user needs with business goals. The team decided to focus on the following key areas:

  • Improving the hotel discovery experience. This included providing more filters, offering personalised recommendations, and making it easier for users to compare hotels.

  • Simplifying the user experience around hotel selection. This included making it easier for users to learn more about the hotel they were interested in staying at such as proximity to city centres or beaches, facilities and reviews.

  • Creating an interactive map viewing option: This included an interactive map that users could view to see the proximity between the different hotels they were browsing as well as see some introductory information about each.

Brainstorming session

Prototyping

Brainstorm

Sketches from the project

Sketches

Low fidelity prototyping

User Flow Diagram

Moving on to the design stage, the initial step involved mapping out the user's flow through the HotelHub application. This began at the homepage and concluded at the checkout stage. My primary objective was to simplify the flow while addressing the pain points identified in previous stages of the project. By doing so, I aimed to create a seamless user experience that would facilitate ease of use and promote conversion rates.

Wireframes

I sketched out many wireframes and brainstormed ideas and settled on on my final low fidelity wireframes and prototypes to test. I settled on four areas onboarding, the hotel search feature, the hotel section feature and map viewing.

Design System

#FFFFFF

#5F3FEE

Typography

UI Visuals

#D2F7F6

#F4F1FF

Iconography & Components

I started by building a comprehensive components library within Sketch that would later reflect in various parts of the app, i.e., colors, typography, setting the grid etc. This included icons, buttons, form elements, error and empty states, show cards and content cards.

HotelHub’s design system was built to be scalable, so that its components can work together seamlessly and render well on devices of all resolutions.

Colour Scheme

User Search Bar

As we saw in the user research phase, users default to the search bar. We know the search feature is important for HotelHub's booking app because it allows users to find the hotels that they are looking for quickly and easily. The search feature is comprehensive and allow users to narrow down their search by location, guests, rooms, and other criteria. I designed it to be easy to use and understand. I took inspiration from the Hopper application where the search feature has a variety of filters, such as price, star rating, and amenities, so users can find the perfect hotel for their needs.

Map View

I designed the interactive map view feature so that users can easily flick between the grid and map view. This is important for HotelHub's booking app because it allows users to compare hotels easily on the map view, especially their proximity to each other and and other points of interest such as the beach.

Hotel selection

I designed the hotel selection feature to be simplistic and allow users to compare hotels with a grid view. Prices should be easily visible and there should be minimal information. The hotel selection feature is important for HotelHub's booking app because it allows users to compare hotels easily and quickly. I took inspiration from the Uber Eats application where the hotel selection feature has a grid view with the price of each hotel prominently displayed.

Lessons Learned

Focus on the user first.

The most important thing when designing any product is to keep the user in mind. This means understanding their needs, pain points, and goals. Only then can you create a product that is truly user-friendly and effective.

Personalisation is important.

Users appreciate it when apps take the time to personalise the experience for them. I did this by providing them with special offers and allowing users to have a grid and map view of hotels.

Test, test, test.

Once you have a prototype of your app, it's important to test it with users early and often. This will help you to identify any usability issues and make necessary changes before launching the app to the public.