Designing a Local E-Commerce Bakery Website
At the heart of every community, fresh, homemade baked goods offer comfort and joy. Cleo's Delights helps bring that comfort and joy straight to your doorstep. Our goal is to provide a seamless online ordering experience for cakes, pastries, tarts, and kuehs, featuring key ingredients, allergen informations, and storage instructions.
Tools
Figma
Google Sheets
Zoom
Duration
3 weeks
.png)
Problem Statement
Customers are choosing to shop offline or from trusted sources due to a lack of ingredient listing. Many are hesitant to make online purchases because they are afraid to accidentally consume something that they can’t eat due to dietary restrictions and allergies. Their dietary fears and frustrations can lead to fewer potential customers, driving sales down over time.​​
or dive into the design process below
Understanding the Landscape
To design an intuitive and engaging bakery e-commerce experience, I first needed to understand the preferences, challenges, and expectations of pastry lovers. I analyzed three local bakeries--Pawa Bakery, Tiong Bahru Bakery, and Keong Saik Bakery--and took the role of a usability tester, navigating the websites as a first time customer. This allowed me to identify what worked, what didn't, and where there were opportunities for improvement.
Competitive Analysis
Key features evaluated included product filtering, delivery options, and customer engagement tools. Usability tests were conducted to assess the overall shopping experience, pinpointing pain points and best practices.
Understanding the Landscape
To delve deeper, I interviewed 10 participants about their purchasing habits and challenges when buying baked goods online.
Key Insights
-
Storage Information: 60% of users find proper storage details crucial but often unavailable online, prompting in-store purchases for direct guidance.
-
Sensory Experience: 50% prefer in-person shopping to see and smell products, ensuring freshness and quality.
-
Ingredient Transparency: 70% return to trusted sources confident in ingredient alignment with their dietary needs
These key insights were synthesized using affinity mapping.
Design Challenge
How might we provide a transparent product description to create a worry-free shopping experience for these customers?
Before diving head first into designing, I went onto Pinterest and found a few layouts and other elemental inspirations for the looks of the website. The color scheme was chosen to bring a sense of comfort and familiarity as online users place their orders.
Eucalyptus
Coffee
Roasted Peach
Cream
Whole Wheat
Cart sorting was done to create the information architecture of the products.
Tarts
Citrus Earl Grey Tart
Durian Cheese Tart
Egg Tart
Kuehs
Ang Ku Kueh
Kueh Ambon
Kueh Dadar
Kueh Kosui
Original Kueh Lapis
Prune Kueh Lapis
Pastries
Apple Kouign Amann
Canele
Chocolate Eclair
Green Tea Almond Croissant
Cakes
Ang Ku Kueh
Kueh Ambon
Kueh Dadar
Kueh Kosui
Original Kueh Lapis
Prune Kueh Lapis
The design also featured 8 common allergen icons, and their respective meaning, found throughout the website, key ingredients listed in bullet points under product descriptions, storage method written in each single product page, and high quality images featuring the products along with their respective product names.
What Worked, What Didn't
After completing the initial design and prototype, I conducted usability testing to gather fresh perspectives and ensure a smooth purchasing experience. Testers navigated the site as intended, helping me identify key flaws and refine the design. Based on their feedback, I made the following improvements:
01
Users assumed the add to bag button doesn’t work and did not see that the number of products starts at 0 by default.
​
To solve this issue, I decided to make the default as 1.
02
Users noticed that address does not include business hours, making it hard for them to know when they could swing by the store, or collect their pick up orders.
​
03
Some users also mentioned that directions to the store may be useful, especially for customers who may not be from around the are.
​
To combat both issues, the updated design includes store address, hours, directions, and a map of the area for easy locating.
Looking Ahead
After addressing key usability issues, I started looking at bigger opportunities for improvement. Moving forward, I aim to:
​
-
Develop a newsletter to foster a community for pastry and kueh lovers.
-
Optimize for mobile to ensure a seamless shopping experience on the go.