STRAITS MARKET
Designing a mobile browser site for a premium online grocer.
TEAM
Solo project
TIME
4 weeks (Jul 2022)
TOOLS
Figma
Figjam
Miro
RESULTS
Improved SUS score by 152%
Navigation was more intuitive
Interface was much cleaner
About the project
2 months into my UX course, I was tasked to redesign an e-commerce website. I revelled in the challenge of scoping a UX project from start to end and creating a hi-fi prototype on Figma for the first time.
Why Straits Market
Straits Market is a premium online grocer that offer top quality produce which adheres to ethical, transparent and sustainable farming. With changes in consumer habits due to COVID-19, and a shift towards sustainability, Straits Market's value proposition is uniquely placed to meet emerging user needs.
The problem
The most glaring problem of the Straits Market website was its confusing and cluttered homepage and counter-intuitive UI for the product listing and details pages. There were also significant visual design problems, such as misalignment of the different components of the pages.
I knew I would have to declutter the homepage and reorganise the information hierarchy, and streamline the design and UI so that it's more pleasing and intuitive for users.
Discover
Competitive Analysis
I identified 3 other grocery stores with online presence, studied their pros/cons and created a features inventory checklist.
The pros/cons analysis gave me an idea of what the competitors have done well and not-so-well that I might consider for my redesign. In taking stock of the features, it is clear that Straits Market is lacking in many common ones. These must be considered together with actual user needs.
User Interview and Usability Test
Goal
(Interview) To discover user’s grocery shopping habits and preferences
(Usability test) To discover user’s likes, dislikes and pain points in using the current site
Format
Virtual (Zoom)
Target Group
People between the ages of 25 and 50 who shops for groceries online at least once a month
No. of Users
5
Key Questions
-
Think about the last time you bought groceries online. Describe what you did and your thought process.
-
Do you usually have a shopping list? If so, how do you come up with it?
-
Do you buy products outside of your shopping list? Why / Why not?
-
When there are multiple listings of the same product, how do you choose? (e.g. price, brand, review etc.)
-
How do you decide on which online grocery store to buy from?
-
What do you like / dislike about purchasing products from your preferred online grocery store?
Usability Test Tasks
01
You've heard of this online grocer called Straits Market that sells fresh, organic and high quality produce. You are curious and want to see what kind of produce they have, and whether you wish to purchase them. Please show me how you would do so.
02
You have been really busy recently and haven’t had time to go down to the grocery store. You are hoping to buy some fresh produce from Straits Market to make a healthy meal for you and your family tomorrow. Please show me how you would do so.
Findings
The most surprising finding was that all users shopped for groceries exclusively on mobile. So I decided to focus on the mobile browser site instead of the desktop.
The results also validated the problems I've previously identified, and the users rated the System Usability Scale (SUS) score at 35/100.
I did affinity mapping for the qualitative findings and drew a few key insights:
"I" statements
01
I am drawn to products that are on sale.
02
I want to know the brand of the product in deciding whether or not to purchase something.
03
I try to meet the criteria for free delivery whenever I can.
User dislikes
Users found it difficult to navigate the wordy, clunky and inconsistent interface.
Important information that users look out for are hidden and easily missed.
Some features that users need, e.g. “add to favourites” and sort, don't exist.
Payment method is cumbersome and confusing.
Define
With my findings, I created 2 user personas with corresponding problem statements.
Penny Tan
28, public servant
Penny buys groceries online for herself and her parents. She likes to browse artisan products that cannot be found at their neighbourhood supermarkets. Hoping to save money for a house, Penny is always on the look out for discounts and deals.
I love it when I find quality product on deep discounts!
Needs and Goals
-
An easy way to browse and discover products that she might be interested in.
-
Wants value for money or ways to save money when she can.
Frustrations
-
Free delivery information is missing at checkout page.
-
Promotion and reward details are confusing and missing on many pages.
-
Finds products categories confusing and inconsistent.
Problem Statement
Penny needs an easy way to browse products and promotions because she wants to purchase products she likes at the best possible deal.
Richmond Goh
46, Lawyer
Richmond keeps a very demanding work and life schedule, and he sees grocery shopping as a time-consuming chore. As a result, he is willing to pay more for convenience and turns to online grocery delivery to save time. He usually has a clear shopping list and he focuses on just buying what he needs.
I want grocery shopping to be quick and fuss-free.
Needs and Goals
-
A quick and easy way to fulfil his errands so that he can devote more time to work and family.
-
Saved payment details so that he doesn’t have to input it in each time.
Frustrations
-
Hard to decipher important product details he needs due to text walls.
-
Site interface too cluttered with unnecessary information.
-
Finds products categories confusing and inconsistent.
Problem Statement
Richmond needs a quick and fuss-free way to purchase what he needs so that he can spend minimal time on grocery errands.
Develop
To address the problem statements of my 2 user personas, I had to redesign the site so that navigation is intuitive and fuss-free, and important information is easily within reach and visible for Penny and Richmond.
Problem Statements
Penny needs an easy way to browse products and promotions because she wants to purchase products she likes at the best possible deal.
How might we...
-
introduce Penny to more products she might like?
-
show Penny discounted products?
-
help Penny feel like she’s getting the best possible deal?
Richmond needs a quick and fuss-free way to purchase what he needs so that he can spend minimal time on grocery errands.
-
streamline the check-out process so that it’s quick and fuss-free for Richmond?
-
help Richmond get to the product he needs quicker?
Solution
01
Make discount information stand out more.
02
Simplify the payment method and remove unnecessary steps (see user flow below)
03
Remove wall text and hide information that are second order for users.
04
Align and simplify the UI and improve visual design.
Improved Payment User Flow
Wireframe
I build the first iteration of wireframes over the course of 3 days, keeping in mind the solutions that I had synthesised.
Homepage
-
Free delivery information displayed in top banner, with option to close
-
Intuitive "account" and "cart" icons
-
Easy access to products of interest (e.g. purchase history, items on sale)
-
Discounts clearly indicated and highlighted
-
Include features that users are looking for (e.g. sort, filter, add to favourites)
Product Detail
-
Prominently display information users are looking out for (e.g. brand, ratings and review, storage information)
-
Hide information that are second order for users (e.g. About Brand)
-
CTA button (Add to Cart) is frozen as user scrolls
-
Checkout information is saved for account members
-
Only available delivery slots are shown
-
Order number is displayed prominently
-
QR code provided for PayNow option, and users do not need to send an email proof of payment.
Product Listing
Checkout and Pay
Hi-fidelity prototype
I played around with my wireframes, and after I was satisfied, I added visuals, colours and interaction to complete my hi-fidelity prototype. This process took around 2 days, and I had a lot of fun exploring the Figma functions.
Homepage
Product
Checkout and Pay
Deliver
Now equipped with the hi-fidelity prototype, I reached out to the users I had interviewed to conduct a final usability test.
*User faces and names are blanked out due to confidentiality.
Usability Test with Hi-fi Prototype
Goal
To test if users are able to find and purchase groceries on the prototype site with ease and convenience.
Too discover users' likes and dislikes about the prototype site.
Format
Virtual (Zoom)
Target Group
The participants from the initial user interviews
No. of Users
4
Findings
The results show a marked improvement from the current Straits Market site. Users rated my prototype an SUS score of 88.3/100. That was a drastic 152% improvement. I pooled together their feedback and distilled it into 3 areas they liked, and 3 that they disliked. This would provide me with data on how to improve further, should I continue with the project.
User likes
01
Intuitive and clear navigation
02
Sales products are shown near the beginning of the homepage
03
Important information are displayed prominently
User dislikes
01
Font size for product description is too small.
02
Feedback for ”add to cart” is not obvious.
03
No option to redeem reward points in cart or checkout page.
Reflections
1. Don’t be afraid to go back and forth in the design process
During the course of this project, I often held myself back from collecting user feedback outside of user interviews or usability tests, because I wasn't sure if it would disrupt the UX design process or be inaccurate. Upon reflection, however, I was reminded of the iterative and agile nature of UX. My data and designs would have been constantly refined and sharpened through many iterations. Even having small, short interaction with users could be opportunities for insight data to be gleaned.
2. Imperfection is ok
I often felt that I didn't have enough time or data to design a product that can solve all of my users’ problems. I realised that people’s preferences, behaviours and needs are ever-changing, and the "one best solution that can meet all needs" does not exist. There is beauty in imperfection, and there is ALWAYS room for improvement and iteration. It’s a growth mindset I hope to cultivate more of as I grow as a UX designer.