top of page


Designing a mobile browser site for a premium online grocer.


Solo project


4 weeks (Jul 2022)






Improved SUS score by 152%

Navigation was more intuitive

Interface was much cleaner

iphone new 2.png

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.

Current site full 1.png
Current site listing 1.png

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.


Competitive Analysis

I identified 3 other grocery stores with online presence, studied their pros/cons and created a features inventory checklist.

CA 02c.png

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


(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


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


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


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.


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.


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


I am drawn to products that are on sale.


I want to know the brand of the product in deciding whether or not to purchase something.


I try to meet the criteria for free delivery whenever I can.

User dislikes
Interface 01.png

Users found it difficult to navigate the wordy, clunky and inconsistent interface.

Missing 02.png

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.


With my findings, I created 2 user personas with corresponding problem statements.

Penny 02.png

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.


  • 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.


  • 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.

Richmond 02.png


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?



Make discount information stand out more.


Simplify the payment method and remove unnecessary steps (see user flow below)


Remove wall text and hide information that are second order for users.


Align and simplify the UI and improve visual design.

Flow 02.png
Improved Payment User Flow


I build the first iteration of wireframes over the course of 3 days, keeping in mind the solutions that I had synthesised.

Wireframe 01.png
Wireframe 02a.png
  • 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
Wireframe 03.png
  • 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
Wireframe 05.png
Checkout and Pay
Wireframe 04.png

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.

Checkout and Pay


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

Interview 03.png


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.


Virtual (Zoom)

Target Group

The participants from the initial user interviews

No. of Users



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.

Like 03.png
User likes


Intuitive and clear navigation


Sales products are shown near the beginning of the homepage


Important information are displayed prominently

Dislike 03-01.png
User dislikes


Font size for product description is too small.


Feedback for ”add to cart” is not obvious.


No option to redeem reward points in cart or checkout page.


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.

Like what you see?
Let's chat.

bottom of page