Sweetest Moments
Online Cake Ordering and Customisation Experience Made Easy
Background
Sweetest Moments is a Singapore-based cake studio specializing in cake pre-orders and customizations.
With an extensive menu of sweet treats and a unique cake customisation service, Sweetest Moments faces the challenge of displaying numerous products while ensuring a smooth, uncluttered browsing and purchasing experience that doesn’t overwhelm customers with excessive product and promotion information.
Sweetest Moments needed an online portal that showcases their products in a visually engaging, organised manner, optimised for seamless discovery aligned with users' shopping behaviours.
My Role
UX Designer
User Research, Interaction, Visual design, Prototyping & testing
Project Duration
2 Weeks(June - July 2024)
Platform
Desktop
Challenge
I took on the challenge of redesigning Sweetest Moments' e-commerce website, aiming to showcase their products in a visually engaging, organized manner, optimized for seamless discovery aligned with users' shopping behaviors.
The primary goal of this redesign is to create a delightful, end-to-end online shopping experience that effectively presents products, ultimately boosting online sales for the store.
Disclaimer: This case study is based on my school project from General Assembly, and the design solutions I created from scratch were, indeed, never applied in real life. As an emerging designer, I acknowledge that my vision for this project may be somewhat ambitious and occasionally based on my own assumptions about business objectives. Therefore, this case study is intended as an exploratory learning experience focused on a business I find truly inspiring.
User Interview
To understand what are users' habits and behaviour when ordering cakes online and scrutinise their opinions on the current site, I conducted comprehensive research including user interviews.
Key Insights
Information on Product
Users want detailed product information, including images and descriptions, to visualise both the exterior look and interior content of the cake.
Progress Updates
Users prioritise reliable and secure delivery options, and want to be aware of the progress of the order, particularly during the delivery.
Keywords Search
Users prefer searching for cakes by flavour or key ingredient.
Review For Trust
Users want detailed product information, including images and descriptions, to visualise both the exterior and interior of the cake.
Less Off-Line Interaction
Users prefer communicating requirements through email or messaging app like WhatsApp as they are reluctant to have any further social interactions.
Usability Test
To pinpoint key issues impacting user experience on Sweetest Moments, I conducted usability tests with target users on the existing site. These tests revealed several pain points that hindered users from completing the assigned task of purchasing a chocolate birthday cake.
Key Insights
Lengthy UX Writing
“There are so many words on home page, product page… It’s like a word vomit! ”
Unclear Delivery Options
“Why there are local delivery and free delivery options in checkout page? What’s the difference?”
Disorganised Information Architecture
“Why these two categories have the exact same products? Their categories are all over the place.”
Card Sorting
Based on usability tests revealing confusion in the global navigation, I conducted a card sorting test to better understand customers' mental models, improve the structure of Sweetest Moments’s website to optimise users’ experience during their navigation.
Analysis
As the result of the card sorting test suggested, users demonstrated very different mental modal during the sorting process.
88% of the users group product by product types.
However, 29% out of these users mentioned in the follow-up interviews that they would also want to categorised them based on occasions.
Based on this result and benchmarking with 5 competitors, I revised the existing product cetegorization and presenting products by product types.
Yet, I reserved the option of shopping by occasions, and chose not to include it directly on the global navigation bar, as this option might not be most relevant to the majority of the users.
Below shown the comparison of the original site map and the revised site map.
Original Site Map
Revised Site Map
Reduced the number of tabs on the global navigation bar, and group product categories under the “Shop” tab
The categorization has been changed to by product type.
Created a sub-category of “Shop by Occasions”. reserved this option for the user group who browsed products by occasions.
User Journey Mapping
In the previous steps of the user research process, I discovered that users’ perceptions of online cake ordering aren’t based solely on the ordering step; they emphasize the entire browse-order-delivery journey. Using insights from the research, I created two user personas and corresponding journey maps to better identify each touchpoint’s needs, goals, and potential frictions that may deter conversion.
How might we present all informative content without overwhelming users?
As previously mentioned, usability tests of the current website revealed low legibility due to a cluttered layout, particularly on the homepage. First-time users found the content tedious and quickly lost interest in reading further.
To address these challenges, I redesigned the homepage.
A More Compact and Organised Homepage
To prevent information overload while systematically showcasing various products and marketing content on the homepage, I streamlined the content and divided it into smaller, more digestible sections.
I consolidated the product displays into two main sections: "New Collections" and "Classic Bakes."
Each collection features one representative product, avoiding clutter that might overwhelm customers.
For "New Collections," I introduced a horizontal carousel, allowing users to easily scroll through all available new or seasonal offerings.
How might we organize product pages for a more intuitive user experience?
The confusing navigation experience is caused by disorganized information architecture.
This issue contributes to poor discoverability of products and services, which can ultimately lead to user abandonment and a low conversion rate.
Categorize by Product Type
Based on the results of card sorting, I revised the site map by shifting the main categorization from "by occasion" to "by product type," while retaining the option to shop by occasion within the expandable menu of the global navigation bar.
How might we make reviews easily accessible to build trust?
When customers—especially new ones—visit a store’s site to order a cake, they often rely on online reviews, particularly from Google and social media, to gain insights and build trust, rather than reading through lengthy marketing content.
Redesign About Us Page
To accommodate the users' needs, I added Google ratings and selected reviews, with a hyperlink that allows users to explore more.
Additionally, I moved extensive PR content from the homepage to a dedicated 'About Us' page, preserving space for marketing text to support the business's branding needs.
The "About Us" page remains easily accessible from both the homepage and the global navigation.
How might we make cake customization more visible and accessible to users?
As previously mentioned, the cake customization service page is hidden in the footer and doesn’t appear in keyword searches, making it hard for users seeking customization to find. This lack of direct access discourages these users from exploring the service.
On top of that, users prefer a streamlined communication process, favoring in-site forms for customization details. If needed, they opt for online communication, such as email or WhatsApp, and tend to avoid more extended options like phone calls.
Set Up a Cake Customisation Page
I redesigned the cake customization service page by introducing a form where users can provide essential details upfront.
This streamlineed the process, minimized back-and-forth on standardizable procedures and provided an experience that users are more familiar and comfortable with.
How might we refine the search experience to help users find relevant results effortlessly?
The current searching experience struggles with an extensive product collection of over 200 items. Users typically search using single keywords, such as cake flavors or specific ingredients. This often results in overloaded search results, with many irrelevant products displayed, which can overwhelm users and hinder their experience.
Refine Keyword Searching Feature
I introduced a preview search side panel that appears when users begin typing in the search bar. This panel displays the most relevant products based on the entered keywords.
This added a filter step before sending users to the result page with full product page
Alternatively, users can click the "Suggestions" tab to view long-tail keyword suggestions for refining their search. If they don't find what they need, they can click through to view the full results.
How might we clarify product details and delivery options to boost user confidence?
Users expressed their demands on clear and detailed information on product information and delivery options.
Display of Relevant Information
Product Information
Product Page
Users valued details on product appearance and flavor, especially the cake's actual ingredients. To support this, I added a cross-section photo to the product gallery into the product page design.
Disclaimer: Featuring cross-section photos is not a current operation practice of Sweetest Moments. However, if it is within their capacity to implement, I strongly recommend that the business incorporate this action into their regular operations.
Delivery Option Information
On the checkout page, I featured the definition of Flexi Delivery option. The information will be displayed if users hover on the small question icon on the button.
How might we provide order updates to increase user trust in delivery condition?
After placing an order, users expressed a strong need for updates on the product's condition. A key reason many users prefer in-store purchasing over online ordering is a lack of trust in non-specialized food delivery platforms. They worry about the cake arriving in poor condition, which impacts their confidence in the service.
Add In Order Status Update Feature
To meet users' needs of order status updates, I added the option for users to receive order status updates via email on both the order confirmation and order status pages. Logged-in users can also check their order status anytime by visiting the order summary page.
Checkout Page
Order Status Page
When an order reaches the "out for delivery" stage, users are prompted to opt-in for real-time notifications via WhatsApp.
Disclaimer: Providing real-time notifications via WhatsApp is not a current operation practice of Sweetest Moments. However, if it is within their capacity to implement, I strongly recommend that the business incorporate this action into their regular operations.
Sooo…Shall we dance?
Let's connect and craft some wonders together
©2024 All Rights Reserved
