Mobilitet IOS App Concept

Car owners secret weapon

UX, UI | Jan 2016

Mobilitet is an App concept created with the purpose of making keeping track of the car maintenance and repairs easier on the car owners. The concept was ordered by a business working in the car repairs industry in Germany so there is a bit of a twist to it. So keep on reading to find out :)

Let’s begin however with the first part of the project - defining the scope of the product. To spare your eyes I am leaving out the countless sketches I did in the process of figuring out how the different parts of the system should interact and presenting you with the final (yet very simplified) UX plan of the App.

NOTE: A lot of important context is not visible on this graph, but keep on reading to find out more. Settings have been left out since it is not an essential part of the user journey.

Next up - sketching screen layouts. Several iterations on that and I was ready to jump into Sketch (the design software) and start working on bringing the designs to life. Here are a couple of selected screens with descriptions of their functions:

These two screens include the input fields for the information the user needs to give in order to start using Mobilitet. A bit of extra flashiness on the login screen since it is the first thing the user will see after opening the app. We want to make sure that the first impression "grabs" the user, right?

ADDING A GARAGE

Twist 1: After logging in, the user is asked to scan a QR code in order to select a repairs garage. Yes, that is the only way, because our client wants to have a certain degree of control over which users can use the App. There is a certain degree of VIP-ness to it.

The context to think about it - the client of a garage just got their brakes repaired. The garage employee gives the client a card with the QR code and says something like: “Hey, if you want to keep track of all the repairs that we do for you and book new services easier and faster, use this QR code to get started on the App”. Well, you get the point.

SERVICES AND GARAGE DETAILS

There is a variety of Services that the users can book via the App (listed in the service icons set below). The user is asked for booking details such as the day and time, optional description of the problem and optional images of the parts of the car that need to be worked on.

If the user choses to, they can just call the garage up, visit their websites or find out their location all available in the Garage Details page.

ADDING A CAR

To order any of the services via the App, the user needs to have a car specified. They can do that using a four step wizard where they specify the Brand, Model and Type of the car as well as have the option to add a couple of images of the beast.

USER PROFILE AND CAR LOGS

In order to get a nice overview of what activity the user has had, a couple of numbers are displayed in the User Profile along with the name and email of the person.

Just underneath the user details, the cars of the user are listed (with the option to add a new one). Taping on one of the cars in the list leads the user to the Car Logs view. Logs means any sort of note regarding the car - changed oil, kilometer reading, noticed a weird sound in the engine, put on some new sweet rims on it, whatever. You could consider it as a diary of the car.

Twist 2: There are two ways of adding a Car Log - either the user adds it or, in the case of a service being done in the garage specified on the app, it gets added automatically by the garage. A diary that writes itself - wonderful!

GARAGE SERVICE ICONS

To help with distinguishing the different services available on the App I went ahead and drew up a set of icons for the different services just to help the users distinguish between the variety of options available.

And that is that. This was a great concept to work on, looking forward to doing more.

The End.

NOTE: Not all details and aspects of the Mobilitet App concept are presented in this article. For more details, contact the author (me).