“Mekanik”- A Mechanic Listing Website (A UI/UX Case study).

4 min readMay 24, 2021

“My Vehicle breaks down without notice
My personal mechanic is not available sometimes
I don’t know how to differentiate a good mechanic from a bad one
If I’m in an unknown location, like I have to leave my vehicle there and find my way to where I am heading, till my mechanic has time to go there to pick the vehicle up.” — Temilola

Introduction

A lot of people have vehicles and most often these vehicles breakdown, but its not just that it breaks down or develops fault but this happens sometimes when the individual is in an unknown/unfamiliar location.

A vehicle can break down at any point in time without giving prior notice. One could be going for an important meeting/work/event and the vehicle will develop fault. Sometimes one might not be able to get a mechanic on time or get a mechanic at all.

Solution

I came up with a solution to design a website with mobile responsiveness that allows both vehicle owners and mechanics to use the Website easily and without distractions. Users can easily search for mechanics around the region where their vehicle developed a fault and contact the nearest mechanic around that region.

This also allows mechanics to upload their services on the website and get people that will need their services.

Research Process

The Survey: I prepared a survey with google forms and distributed it to different people that own a vehicle. The purpose was to understand the challenges faced by people. Learning about their problems and challenges was a great way to be inspired. I used the information gotten from the survey to understand how to solve their problems. The result of the survey suggested there were several types of user. I created personas to further understand their needs.

Users Persona for Temilola, a Vehicle Owner and Sola, a Mechanic

Then I researched further and came up with my competitors’ analysis for my Direct and Indirect competitors.

User Flow

I went further to map out how the user moves through the website and was able to figure out each step the users would take when using the website. I went ahead and sketched out the User Flow on my Figma board. Below is the User flow for the website.

Wire Frame

I created a Low Fidelity design for the website. This allowed me to focus more on the functionality rather than what it looks like. I was able to test ideas without diving into details.

Mood Boards

To keep tabs on all my ideas and inspirations, I created a mood board on Figma, comprising of Images, Typography, Illustrations, Icons and other similar websites for inspirations.