Jane App

2022

TimelineJan 2022 - Jun 2022 (5 months)

TeamDaniel Obiekwe, Simon Joseph (Developer)

RolesUX Design, User Research, Prototyping

TimelineJan 2022 - Jun 2022 (5 months)

TeamDaniel Obiekwe, Simon Joseph (Developer)

RolesUX Design, User Research, Prototyping

Project Overview

JANE is the mobile store for local shops and stores near you. The goal of this project is to bring together local stores near users under one platform and make them accessible anywhere. JANE app handles orders, checkouts, and delivery for local store products to its customers.

Whats the problem are we trying to solve here?

One problem most users that need to purchase goods from their favorite local stores is that most of them don’t have an online presence. Users sometimes have to deal with transporting themselves to the store location only to find out the product is no longer available or the store is not open at the moment. This can be frustration for customer and also business (store) owners

Design Process

The first step of my design process involved user interviews and competitive research to understand how competitors and users behave. I believe it’s important to get this information early on in the process, before having an idea or prototyping. ‍
‍
After analysing this insights, I began to conceptualize the solution, focusing on user flows, sketches and wireframes to give me a way to iterate faster through ideas. From this, I went to the visual design, conceptualizing the user interface while considering design principles such as contrast, hierarchy and feedback, brand attributes and user interactions as it will be in the final product. ‍
‍
Once the interface was ready, I took feedback from other project stakeholders in order to understand the experience gaps. User validation, although part of my usual design process, would be a post-conceptualization and won’t be discussed in depth in this case.

Defining the Challenge

I conducted user research and interviews to understand the users I’m designing for and their needs. I identified through my results, following challenges that needed to be addressed.

Availability
Users want to be able to know if the product the want is available in their local store and if the prices meet their budget
Transportation
The pain of transporting themselves to the stores and back can be tedious and highly costly to users, while the stores make not gain from this challenge
Payment
Payment of the products need to be seamless and account for cash and cashless transactions

Research & Analysis

Competitive Analysis

I started the project by analyzing the competitors’ weaknesses so that I could define those problems as a starting point. This helped to discover additional features which could improve the overall experience of the solution to end users.

User Research Summary

After compiling the competitive analysis and extensive research through user stories and user journeys on personas, defining problem statements, documenting and analyzing key pinpoints and insights gotten from user interviews; below are the summary key points to focus design on.

Key Pain Points

I need to be able to compare products from different stores near me
Transportation is often tedious when going to stores, can my orders be delivered to me instead
Can I see the prices of the products so I know how much to budget when I am purchasing them
I need to be able to make payments with my card or with cash, which ever is available

Key Insights

01

Users want a way to compare product prices from different stores before making a purchase
02

Users need to be able to make payment in the app or when the delivery is made
03

Users need to have product delivery as a feature as well to minimize cost of transportation

The Design Goal

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research, with the following chart

App User

Improve easy store experience

Payment options
Delivery options

Product

Ideating a Solution

Application Flows

The overall user flow is separated into 4 stages: user login flow, adding product to cart and checkout, monitoring order delivery and completion status.

For the main features, I used the UX flow of numerous online stores as a reference.

Developing Sketches

After talking to internal experts in the area, we got a better understanding of how to understand the user insights. From this, we continued ideation and developed some sketches to more concrete concepts.

Wireframing

Wireframes were made to start developing the look of the application and defining the sizes, margins and overall style. The wireframes also helped to define which version of certain screens were preferred.

The Design Solution

Visual UI Design

Design System — Foundations & Components

As there was no visual identity of the project yet, I started from scratch. Based on several brand keywords form the client, I developed a style guide that can be used to align all visual elements of the project.

Typography, colors and styles are the visual building blocks used in the application.