Hero image with the two iphones showing two screens of the DriverHelper app

Overview

The main idea was to design an app that would provide users with better options to manage their vehicles and follow key statistics in one place. Furthermore, an additional goal was to create not just something that would keep the car data but an assistant who could help the driver on the way.

Low-fidelity designs

Medium-fidelity designs

Role

UX/UI Designer

What

Mobile App

Why

Portfolio project

Where

Prague

When

4 Weeks

Low-fidelity designs

After examining other apps on the market, I started with low-fidelity wireframes that represent the basic structure and user flow. It helped me clarify the app's features and choose the font and the grid.

Medium-fidelity designs

After small usability tests with a group of friends, I made some changes. First, I rebuild the tab bar to make it more elegant and prominent without losing accessibility. Also, on all screens, I correct the position of small elements to make the grid more consistent.

A medium-fidelity navigation screen with grid

From the start, I designed with the margins of 12, 16, 24, 32, and 40 pixels.

Furthermore, I was thinking about creating a tab bar with the labels, but after experimenting, I decided to let the icons speak for themselves.

High fidelity light designs

After defining grids and basic layouts, I started making high-fidelity screens. The main focus was to create an accessible and creative UI design with a smooth UX. The first version of the app had a white background and a light-blue main and accent colors.

Light mods colors

Fonts

Lato

Icon

Dark mode

After the light version was made, I reversed the colors and created a second color pallet for the dark version of the app.

Colors

Toggles

Tab bar

Monetization

During the market analysis and small competitive audit, I decided that DriverHelper should be monetized in a way that users cannot add their car until they make a subscription.

After several usability studies, there is an opportunity to make a second app for users who wants to enter the data manually (if their car cannot transfer data). In this case, monetization will be the same, but features will differ.

Because of this reason, almost all screens have the “Get Premium” button. I made these buttons in secondary colors, so it doesn’t interrupt users from the main user flow.

Check more projects