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
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
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”