E-commerce site for a frozen food grocery store
This project addresses the challenges a local neighbourhood frozen grocery store faces as it digitalises to adapt to the changes in shoppers' behaviour post-Covid-19.
This project was developed as a case study based on Yun 628, a frozen food grocery business (located in Ang Mo Kio neighbourhood) built on outstanding customer service, reasonable pricing and a wide variety of affordable handpicked frozen goods from all over the world.
The Outcome
A grocery shopping platform for both inspiration and mission driven shoppers.
Scope
Website design
Duration
4 weeks
Tools
Figma, Illustrator & Photoshop
The Approach
Empathise - Define - Ideate - Prototype - Test
User Research
Research revealed shoppers' fragmented shopper journey and loss of personal touch when shopping online
Pain points
-
Fragmented user journey on multiple platforms (see image on right)
-
Loss of personal touch: Shoppers value personalised taste recommendations from the store owner. This requires more effort to upkeep on a digital platform than in-person.
Research Synthesis
Why purchase frozen foods?
Frozen food products help users meet their dietary needs while managing their busy schedules
Research Synthesis
Yun 628's shopper demographics
Based on research on Yun's Facebook page, 87.5% of shoppers are women between 25 and 59. Of this, 52% are middle-aged women living in nuclear households consisting of children. With this information, I narrowed down my target audience to women between 25 - 59.
Contextual Inquiry & User Interviews
Understanding shoppers' goals, motivations and behaviours
My Hypothesis
The goals of shoppers differ based on life stage - while childless women shop for themselves, mothers shop for their families.
Interview Goals
-
To understand the goals of shoppers in different life stages; their motivations & behaviours while purchasing frozen food.
-
Comparing the experience of shopping online and in person, what are the gaps to bridge?
Contextual Inquiry Goals
-
To discover the challenges faced when purchasing frozen food on e-commerce platforms
Common Motivations & Frustrations
What inspires and deters shoppers from adding to cart?
Top Motivation
New and exciting products, easy preparation and promotions
Despite having little time to prepare, shoppers desire delicious and exciting meals - these are usually international cuisines in Singapore context.
Top Motivation
White-glove service: handpicked products and personalised recommendations
3 out of 3 interviewees like the human touch of local neighbourhood sellers. Examples: "If you like a strong coconut taste in curry, try this brand." and "My grandson always requests these fish fingers, it might interest your children too!"
Top Frustration
Taste is subjective; Online ratings and reviews are not reliable
One shopper shared an experience of how a pasta she purchased drastically missed expectations set by reviewers, resulting in her losing trust in online reviews.
Research Insights
Shoppers begin their journey with an inspiration
Behaviours
Shoppers want to be surprised and delighted with new products
2 out of 3 shops casually through physical & e-commerce stores hoping to find new food products.
Behaviours
For meal ideas, shoppers watch cooking edutainment.
3 of 3 shoppers visit food blogs (IG, TikTok, Youtube, Facebook), Youtube cooking channels and grocery sellers' live-stream videos. They want to learn about preparation tips, ways to serve, how to pair items, and recipes to elevate tastes).
Behaviours
Uninspired shoppers take a longer time to shop
Without a clear picture of the meals in mind, shoppers shift their focus to look out for interesting food products by scrolling through product listings.
Interview snippets
I was excited to try a highly rated frozen truffle pasta... till I discovered that the truffle taste was not distinct. From that experience, I learnt to buy products with zero bad reviews.
Interviewee A
GIF on the right shows varied reviews for frozen truffle pasta
Conducting an Open Card Sort with 3 interviewees
Understanding how shoppers categorize frozen food products
Insights
As there were huge variations in the categories, I decided to lean on Yun 628's existing categories (top 2 rows) for the initial design.
The only consistency in the results was that 2 of 3 interviewees categorises products by eating occasions, ease of preparation and cuisines. These can inform the design of filters to help shoppers with these nuances.
Personas
Based on user insights, crafted primary and secondary personas
Both personas share common needs when purchasing frozen food online.
Problem Statement
Yun 628 needs a way to
Help shoppers discover new products, promos and cuisines
Help shoppers understand how each product meets their taste preferences
Continually educate and interest shoppers with new ways to enjoy a product
so that they can better manage shoppers' experience on a consolidated platform and encourage adding to cart.
Design Goals
How might we...
connect meal inspirations to food products (and vice versa)?
design a taste guide that shoppers can use to personally assess the product's suitability?
Competitive & Comparative Analyses
Best practices for e-commerce sites and features that improve the shopping journey
Competitive Analysis: Shopee Supermarket, FairPrice, Redmart
Selected based on user interviews - users mentioned these sites as their most frequent destination for a grocery haul.
Comparative Analysis: Shein, HipVan, Pinterest, Trader Joe's
Assessing product's suitability - Shein & HipVan
Inspiration-driven navigation methods - Pinterest & Trader Joe's
HipVan
Trader Joe's
Shein
HipVan
Ideation
Designing features
Shoppers valued their local seller's honesty & recommendations when shopping in person. Hence I integrated the element of human touch through chatbots & helplines and integrated store owner's personality through branding.
“Aunty share with you how to enjoy this.”
“My grandson loves this, so will yours”
Feedback by taste and satisfaction of product, providing options, i.e. “Here’s a less spicy option you may like”
Inspire shoppers to pair food in different ways
Building into shoppers' flow
Ideate
Rethinking the user journey for inspiration-driven shoppers
Help uninspired shoppers shift from "What do I buy?" to "What do I want to eat?" The former question helps increase the basket size as there are more opportunities to sell related products.
It also helps shortens the path to purchase by helping uninspired shoppers get a clearer idea of their meal outcomes.
By leading the shopper journey with inspiration, I seek to create a more effective shopper journey.
Wireframes
Designing the landing page for all shopper types
Shoppers think...
-
Inspiration-driven - "What should I eat?"
-
Promo-driven - "What are items on promo?"
-
Mission-driven - "Where do I find x?)
To inspire inspiration-driven shoppers
-
Using impactful meal images, invite them to check out new recipes, and seasonal & promotional items.
For the rest (mission- and promo-driven shoppers)
-
Primary navigation takes them directly to Promotion and Shop All
Wireframes
Designing product and recipe pages to engage shoppers
Personas want
-
Preparation tips: serving suggestions, pairings, recipes
To engage shoppers,
-
Using Yun 628's existing Facebook Livestream content on the Recipe page
-
Introduce "Ways to prepare this product" cross-sell related products
-
Switch packaging images to meal images
Wireframes
Designing to encourage shoppers to add to cart
Shoppers' final considerations?
-
Product info: serving size and pack size, origins
-
If taste meets preferences
-
Reviews
-
Alternatives
How to encourage Select
-
Include required product info
-
Introduce a chatbot feature to help users assess product tastes and alternatives, recipe suggestions
Wireflow
From Landing Page to Add to Cart
Usabulity Testing
Understanding the site's feasibility, desirability and usability
Interviewees & Criteria
3 users of ages 29, 30 and 58, are digitally savvy and have purchased frozen groceries online in the last 2 weeks.
Goals
-
To gather qualitative feedback on the global & local navigation, and the integration of the search system & labelling put in place to help users find what they need.
-
Reveal friction points & confusing experiences when using Taste Meter.
-
To gather qualitative feedback on the desirability of the meal discovery concept.
Task 1
Explore the site for inspiration to prepare an unagi dish. Select the unagi product that you are most likely to purchase.
Task 2
Using the taste meter, find out if your selected item meets your preference for less salt.
Iteration
Iteration based on Usability Test Insights
Clarity
Global Navigation
Observation and Analysis
-
Unsure of what "Explore" meant
Solution
-
Change "Explore" to "Shop by Recipes"
-
Arrange icons horizontally, so that shoppers do not have to relearn.
Before
Revisiting the design with a fresh mind, I noticed that cultural propriety was jarring in the earlier prototype - a large portion of the site did not adhere to website designs that shoppers are attuned to. Examples of unusual designs were the global navigation bar layout and the lack of touchpoints to help mission-driven shoppers shop quickly. Hence, I revised the site as seen below.
Clickable Prototype
Iteration
Post Project Reflections
Project Takeaways
Open card sort not helpful
Each user categorised food items very differently, such as looking at prep methods and eating occasion.
Should have conducted closed card sorting for more reliable data. However, open card sort
helped reveal various mental constructs which helped in creating filters and sorts.
Cultural propriety
Although the original landing page layout did not receive negative feedback from users, it has little adherence to cultural propriety and might distract shoppers from their tasks.
I redesigned the site for closer integration with regular e-commerce website structures.
Card sorting 80+ images led to tired interviewees
I spotted signs around the 20th image, and felt sorry about putting them through that.
On average, each user created 6 to 12 categories, with 3 - 12 items per category. Mental note:
• Conduct a trial run to ensure that the testing duration is manageable.
• Reduce the number of cards such that each category potentially has 3-5 items.
Overestimated what I could produce within time period
I proposed a change in flow and features to support inspiration-driven shoppers which required time to explore in execution. This required a lot of time to produce.
Focus on meeting the brief, before delegating time for exploration. Or, prioritise the features which are most important to the users. In this case, it was the inspiration-driven flow.