FreshMart Grocery Store App

Fast delivery groceries ingredients with fresh and original products.

UX Research, UX Designer, UI Designer

Freshmart

Project Scope:
2 months

Project Type:
Google UX Design Project

Role:
UX Research, UX Designer, UI Designer

Tools:
Paper, Figma, Miro, Zoom

FreshMart Mobile App

FreshMart is an online application to meet the daily needs of users, comes with a ‘pick up order’ and ‘fast delivery’ feature in order to enable users to get fresh ingredients every day.

The Problem

Around my environment, I realize that there are problems occurring in our society since the COVID-19 pandemic has spread. I notice there are changes in behavior towards shopping for daily necessities, which is now turning online. They do the shopping by calling small grocery stores around their houses or familiar supermarkets trusted by their own families. Furthermore, many users who are busy working also have difficulty in shopping for their daily needs.

The Goal

To create an online grocery store application to fulfill daily needs with organic and original ingredients that is also fast in delivery.

Freshmart App

Empathize Phase

User Research

I conducted interviews with 5 people, to find out insight and explore the pain points felt by users. They are working mothers and several overseas students aged around 20-40 years. After interviewing the users, I made an ‘Affinity Mapping’ with a purpose to group similar insights.

Affinity Diagram
Problem Statement

Persona & User Journey Map

After I conducted interviews with 7 people and did the ‘Affinity Mapping’, I became more familiar with the behavior of the target audience of this application. Then I created 2 fictional personas and 1 user journey map in order to help me watch the steps users take to accomplish their goal, and also to help me to see the opportunity that I can do to improve a better and optimized user experience.

User Persona 1
User Persona 2
User Journey Map

Define & Ideate Phase

This is the Solution

After I received the main problems from the users based on the interview researches, I offer some solutions to answer their pain points.

Solution

User Flow

User Flow

Information Architecture

Information Architecture

Prototype Phase

Paper Wireframe Until Lofi Prototype

These are the initial sketches I started with paper wireframe to determine the overall layout at the beginning and start with the features that will be on the homepage and the category. Based on the same sketches from paper wireframe, I immediately created a complete digital wireframe based on user research, before entering usability testing, I ensured to checklist first all the information and goals that can overcome the user's pain points.

Sketsa Wireframe 1
Wireframe 2

Usability Testing

Usability Testing

I conducted Usability Testing on LOFI to observe the main user experience, order, finding and tracking, whether it is easier or not to complete and if errors occur, it can be iterated quickly with less effort. Usability Testing was tested out with 3 females and 2 males all aged between 20-50 years, using the moderated method carried out on Zoom with share screen mode from users for approximately 15-20 minutes. Here are key insights from Usability Testing.

Usability Testing

New Iterations After Usability Testing

Through the iteration process from Usability Testing, it allowed me to earn new insights that I had never thought of before and surely made this designed application even better.

Before

1

After

2

Provide track order after successful payment

Before

3

After

4

Add new method in checkout process

Before

5

After

6

Provide ‘points’ feature for users to exchange their points into discounts and promos (rewards)

 

7

Add Request Pick Up at checkout page

Visual Design

Style Giude and UI Kit

Style Giude and UI Kit

High Fidelity Design

High Fidelity Design 1

Onboarding Screen

Onboarding made to introduce the benefits of this application so that users will be interested in exploring this application; here the user can directly click "get started" to go to the sign up/login page.

High Fidelity Design 2

Sign Up/Login

After users pass the onboarding screen, they can easily sign up by entering their email address and password, or login via Gmail and Facebook.

Homepage

On this homepage, I created categories and search filters to make it easier for users while searching for products, equipped with an ongoing promotion banner. I included promos and rewards so that users can look at ongoing promos and exchange points for other discounts.

Homepage
Track Order

Track Order

Users can track their orders after ordering goods successfully, which could be from navigation orders. Within this feature, users can find out the location of the driver along with how long it takes for their products to arrive at the destination.

All Screens

onboarding4
onboarding5
onboarding6
login
signup
homepage2
search
categories
product_details
cart
checkout
checkout2
confirmation
orders
orders2
location
location2
profile

HIFI Prototype

Look at this interactive FreshMart Prototype using Figma.

Interactive Protototype

Final Reflection

Working on this case study requires good time management; I organize my own deadlines with the result that I will be more committed and insisted in completing it.

Validating user research, both in empathize and usability testing phases is very important when creating UX that comes up with complex problems. I could not have designed a product with a better solution without the help of the people who actually use it.

Wireframe and Usability Testing from LOFI design help me to save a lot of time and to avoid many mistakes during the process.