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
Design Process
For this project, my responsibilities included, UX strategy and visual design
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.
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
Personas
The following personas represent the user segments for the mobile app.
Personas explain the user's goals, challenges, demographics, and behavior.
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.
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?
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.
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
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
Lo-Fi Prototype
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.
Affinity Diagram
%201.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.
Booking Services
Booking Services
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.
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
Going Forward
Takeaways
Impact
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
Conduct another round of usability
studies to validate whether the pain
points users experienced have been
effectively addressed.
Conduct more user research to
determine new needs and wants.
Introduce additional functionality
per user’s feedback.
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