top of page

Hotel Booking App


This is a case study that was done during the UX Design Institute

UX Design Professional Diploma.

The task was to design a new mobile app for my client, focusing on the hotel booking process: how users search for and book hotel rooms online.

Length: 2 months from August 2021 - October 2021

Role: UX Designer

  • I completed the process on my own, with some collaborative help during the research and analysis phase.

Design Process:

  • Research

    • Competitive Benchmarking/ note taking

    • Usability tests

  • Analysis

    • Affinity diagram​

    • Customer journey map

  • Design

    • Flow Diagram​

    • Interaction design

  • Handover

    • Medium-fidelity prototype

    • Wireframe

Competitive Benchmarking

I began researching in order to learn how best-in-class apps solve the problem I need to solve, understand conventions I should follow, and learn about the goals and behaviors of customers when using hotel booking apps.

I began my research with competitive benchmarking to learn from other competitors, looking for the things that they did well and the things they did wrong.

I examined 5 mobile booking apps;

  • Hotel Tonight


  • Expedia

  • Priceline


Things they did well:

  • Prices are clearly shown with enough information to break down the costs.

  • Allow the customer to filter and sort their search results.

  • Conventional calendar and date selection.

  • Smart defaults for user details and important information.

  • Feedback on buttons.

Things they got wrong:

  • Poor contrast for important elements on the page.

  • Inconsistent pricing.

  • No options to filter or sort the search results by any means.

  • Lack of affordances to demonstrate the ability to interact with something.

press to zoom
Hotel Tonight
Hotel Tonight

press to zoom

press to zoom

press to zoom

Usability Testing

I also did usability tests to get more information about how the user feels when using a hotel booking app and what their main goals are.

Following a standard script, I began the session with a preamble that discusses the goal for the test, the setup and some things to keep in mind during the test.

I tried to make sure the user was comfortable and conveying their thoughts while using the app.

The hotel booking apps that were tested were priceline and Hotel Tonight.

Due to the COVID-19 pandemic, the usability tests were done remotely. There were no issues during the test, and all the relevant data was captured using Camtasia.

Usability test (dad)_Moment.jpg
Usability test (dad)_Moment2.jpg

A bank of insights was created from the usability tests, providing valuable information that was referred back to at all stages of the process.

The insights are color coded and time stamped for easy access to important information, reducing the amount of time it takes to find the specific bit of data from the usability tests. 

The Hotel Barcelo Group
The Hotel Barcelo Group

Positive interactions and pain points that were communicated by the user for the Hotel Barcelo Group mobile booking app.

press to zoom
The Doyle Collection
The Doyle Collection

Positive interactions and pain points that were communicated by the user for The Doyle Group mobile booking app.

press to zoom
User's final thoughts
User's final thoughts

A summary of what the user thought about the app upon concluding the usability test.

press to zoom
The Hotel Barcelo Group
The Hotel Barcelo Group

Positive interactions and pain points that were communicated by the user for the Hotel Barcelo Group mobile booking app.

press to zoom

Positive Interactions:

  • Availability of reviews

  • Hero image slideshow of possible destinations

  • Simple to use search engine

  • Hotel description providing the necessary information

Paint points:

  • Inconsistencies in prices

  • Too many clicks on the calendar

  • Did not like pop-up of add-on packages**

  • Not enough information in the hotel description

  • Lack of availability of customer reviews

** This feature was also received positively by some users. I would suggest looking into it with some A/B testing.

Affinity Diagram

After collecting the data, it was time to analyze and translate the research data into a well structured document. To do so, I began with an affinity diagram.

This part of the process was in collaboration with a partner. However, due to COVID-19, the session was completed remotely using Miro

After going through the data and making notes, we began grouping them. The groups changed several times before we had reached a final grouping that satisfied all of the data. Doing the affinity diagram allowed me to organize the data, put similar data into groups, learn more about the user goals, paint points, mental models,  and how to work collaboratively.

Customer Journey Map

Now that the data has been organized into high-level groups, I needed to use these groups to define the high-level steps in the customer journey. 

At each step of the customer journey, I documented the goals of the user, any positive interactions or pain points, and if there were any behaviors the app was or was not facilitating.

Customer Journey Map

Flow Diagram

Now that the high-level steps are defined, I began to focus on the user flow and address all the issues that were highlighted in the customer journey map.

The flow diagram displays each screenscreen state, and interaction while also taking into consideration if the user needs to back track.

Adding the possibility of backtracking in certain areas of the flow was important to accommodate all types of users. Ensuring a simple way to backtrack without the fuss will make the app easier to use and reduce user frustrations.

After doing some sketches on a notepad, I created the flow diagram digitally and made the final changes. 

This straightforward flow is easy to understand, and addresses the issues highlighted in the customer journey map.

Interaction Design

In continuing the design process, I began to sketch out the screens. During this step, I addressed all the issues and users goals that were previously identified in the research and analysis phases. 

Using a pencil, paper, and a lot of eraser shavings, I sketched out each screen following the high-level flow that was outlined in the flow diagram.

Referring back to the issues found in the customer journey map and affinity diagram, I created my solutions for each screen. 

I made sure to describe the elements on the screen so that it can be referred to later on in the design process with an easy to understand description.


It was time to begin creating a medium-fidelity prototype with enough detail and interactivity to test the high-level flow, screen layouts, text, and basic interactions.

Following the guidelines I laid out in the interaction design, using Figma, I built the prototype and even made some changes from the sketches after I began putting it together.

The prototype allows for the user to interact and go through the high-level flow, making it ideal for testing.


After testing the prototype and making sure the flow works, before handing it to the dev team, I made a wireframe with all the necessary detail so the developers can build the app accurately.​