top of page
Group 2721.png
Group 2667.png

Case Study

Auto service booking app

Project Overview

Problem Statement

According to the Federal Highway Administration, an estimated 93% of households in the U.S. had access to at least one car in 2019.
Cars require routine maintenance and repairs.
Finding a good and affordable repair shop can be time-consuming and daunting. Usually, people use word-of-mouth referrals for these services and have to call to make an appointment.

Possible Solution

The service shop finder app allows people to search per geolocation, ratings, type of car manufacturer, or an issue.
The app allows a quick and easy booking of a service or repair appointment, online consultation, price quotes, and online payments.
The app allows ease of use, convenience, and savings.

Project duration

My role

UX designer leading the responsive website platform design from conception to delivery. Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.

Tools used

December 2020 to June 2021

Frame 58.png

Design Process

For this project, my responsibilities included, UX strategy and visual design
Group 2697.png

Qualitative Research

I interviewed nine people over the phone and Google Forms.
The goal was to understand the challenges in the auto service industry from the consumer perspective.

  • What kind of work do you do?

  • Do you have a permanent auto service?

  • How often do you schedule appointments to the auto service?

  • Does the auto service provide you with all the prices before the visit?

  • What is the year of your car?

  • How often do you have problems with your car and have no idea what is the problem?

  • Do you know when your following plan car service/diagnosis?

  • Do you receive a price and time estimate before or during the car drop-off at the shop?

Key insights derived from the interviews

  • Families with more than one car mostly take the vehicles for maintenance to the car
    manufacturer’s service locations. More than often, cars belong to different car manufacturers.

  • People shop around for better rates and sometimes look at different shops, avoiding
    car maker service facilities due to high rates and turnaround times.

  • The appointments for service are usually made by phone.

  • The interviewers believe that ratings and reviews are essential in building brand trust.

  • It is hard to find a service facility that provides quality and affordability.

  • Besides issues that cars develop over time, there are maintenance, oil changes, and damaged tires.

  • Unfortunately, people only find out the service cost when they come to pick up the car.
    More than often, the charges are very high.

Quantitative Research

I facilitated an online survey using Google Forms to learn the potential user's needs and wants. Eighteen participants assisted me in framing the problem I opted to solve via the mobile app concept.

Group 2679.png

Key insights derived from the survey

The survey confirmed the need for online interaction/communication, determining the required service types based on the issue described.

The car owners visit auto repair shops once a year or more.

The quote is provided during the car drop-off and not ahead of time in most cases for routine maintenance. It prevents people from shopping around ahead of time.

The quote is provided during the car drop-off and not ahead of time in most cases for routine maintenance. It prevents people from shopping around ahead of time.

Based on the user interviews and online surveys, I created the following experience



The following personas represent the user segments for the mobile app.
Personas explain the user's goals, challenges, demographics, and behavior.

Persona_Anna 1.png

User Journey Map

I made a visual representation of the user's journey across all touchpoints of our application to understand where it’s possible to improve the user experience.

journey map.png

Empathy Map

The empathy map helped me gain perspective around thoughts and feelings. The data in the empathy map is based on insights from user interviews. The following process defines the target audience better and illustrates their needs and actions.


Competitive Audit

During this step, I conducted a Competetive Audit.

  • Where and how do they display information?

  • Are there user-centric, easy-to-navigate mobile apps or online experiences?

  • What are the strengths and weaknesses?

Copy of Google UX Design Certificate - Competitive audit template - Template 1.png
Screen Shot 2022-02-09 at 0.35 1.png
The conclusion from the competitive analysis gave me an idea and better understanding of what my customers will expect from my website.

User Flow

This user flow was created to illustrate how the user will navigate through the website.

user flow-1 1.png

Information Architecture

IA Map of the final product helps organize the pages' hierarchy, content, features, ultimate user experience, and interaction with the website.


Low & High Fidelity Design

Step 1: Story Boards are visual representations of the use cases
Step 2: Low-fidelity wireframes sketched on the paper represent the skeleton of the interface

Group 2732.png

Low Fidelity Digital Wireframes

Step 3: The basic structure of the wireframes can be changed per usability testing outcome quickly and efficiently, making the process iterative before development efforts.
Step 4: Digital Wireframes in Figma.

Digital Wireframes

Garage app-digital wireframes 1.png

Lo-Fi Prototype

Screen Shot 2022-01-12 at 22.13 5.png

Usability Study

I conducted two rounds of usability studies. After the first round, I was ready to create Mockups. In the second round of the usability study, I used a High Fidelity prototype that revealed additional refinements.

Google UX Design Certificate - Research Presentation - Garage app 1.png

Affinity Diagram

Screen Shot 2022-02-11 at 7.34 1.png
Google UX Design Certificate - Research Presentation - Garage app (1) 1.png

Refining the Design

I conducted two rounds of usability studies. After the first round, I was ready to create Mockups. In the second round of the usability study, I ran High Fidelity prototype that revealed what aspects of the project I still needed to refine.

Early designs provided a page of primary services to select. Initially, I used a carousel format to showcase the services. The usability study revealed a need to shift from the carousel concept to the hotspots with clear icons representing each service.

Group 2733.png
Booking Services
Booking Services
Group 2735.png
Select Service/Product
Booking Services
Select Service/Product

After the first round of the usability study, I fixed and refined the list of elements, improved the view, and added real product pictures, rates, and labels.

Group 2734.png
Home page
Home page

High Fidelity Digital Wireframes

I used Figma to build a realistic representation of my app. Then, I tested specifically UI components and interactions of the primary user flow within a screen to understand the look and feel of the app from the user's perspective.


High Fidelity Prototype

Screen Shot 2022-02-10 at 17.33 1.png
01 - Color - Light.png
02 - Typography - Light.png
02 - icons - Light.png

Going Forward



Users believe that the Garage app meets their expectations and needs. It is a user-centric app that is intuitive.

One quote from peer feedback:

"It's so intuitive and nice. I will definitely use this app in real life."

What I learned

While designing the Garage app, I learned that the initial ideas for the app are only the beginning of the process. Moving through the process, I discovered more than I expected. Usability studies and user feedback influenced each app's design iteration. There is plenty to learn.

Next steps

Group 2717.png

Conduct another round of usability
studies to validate whether the pain
points users experienced have been
effectively addressed.

Group 2716.png

Conduct more user research to
determine new needs and wants.
Introduce additional functionality
per user’s feedback.

Group 2718.png

Meeting with the local auto service reps to gain an understanding of how to improve the experience from their perspective. Integrate the findings into the Garage app

bottom of page