About this Case Study

This project was undertaken for the UX Design Diploma ran by the UX Design Institute I completed in 2022 where I passed with an overall score of 89%.

Project Outline

The project is focused on a fictional hotel and resort chain called Serenity Hotels and Resorts. They were in need of a new app to market and sell their hotel rooms and wanted to focus on providing their users with an accessible, enjoyable and stress free booking experience.

Figma screenshot of Serenity hotel app designs

Responsibilities

Other than the analysis part of this project which I had a helper (Thank you Thais for your input), I was responsible for all the tasks including research, design with branding, prototyping and wireframing for developer handover.

Technologies Used

The primary design tool used in this project was Figma, with Photoshop for image manipulation, Miro for collaboration and diagrams like the affinity diagram, Reflector 4 for capturing screens in usability tests, and pen and paper for interaction design.

Figma logo
Figma
Miro logo
Miro
Reflector 4 logo
Reflector 4
Photoshop logo
Photoshop
Pend and Paper Icon
Pen and Paper

Deliverables

The deliverables for this project included a clickable prototype and wireframes with annotations for development handover.

Hand holding iPhone showing Serenity Hotels loading screen

Prototype

Design and build a clickable prototype that is focused on the hotel room booking process that can be tested with users.

Serenity Hotels developer handover document

Developer Handover / Wireframes

Create a developer handover document with annotated wireframes to help the development team understand how to build the app.

The UX Design Process

The UX design process is a crucial component of creating a successful product or website. The stages involved with this case study included research, analysis, design, prototype development, and handover documentation for the development team.

Computer Driver Icon

Research

The discovery phase of this project included competitive benchmarking, an online survey and usability tests with in-depth interviews to gain valuable insights into user preferences and market dynamics.

Shape converting icon

Analysis

In order the understand the research that was gathered, an afinity diagram work shop was organised and then the findings from that were used to create a customer journey map to define the high-level steps the user will take in the booking process journey.

UI grid icon

Design

Taking what I had found within the analysis phase, the next step was to create the flow diagram and screen flow documents to understand how the user will flow through the app. Low fidelity screen designs were then created with pen and paper.

Desktop and mobile devices icon

Prototype

Following on from the hand drawn low fidelity screen designs with pen and paper, the designs were taken into figma to create the high fidelity screens for the prototype build.

Check list icon

Developer Handover

After the prototype was built, the screens were then annotated with the information the development team will need to understand and complete the build of the Serenity Hotels and Resorts app.

Research & User Testing

The research for this case study included a competitive benchmarking, an online survey, and usability testing with in-depth interviews.

Competitive Benchmarking

The hotel industry is a highly competitive market with numerous players vying for customers' attention and business.

As such, it's important for hotels and vacation rental companies to regularly conduct competitive benchmarking research. In this competitive benchmarking research, I analysed the hotel room booking experiences of four major players in the industry: Shangri-La, Hilton, Radisson Hotels, and Airbnb.

My research included an analysis of each of the company's mobile apps to find out what industry best practices should be followed and what bad practices are to be avoided to facilitate the best user journeys as possible for the new Serenity Hotels and Resorts hotel room booking app.

Competitive benchmarking document with screenshots
Airbnb logo
Hilton Honors Logo
Shangri La logo
Raddison logo

Online Survey

To get to understand some of the habits and thoughts of users while they are booking hotel rooms online, I created a 10-question survey using Google Forms and was shared with family and friends and also on social media. The results were then analysed and documented to be used in future within the project.

Google Forms online survey screenshot

Usability Testing

As part of the project and to improve the hotel booking experience for users, I conducted an in-person in-depth interview and a usability test for two popular hotel chains, Hilton and Radisson. The test was recorded using Reflector 4 to capture what the user was doing while navigating the apps along with QuickTime Pro to capture the user’s reactions.

The goal of this test was to evaluate the users experience of the hotel booking process on each of their mobile apps with the aim of identifying areas for improvement and positive interactions and ultimately enhancing the user experience on the new Serenity Hotels and Resorts App.

I also had access to some recent usability tests which included in-depth interviews that covered the room booking process for the Barcelo and Doyle Collection hotel chains. Having access to other usability tests gave me more valuable research data to work with.

Usability test screenshot

Research Findings

Listed below are some of the research findings that stood out that will help with the design of the Serenity hotel room booking app.

UI and Web Devices IconCompetitive Benchmarking

  • Most of the hotel room booking apps have a search feature on the landing page.
  • All the apps used very similar processes to let the user add dates, guests and destinations so these seem to be industry best practices.
  • Some of the apps didn’t use the correct keyboard for the form that the user was filling in.
  • Some apps performed better with providing information about the hotels on the search results and room selection pages.

Check list iconOnline Survey

  • 7 out of the 10 participants said it was important to have up to date images for the hotel facilities and hotel rooms they were booking.
  • The feature that was expected the most in this question was search by filtering hotel amenities.
  • The most popular ways to access the hotel booking services were on a mobile phone app or a desktop/laptop computer.
  • Users would like to see flexible payment options and budget filtering features.

Computer Driver IconUsability Testing

  • Users liked to see image sliders featured on apps with real photos of the hotel rooms and amenities.
  • Users liked to view clearly displayed prices for rooms with different options available such as including breakfast or free cancelation.
  • Most users mentioned that they want to see reviews on hotel booking apps, and most would like to see reviews from TripAdvisor.
  • Map features and filtering options were important to most users.

Analysis & Brainstorming

An affinity diagram session was set up to break down the research into manageable chunks before organising that data within a customer journey map.

Affinity Diagram

To begin to understand and analyse the research data, the first step was to organise a remote affinity diagramming workshop using Miro and Zoom. This was done with the participation of one other team member who had been given time to read all the research data beforehand.

Using sticky notes in Miro, the data was organised into relevant groups that included user goals, pain points, mental models and other contextual information. Actions the users take while using the apps were also grouped together.

Affinity Diagram Sticky Notes

Customer Journey Map

Taking the now organised data from the Affinity Diagram, a customer journey map was created to define the high-level steps in the booking process journey the user will be taking.

Each step in the process was evaluated to document how the user might be feeling, the pain points and positive interactions and the most common user behaviours that were found during the research phase.

Part of a customer journey map diagram

UX / UI Design & Prototype

The initial stage for the design process was to create the flow diagram and screen flow, this was followed by the Interaction design that was hand sketched then annotated.

Flow Diagram

The flow diagram represents the the most common route the user will take from the landing screen to the booking confirmation screen.

The flow diagram was sketched out by hand before being recreated and improved on in Figma. An alternative flow route was included in the diagram for when a user would prefer to sign up for an account rather than going through the process as a guest.

Part of the Serenity flow diagram

Screen Flow

Taking the now organised data from the Affinity Diagram, a customer journey map was created to define the high-level steps in the booking process journey the user will be taking.

Each step in the process was evaluated to document how the user might be feeling, the pain points and positive interactions and the most common user behaviours that were found during the research phase.

Flow diagram for Serenity Hotels
Part of Serenity flow diagram

Screen States

Any screens that had different screen states such as content updates, pop ups or keyboards opening were illustrated in the screen states document.

Serenity Hotels Screen States Diagram

Interaction Design

Each screen of the app was hand sketched on top of iPhone screen templates and then each screen was photographed to have a digital copy.

The photos were then imported to a Figma document and annotations were added to explain any of the features on each screen.

App screen sketches with annotations

User Interface Design

Serenity Hotels App landing screen
Serenity Hotels App search screen
Serenity Hotels App destinations screen
Serenity Hotels App calendar screen
Serenity Hotels App map screen
Serenity Hotels App summary screen
Serenity Hotels App checkout screen
Serenity Hotels App confirmation screen

Prototype

The prototype is available for you to check out the booking process of the new Serenity Hotels and Resorts App.

View prototype on Figma
Serenity Hotels App guest selection screen

Developer Handover Documentation

Once the prototype was completed, the screens were then annotated with the information the development team will need to understand and complete the build of the Serenity Hotels and Resorts app.

Developer handover document for Serenity app screen

What's Next?

Product Validation Testing

The app still needs some further improvements, before these are undertaken, more usability testing will be needed to be performed to iron out any issues that users may find frustrating. To be continued…

Looking to Start Your Next UX/UI Project

Get in touch to find out what solutions I can provide your business. I'd love to hear about any of your ideas and support you in reaching your goals!

Contact Me

Take your UX, UI or Web Design project to the next level? Let's work together on something amazing!

Get In Touch by Email