Project overview

The product:

SafeGarage is an app where people can make an appointment at a car service. SafeGarage offers an easy and quick way to find the nearest car service, select a service, date and time.

The problem:

Car owners don't want to waste their time calling every car service and asking for the price and the closest available date.

The goal:

Design an app for SafeGarage that allows users to easily make an appointment at a car service, saving time.

home screen

User Persona

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was working adults who want to make an appointment with a car service quickly and easily.

This user group has confirmed initial assumptions about SafeGarage customers, but research has also shown that some people are afraid to call a car service.

user persona
user persona

Wireframes

image
image
image
image
image
image

User Flow

user flow map

Low-fidelity prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The main user flow I connected to was to find a car service and make an appointment so that the prototype could be used in usability research.

lo-fi

Usability study: findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 findings

1

Users want to make an appointment in a car service quickly and easily.

2

Users need a way to add multiple services.

3

Users need a way to filter car services.

Round 2 findings

1

User want to to see a list of services with complete information.

2

"Total cost" confuses people.

Mockups

Early designs allowed for some customization, but after the usability studies, I added option to select service and make search. It helps find car service that has this service. Also I decided to make the buttons bigger.

A second usability study revealed frustration with users wanting to see a list of services with complete information. I added this option, users can read the service information before booking.

Search without sign up

image
image
image
image

Help in choosing the right service

image
image
image
image
image

An easy way to sign up:

Fill in the details at the booking stage and come up with a password.

image
image
image

Booking confirmation

Color & Typography

typography image
typography image

What I've learned:

While developing the SafeGarage app, I realized that the first ideas for the app are just the beginning of the process. Usability research and feedback helped me understand the needs of users and how they interact with the app. These steps have influenced how the app design looks now.