Jane App

2022

Timeline  Jan 2022 - Jun 2022 (5 months)

Team  Daniel Obiekwe, Simon Joseph (Developer)

Role  UX Design, User Research, Prototyping

Timeline  Jan 2022 - Jun 2022 (5 months)

Team  Daniel Obiekwe, Simon Joseph (Developer)

Role  UX 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.

persona detailspersona details

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.

Competitive Analysis on Jane App

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.

Flow for Project — Jane App
Flow for Project — Jane App
Flow for Project — Jane App
Flow for Project — Jane App

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.

Sketches for Project — Jane App
Sketches for Project — Jane App
Sketches for Project — Jane App
Sketches for Project — Jane App

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.

Wireframe for Project — Jane App
Wireframe for Project — Jane App
Wireframe for Project — Jane App
Wireframe for Project — Jane App

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.

Visual Design for Project — Jane App
Visual Design for Project — Jane App
Visual Design for Project — Jane App

Key Features

The overall key features of the application which are the search and filter by product and by stores, the order, checkout and delivery

01
Search and Filter by Products and Stores

Users have the option of choosing the best products for them by filtering with their prefer stores, prices, and other metrics

Search and Filter by Products and Stores
Choose preferred payment option
02
Choose preferred payment option

Users can also choose the payment options they prefer. Cash or credit/debit card payment.

03
Online Delivery and Order Tracking

Once an order is placed, users can track the delivery of the order in the order details

Online Delivery and Order Tracking

UI Designs —

Splash Screen
Splash Screen
Onboarding Slider
Onboarding Slider
Sign In Screen
Sign In Screen
Password Reset
Password Reset
Landing Screen
Landing Screen
Store Profile
Store Profile
Search UI
Search UI
Search Result
Search Result
Empty Search Result
Empty Search Result
Search Filters
Search Filters
Product Details
Product Details
Product Review
Product Review
Cart Screen
Cart Screen
Empty Cart Screen
Empty Cart Screen
Checkout Screen
Checkout Screen
Order Confirmation
Order Confirmation
Side Drawer
Side Drawer
Order List
Order List
Order Details
Order Details
Address Book
Address Book
Edit Address
Edit Address
Address Picker (Map)
Address Picker (Map)

Conclusion

Learnings & Impact

    Next steps