Awfully Chocolate
My UX redesign project aims to streamline and improve the e-commerce experience for users searching and purchasing cakes on this website.
Overview
Duration & Team
My Role
Project Focus
Tools
11 Days
Individual project
UX Researcher
UI Designer
Information Architecture
Research methodology
Redesigning an existing website
Figma
Mural
OptimalWorkshop
Contents
I adopted the double diamond approach for this UX process:
Discovery
Background
With the rise of digitalisation, there is a need for traditional F&B businesses to adapt and evolve their business model to attract online customers and to improve their online presence. This is especially so with the recently re-introduction of the COVID-19 measures.
By improving the user flow of your website, there will be an improvement in your consumers' experience, translating to business growth.
Objective
To redesign the Information Architecture (IA) and critical pages of AwfullyChocolate to improve their takeaway and delivery process.
Research
User Interview
My goal of this research is to identify both the positive and negative aspects of consumers' experience when shopping for a cake online and to discover the potential goals to improve the Awfully Chocolate website.
​
The target audience are consumers who have experience purchasing cakes both online and in physical stores. I interviewed 5 participants to understand their thought process from beginning to end, along with their needs and frustrations.
​
“Describe to me the process of the previous time you had to purchase a pastry?”
“On which occasion do you buy a pastry or cake?”
“For those occasions, where do you usually purchase your pastries (online or physical store)?”
Insights
My findings were transcript using an Affinity Mapping method and were sorted according to any apparent trends. After consolidating my results from affinity mapping, I developed the key patterns into the following insights:
Accessibility
Franchises are conveniently located, affordable & standardised in quality.
“Normally, I will buy cakes from franchises, like Breadtalk. In terms of taste, it can never go wrong since they’re manufactured the same way.”
Preferences
Budget
‘Mental’ checklist and assumptions based on online descriptions and images
​
“I will have to take out a ruler to image the sizing of the cake”
“If I buy a cake for my elderly relatives, I will choose a Japanese fruit cream cake, cause to me their light and less sweet”
Delivery fee is deterrence from this service
​
“If I send cakes for delivery, it has to be less than $15. If not I will ask my relatives to collect cause they have a car”
Availability & convenience of cake for last-minute purchase
“For mother’s day, I brought a cake on the day itself. I will find a franchise that’s along the way home.”
Consider likings, potential allergies and sizings for their friends & colleagues birthday event
​
“I have to remember which colleague is allergic to what fruit, and which colleague don’t like flavours like Durian.”
Priority in promotional cakes due to the discounted pricing
Synthesising
Define
Persona
Afterwards, I incorporate the key insights into a user persona to further emphasise the end-to-end experience of my target audience, as well as to better represent the pain points and goals of my interviewees.
How-Might-We (HMW)
I created a few HMWs statements to create a baseline for my brainstorming process and to set an outcome to ensure my proposed solutions will correspond with the users’ frustrations.
1 ) How might we simplify the searching process for users with food preferences and restrictions?
2) How might we provide a better indication to address users’ concerns when it comes to intangible and visual factors, such as the sweetness and portion of a cake?
3) How might we improve the location process for the user?
Ideation
Design
Information Architecture
Being an e-commerce website, there is a list of products of over a hundred cakes and pastries. After scaling down to 50, I thought to myself, “Is there a way to categorise these products so that consumers could find what they are looking for with ease?”
Card Sort
I started an open card sort with 17 users to get a general idea of how users will interpret and group the different pastries available.
The goal here is to understand the consumers’ insight on how they would categorise any pastries from Awfully chocolate. The current website has an ambiguous structure on the different variations of cakes and non-cake pastries. As well as the unclear labelling such as “the perfect gift”.
I began facilitating an open card sort with 17 participants to understand how consumers would categorise and establish the relationship between desserts. Based on the dendrograms and similarity matrix, clusters with a close agreement of 90% and above are identified as established categories. Utilising the available results analysis tool, some trends were observed among cakes and chocolate bars, however, the results were not strong to indicate whether these groupings can be further clustered.
A group in the 3D cluster indicates a potential category even though the products on this listing has no visible relations. Hence, a need to perform an additional card sort to verify perceived groupings.
Dropdown navigation menu of Awfully Chocolate website
With hybrid card sort, categories are given to the participants where they will sort the products based on their perception. Based on the standardisation grid, the quantitative data demonstrates a clearly defined category than the previous sorting. Using Dendrograms, Similarity Matrix and 3D clusters, I was able to identify some potential subcategories within the main ones. However, some desserts remain ambiguous.
Tree Testing is created using the established categories formed from both card sorts, to verify the remaining products and potential sub-categories. I facilitated with 5 users to navigate through a proposed information architect, based on a list of ambiguous products they need to find.
Findings
Users could find such ambiguous desserts — Tiramisu, Nutella Tart — based on their interpretation of the word and food
(But during card sort they sorted based on the images - due to the size)
A follow-up session to gather user feedback, which prompter me to rename this confusing heading ‘Pure Chocolate’ to ‘Only Chocolate’.
​
Participants tending to cluster the products by dessert type, then flavour.
Sitemap
Based on the established categories, I reorganised the sitemap for Awfully Chocolate to have a clearer navigation bar for my iterated prototype. Below is the overview of the available pages of the proposed website.
​
< Left image is the Proposed Sitemap
User Flow
I created a user flow to visualize how users will navigate through a website from product browsing to the checkout page.
Prototype
Delivery
Usability testing
My goal is to observe how users navigate through Awfully Chocolate's website from home to the check-out page by understanding their navigation and web flow process. 5 users were recruited to perform at least 3 online tasks.
1 ) Finding a cake large enough for a birthday party
2) Finding a cake that fits the recipients' food preference and restrictions
3) Check out a cake and find a suitable pick up location relatively near your or the birthday recipient home.
From the results, 3 common topics emerged: .
Analysis methods
After each usability testing, we transcribe our findings into pluses/deltas to observe what could improve the users' experience. Furthermore, after each task, the Single Ease Question (SEQ) was performed to gather quantitative data to monitor the progression of our prototype. A total of two Usability Tests were performed and the results can be read under "Design Systems".
User Design
Curious about the design layout and interface, I asked users to give a brief overview of the home page before providing feedback.
The plus point is the aesthetic vibe.
Delta: However, as quoted by a user, the visual design “does not reflect the elegance and black minimal of Awfully Chocolate”.
​
.png)
Task Flow
Proposed Solution
Through the usability testing on both the current website to wireframe, here are the pluses and deltas to show the gradual improvement of the proposed prototype.
Validation
The results from the SEQ score shows a significant increase in each task, especially for task 2 when it comes to finding a special diet cake. Hence, proving the proposed solution is targeting the respective pain points.
User Interface Library
This design guideline was created after Project 3. Not only did I learned the basics of branding guide from my class, but I have also observed how my peers, from a graphic design background, have built theirs during Project 3. So, I took this opportunity to design a UI pattern library for future developments.
Final Thoughts
Future Steps
Given more time I would like to further validate the design iteration and prototype with another round of usability testing. I could also implement some secondary features and tools to further elevate the experience of users on Awfully Chocolate.
Reflection
I went from sketch to a mid-fidelity wireframe that almost resembles my final prototype. Given the time frame of the project, I was worried about being unable to deliver a prototype by presentation day, thus, skipping through the wireframe process. In hindsight, the wireframe should still be drafted out to reduce the time taken to re-design the proposed prototype.
A UI pattern library should be created before handling any prototype. By creating the necessary components, editing the master components after each usability testing, would make my redesigning process more efficient.