Online Grocery Ordering App & Website Revamp
Timeline
July - Aug 2021
Platform
Application & Website
My Role
UIUX Designer
Tools
Figma​
Introduction
Fairprice is a platform where people can order their groceries online.
In this project, we revamped the user experience and redesigned the UI.
User Research
Interviews
To better understand the different user's needs and what they struggle with, we conducted interviews with several users.
General Questions
-
Do you currently or have you bought groceries online (before)?
-
What platform do you use to purchase your items?
-
How often do you buy groceries?
Behaviours
-
Do you have a shopping list that you follow?
-
How do you come up with your shopping list?
-
What do you usually buy?
-
How often do you buy groceries?
Experience Questions
-
What did you enjoy/disliked about the experience?
-
How was your last purchase experience?
-
Is there anything that frustrated you in this process?
-
What do you think can be improved in the Fairprice website?
I-Statements
After the interviews, we came up with I-statements to point out the problems, needs and what frustrates the users.
I find that
-
The Fairprice website is difficult to navigate
-
The categories are too specific.
-
I cannot choose variants of the same product under the same brand.
-
I prefer shopping in person than shopping online.
-
The website does not give a full shopping experience in person.
-
Buying things online is more convenient as it is being delivered to my doorstep.
Problem
Here are the main problems from users when using Fairprice.
Difficult To Navigate
Example
The platform is messy and disorganized. The user cannot see the main categories right away and It causes a hassle for them to go back to the main menu constantly.
Unable to choose variants of the same products under the same brand
Example
Users have to search for the other flavors of the same product on a different page which makes it troublesome.
Specific Categories
Example
The categories are very specific (eg. there is a category for snacks and a separate category for cookies/ biscuits) this makes it time-consuming to look through all these categories.
No full experience of shopping in person
Example
The user feels that when shopping online doesn't give the full experience when in person, when walking around the store you can see items that were not planned purchases, but needed. But online that is not possible.
Why do they stay?
More Convenient
Buying online is more convenient as it is being delivered to my doorstep
-
Do not have to physically carry their groceries
-
Saves time
Variety Offers
I like the different variety that NTUC offers for me.
-
Can purchase all their needs from one platform
Regular Customer
I am frequent customer of NTUC
-
Has become a habit to purchase things from there
Personas
To better target Fairprice users, this is the persona we created after the user research and interviews.
User Story
I want to buy my favorite snacks as quickly as possible with the least amount of hassle.
I go online to buy them as it is more convenient and efficient.
Prototype
Usability Testing
We tested our prototype with some the users to identify the problems and the areas of improvement, so we came up with a task to test it with the users.
You are gaming and you get hungry so you decide to go onto the Fairprice website/app to get your favorite sour cream and hot & spicy lays chips.
Final Design
Main Features
Here are the main features that we decided to add to improve the Fairprice app and website.
Before
After
Explore
Added an explore page for users to browse products they may like based on past purchases.​
-
Easier for users to find products they may like based on past purchases
-
Keep customers hooked on shopping for more things as it caters to what they like
Wider range of products shown
The shelf layout gives a real-life shopping experience, a better comparison of products, and less scrolling required.
-
Able to view more variety of products at a glance
-
Give a more real-life shopping experience by imitating real-life shelves in stores
-
Saves time and effort on scrolling to view the products
-
Easy to compare products at one glance
Range of flavours to choose from
Saves the users time by not having to go search for the other flavors.
-
View other flavors of the product on the same page
-
Select different flavors of the product