Booking Services Mobile App

by Daniel Alshriky

We’re going to go through a case study for a booking services mobile application. A case study is an amazing way to share the experience and outline. we need to take into consideration while being engaged in the project.

The following case studies illustrate how our application has helped solve problems faced by customers while booking service.


Pencil and papers, Adobe XD, Flinto for prototype, Sketch app and InVision for sharing and collecting feedback.

Adobe XD, Flinto, Sketch app and InVision

Our Design Process

We have followed Human-Centered Design (HCD) principle and Design Thinking to make sure that the decisions we have taken are based on the user’s needs and desires.

Our Aim

We’ve worked with team members, decision makers and invited a number of project stakeholders (business, marketing, sales and technical) and conducted a workshop to define requirements and come up with a clear goal and a well-defined plan of action.

We have used Feature Prioritization Matrix to have a clear view and understanding of our client’s requirements. By using this method, it allows us to capture and prioritize feature requests and build out an effective and well-thought out product roadmap.

Meeting and Interview With the Call Center Department

As part of our design, research and analysis, we also had the opportunity to do interviews with the employees and listen to customer’s calls from the Call Center Department.

During this time, we were able to gather what are the common patterns and behavior of the customers whether they’re inquiring or trying to book a service. What questions they usually ask, their needs and problems.

Survey Results

The statistics drive us to have many results and guide us to where we should concentrate. It also helped us to plan better, and arrive at meaningful conclusions knowing that our decision is based on data and not on assumptions.

Given the results and combining it with the data we gathered from the Call Center Department, we have come to know that majority of people go for a cleaning service and requires 1 cleaner with a maximum of 3 working hours.

With this data in hand, we can set the default value in the application. It minimizes the clicks it takes for a customer to finish his/her booking process faster.

Interview With the Actual Users

User interviews can be a great way to extract information from users for user experience understanding, usability understanding, and ideation.

We carried out interviews with a number of users to understand the user’s challenges and allow us to gather some in-depth information as well as gather qualitative information to shape the needs and desires of the users.

With this information at hand, we have crystallized our ideas about the user and enabled us to capture the needs and aspirations of our target audience while creating the persona.


User Journeys — Booking First Time

Function — Booking cleaning service


We had the card sorting session with a focused group to help us organize topics and contents of our application. We used actual cards and pieces of paper, briefed the participants with all the cleaning services available and asked them to write their preferences accordingly. By doing this, it also helped us in building the structure of our application, decide on the main content, label categories, and the navigation flow.

Low Fidelity Prototype

To get started, we made a quick paper prototype which is an easy and fast way in visualizing and conveying our main idea. This also helps us to have a clear base when we discuss and present them to the team as well as to validate with the users if the screen meets our goal.

Initial feedback we got based on our discussion:

  • First time user requires more information and had 3 steps to complete the booking process, 2 steps if the user has added the location(s) already.
  • Selecting the date and cleaner availability is not easy. User should be able to navigate back and forth to see the suitable options.
  • Selecting the type service should be the first step.

High Fidelity Prototype

Our high fidelity prototype shows the design details, functionality and interaction flow of our application. This allows us to examine usability questions in details and make strong conclusions about the user behavior.

In the subsequent pages, you will see the interactive elements in our design, visual hierarchy, the priority of screen elements, content and navigational flow from a screen to another.

Interaction Concept

The following below are the motion techniques we used in our application:

  • Card-style layouts
  • Quickly show or hide content with clicks or swipes
  • Transitions, overlapping and sliding between each steps.

Visual Design

We strictly followed the brand guidelines and use our expertise and experience to advise on how we can improve the overall look and feel of the application while maintaining the brand identity.

As shown below in the mood board, we follow white, grey and one primary colour palette.

This give users the feeling of open space and allow them to do booking process in the most comfortable way.

The Typefaces and Colors

Sample From Final Product

We show a sample of starting and ending point of the main screen, select maid, favorite maid that based on the rating or user’s preferences. Add credit cards and offer promotion.

Thanks for reading!

As UX designers, the case study taught us how to understand users, also show process and solution whatever small or big that could have massive impact on the product’s success and user’s satisfaction.

User Experience Lead | Data-Driven Design