FreshPlus

The improved online grocery experience

This UX Case Study covers a hypothetical project done in General Assembly’s UXDI course.


Overview

In the given project scenario, the client had an existing website of grocery e-commerce, however they faced the issue of low-purchase rate despite high traffic volume. I was tasked to enhance the e-commerce website for improved customer experience, showcasing their products while maintaining their small shop’ appeal and great customer service.

MY ROLE

UX Researcher

UI Designer

TOOL USED

Figma

Mural

Axure

Optimal Workshop

DURATION

2 Weeks


 

The Design Process

 

User Research

User Interviews

I interviewed 8 participants with online grocery shopping experience to understand their online grocery experience and to discover their needs and pain points.

User Research Synthesis

I did affinity mapping with my user interview results and discovered that there are two distinct trends in needs and frustrations among 2 different types of shoppers, Frequent Shoppers and Ad-Hoc Shoppers.

 

Problem Definition

To further empathise with shoppers getting their groceries online, 2 user personas were created to represent shoppers with varying goals, needs and frustrations.

 

User Personas

 

Lauren is a frequent e-commerce shopper who gets her standard household essentials online on a regular basis for her family.

Jessica is a ad-hoc e-commerce shopper who occasionally shops online to satisfy her cravings.

Problem Statements

I came up with problem statements to better articulate my personas’ needs.

Lauren

needs a way to order her regular household essentials from her past purchases in order to reduce the time and effort needed.

Jessica

needs a way to keep track of her purchase amount in order to qualify for free delivery.

 

How-Might-We (HMW)

I developed 2 HMWs corresponding to my problem statements as seeds of my ideation.

HMW

enable a more efficient purchase experience for recurring purchases.

HMW

provide better indication and tracking of minimum spending.

Competitors Evaluation

I conducted a competitive analysis with the top 5 grocery e-commerce websites in Singapore to identify the common features so as to determine the baseline features for my website as well as to source for potential features that will be useful for my design.

FFeature Inventory

Feature Prioritisation

On top of the initial list of requirements given by the client, I added features that will address my personas’ pain points and needs based on insights gathered from user research and competitive analysis. Features were prioritised based on business impact and value using the MoSCoW method.

For release 1 of the project, I have worked on the features highlighted in green and brown.

MMoSCoW Prioritisation

 

Information Architecture

As an e-commerce website, I was given a large product list of 40 groceries items.

A question arose in my head:

“How can I congregate these groceries items so that they are easy to access and understand by my users?”

Categorising the products

I ran an open card sort with 8 users to get a general idea on how users interpret and categorise the groceries items.

DDendrogram

SSimilarity Matrix

Based on the dendrogram and similarity matrix of the card sorting results, 10 main categories were identified.

Using these 10 main categories as a baseline and referencing my competitors’ categories, I reorganised the categories into 6 main categories and 12 subcategories

Validating the categories

I conducted a tree testing with 7 users to validate the new sets of main categories and subcategories.

The tree testing results was very positive with a high percentage of correct destinations and task success rate of 98%.

 
 

With the product categories defined, I created the site map for the FreshPlus website.

FFreshPlus Site Map

 

Competitors’ Design Analysis

I applied the pluses and delta methodology to analyse the good and bad design pattern of the top 3 competitors’ design to determine the best design pattern for my design. The analysis focus was on Product Discovery and Checkout process, which are the two major and critical actions in the e-commerce for successful conversion.

PProduct Discovery

PProduct Discovery

CCheckout

CCheckout

 

Wireframes

With the identified good design patterns, I established the baseline of my design using Axure.

 

Solutions to the problems

1. Shoppers need a way to order from their past purchases

I incorporated a past purchases inventory on the home page of FreshPlus. Users are able to view their past purchases items easily and add items to cart upon logging in.

PPast Purchases Inventory

 

2. Shoppers need a way to keep track of their purchase amount to get free delivery

I introduced a minimum purchase tracker that tracks the minimum purchase amount for free delivery.

MMinimum Spending Tracker

MMinimum Spending Tracker

 

Usability Test

I conducted 2 rounds of usability tests with 7 users for each round to evaluate my solutions and identify usability issues with the prototype. 

The usability test participants took on Lauren and Jessica’s persona after I gave them the contextual scenario. They were briefed for each task and they interacted with the prototype and attempted to complete the given tasks.

I used the pluses and delta method to synthesize the usability test findings and incorporated the findings into my design improvements.

 

Design Improvements

Two major feedbacks and design improvements are summarised as follows.

1. Participants had trouble locating their past purchase items

 

2. Participants were not aware that an item is added to the cart

 
 
 

Meet the New & Afresh FreshPlus

 

What’s Next

With every project, there’s always room for improvement. Given more time, I would love to conduct more usability tests to validate my iterated design.

As mobile commerce is on the rise, in my next step I would like to work on the mobile app design for FreshPlus as well as to introduce a loyalty programme to retain existing customers and increase customer lifetime value.

Reflections

My takeaway for this project is that information architecture is critical for e-commerce websites. For categorisation of large product list, open card sort might not be the best way to do it as users may have multiple interpretations. Instead, a hybrid or closed card sort will be a better option for categorisation. One should always supplement the categorisation process with tree testing to validate the card sorting results.

Don´t be afraid to fail. Be afraid not to try.

- Michael Jordan


Previous
Previous

PropertyGuru Redesign

Next
Next

Cooking Buddy - Recipe Mobile App