LOMAT -  User's POV

Get On The Road

Background
Market Research
Competitive Analysis
User Survey
Personas
Wireframes
Flow Diagram
Low-Fidelity Wireframes
High-Fidelity UI
Prototype
Mini Usability Study

Where

Nashville, TN USA

What

Mobile App

Why

New  Mobile App

Role

UX/UI Designer, Visual Designer, Researcher

Category

Delivery, Maps and Navigation

When

September 2021 - December 2021

Background

LOMAT is an on-demand delivery platform which enables individuals or businesses to access a wide range of delivery vehicles operated by professional drivers for an on-the-go delivery job with just a tap of a button.

Market Research

Courier and parcel businesses has been having an increase in  revenues in the last 5 years with the highest boost by mailing services during pandemic with a predicted market increase of 573 million by 2029.

Source: www.reanin.com

Competitive Analysis

I analyzed 2 mobile apps with nearly similar concept. I was looking both at the delivery experience, ideas  and the negative user comments from the app store to find similar patterns that would guide me in the design.

Mobile App 1

Mobile App 2

The Good

All apps allow users to search for a driver by adding a starting point and an end point.

The Bad

There is no way to cancel a driver search when awaiting for a driver (App 1) and there are inconsistent realtime tracking information (App 1, App 2)
There's no cancel button even the order is still awaiting for a driver.
- Jimmy
Location pins in app is not accurate with location selected.
- Sandra
Real time location of the driver does not update that quick.
- Darwin

User Survey

The team and I along with the client's help conducted a quick survey with different potential users with different background. Each survey was conducted by messaging the users personally.

Above survey were conducted by messaging selected users personally.

Personas

I created a 2 personas based on the possible types of users of the app. A business owner and a regular individual looking for an on-demand delivery.

Time to start designing!

Once I had my initial research data done, it was time to create the app's user flow and the low-fidelity wireframes.

Flow Diagram

To understand the mobile app's main functionality I created a simple user flow diagram which represents how each users go through the main task. One of the flows is shown below.

Low-Fidelity Wireframes

Once I had finalized the flow diagram, I started creating the low-fidelity wireframe. Here are some of the few digital low-fidelity screens for the main user flow below.

High-Fidelity UI

Once I had the flow diagram and low-fidelity wireframes established, It was time to make the actual mobile UI design. I started by defining the basic visual specifications - fonts, colors, the look and feel. Some of the information were gathered from the client's preferences and vision along the process.

Color Palette

Primary, secondary, tertiary, background

Font

Poppins - Medium, SemiBold, Bold

Look and feel

The style of the design was established by combining modern and soft UI elements with flat visual assets defining some of the app's functions.

34 high-fidelity designs were created

This would include 2 different card designs for vehicle selection screen (horizontal and vertical) which will be used for A/B testing along the design stages.

I also tested a simple white background for a minimal look and a layer of light background blur for some of the main functional screens - specifically for the driver search process to compare which of the two looks better for the overall look and feel.

Alignments and Grid

To be consistent with alignments, I chose an 8-point grid for the whole project with components/groups having 8 and 16 while margins between components/groups of 24 and 32 or above depending on type of content.

High-Fidelity Prototype

I connected some high-fidelity designs into a clickable prototype. This will allow me to test the app for the first group of users for a specific scenario. The scenario below  focuses on the process of choosing a vehicle type.

The prototype for this specific scenario can be previewed here.

Prototype Validation

I validated this simple prototype with 4 different users. I wanted to make sure that each of the users know that they can check more information by tapping a dedicated link.

This were done by scheduling a call through google meet. The call was done with introduction of the app idea, the purpose of the test scenario and some questions dedicated to the vehicle selection process.

Results

1 out of 4 users (25%) was not able detect that a provided link was added to know more about the vehicle. This means this scenario has a success rate of 75%.

Screen Update

With the given result, I've updated the screen to have a more straightforward concept. Instead of having users tap "More info" to get more information, I added those information within each vehicle space itself. No updated prototype were provided due to time constraints.

Project Summary

During the whole project, I was able to do some basic market evaluation, quick user surveys (assisted by friends and colleagues), competitive analysis, user flows, created low fidelity wireframes and built high-fidelity UI with prototypes.