Designing a Mobile App For Roban Stores

Project Overview

The product:
Roban stores app is a mobile app that is designed to provide home delivery services of various kind of food and clothing items to its users.
‍
Responsibilities:
Wireframing, prototyping, and conducting usability test.
The problem:
Some available online home delivery apps have cluttered designs, complicated billing information processes and hidden charges. Customers living in far areas need a means of ordering products from Roban Stores.
The goal:
Design a mobile app for Roban Stores to be user friendly by providing clear navigation, basic features of a home delivery app, and a smooth transaction process.
My role:
Visual designer, interaction designer
Project duration:
September 2023 to December 2023.

Starting The Design

Paper wireframes

While creating my paper wireframes in the define phase, I basically focused on the user's journey from the homepage, to the menu page where the user can select a product, to the transaction page, and then a page showing a successful transaction with a button leading the user back to the homepage.

Digital wireframes

digital wireframe

A digital wireframe of the welcome page and the login page.

A digital wireframe of the homepage and the Delivery address page.

A digital wireframe of the order summary page and the payment page.

An overview of the digital wireframe.
Click here to view low fidelity prototype

Usability study: parameters

Study type:

Unmoderated usability study

Location

Nigeria, remote.

Parameters:

5 participants

Length:

20-30 minutes

Usability study: parameters

Finding 1

Some buttons were bigger than the other.

Finding 2

Some buttons weren't interactive

Finding 3

There were limited options of items to buy or choose from.

Refining The Design

Usability study: parameters

Shapes and lines are now represented with real information after the usability studies.

In the mockup design, I added placeholder texts and icons in order for users to identify where to input their email and password which they will use to log into their accounts.

In the mockup design of the homepage, I added images and other necessary  icons like 'add to cart' and 'menu'.

An overview of the mockup design for Roban Stores Mobile App.
Click here to view to view high fidelity prototype.

Accessibility considerations

I added necessary interacitons to uninteractive buttons

In the menu page, I added a search bar where users can search for items they want to purchase

Going Forward

Takeaways

Impact:
Our target audience commented that the design displayed a clear visual hierarchy, was easier to navigate, and was more engaging with the graphics.

What I learned:
I learnt that a minor modification in design can yield a significant effect on the user's experience. For me, the most crucial lesson is to constantly keep the actual demands of the user in mind when developing design concepts and solutions.

Next steps

Conduct follow-up usability testing on the mobile app.

Discover any additional areas that require attention and brainstorm possible features.