Tang (Product Designer)
Chris (Business Owner)
Product Designer
Visual Designer
What did I do?
Impact
As the sole designer on this project, I worked closely with the developers and business owner to enhance the user experience of the D&Cake Wechat App and create a unique brand identity.
I designed over 50 wireframe prototypes and screens, aligning the design objectives with business growth goals. This increased the percentage of orders placed from 8% to 17%.
00.
Design Process
For this project, I followed a Double-Diamond design approach, diverging from abstract problems to practical solutions. I explored many potential designs, then converged on the current one by balancing user needs with business goals.
In addition to the user experience design, I created branding and visual identity designs for D&Cake to establish a unique brand tone and style.
Discover
Secondary Research
Observation
Skateholder Interview
Journey Map
Define
Affinity Mapping
Define Problem
Low-Fi
Ideate Features
User Flow
Wireframe
Usability Test
Prototype
Test
Usability Test
Affinity Mapping
Hi-Fi
Iterate Design
Wireframe
Prototype
Usability Test
Evaluate
Evaluate solution performance and usability
jan. 10
Jan. 20
Jan 24
Feb. 10
Feb 17
Mar 1
Observe customers in stores
~ 50 customers / H
~ 20 mins waiting time
~ 85% customers came with friends
~ 20% left without placing an order
~ 60% customers chose to dine in
Task analysis for the old app
Through a task analysis of D&Cake customers, I studied how users complete tasks to achieve their goals and found two key problems where the current app fails to support users.
1. The app does not allow users to easily browse all available products.
2. The app lacks features enabling group customers to collaborate on orders and split bills.
Interview with customers
Through interviews with 10 customers at various D&Cake locations, I uncovered 2 key user pain points. Additionally, I collaborated with customers to create a journey map representing their experiences at D&Cake. The user journey map was valuable in both deepening my understanding of the users' pain points and effectively communicating ideas to align design goals across stakeholders.
1. Customers were annoyed when they traveled long distances to the stores only to find they had to wait around 30 minutes for a cake or that the cakes were already sold out.
2. The unique and unfamiliar cake names and appearances made customers unsure of the actual flavors when ordering online.
%20(Community)%20(3).png)
Interview with staff
Through conversations with staff, I learned that cakes were produced in hourly batches rather than being sold out. This meant new cakes became available every few hours. Gaining this insight about internal operations informed my future design decisions.
02.
Define
User pain points
1. Customers cannot easily browse full range of cakes and products.
2. Customers lack streamlined way to collaborate on group orders and split bills.
3. Customers frustrated by long waits and sold-out items after traveling to stores.
4. Customers uncertain about flavors when ordering.
Business Goal
Improve customer retention rates
03.
Ideate
Given the tight timeline, I rapidly created multiple wireframes addressing the 4 key user pain points and fulfilling some obvious problems in the old app. I reviewed these concepts with stakeholders and we collectively decided on the optimal design approach. This rapid ideation and collaboration enabled us to explore solutions and align on a focused wireframe fitting user needs, business goals and project feasibility.
Pain Point 1: Cannot easily browse full range of cakes and products.
The old app design could only display one product in detail at a time, without a product list to help customer compare different products. I changed the information architecture by adding a products page before the product detail page.
Pain Point 2 : Lack streamlined way to collaborate on group orders and split bills.
I proposed a group ordering feature that would enable users to place orders together collaboratively. My initial proposal included a split bill option that would have allowed users to divide the payment. However, after further deliberation, we decided not to implement split payments upfront due to concerns that it could lead to increased order cancellations if users had to pre-pay their portion.
As a compromise, we added a notification to remind other group members about their portion of the order.
Pain Point 3 : Frustrated by long waits and sold-out items after traveling to stores.
Our initial solution was to display real-time cake inventory levels online so customers could see availability before visiting the bakery. However, we realized this could discourage walk-in traffic if popular cakes were shown as sold-out. As a compromise that balanced customer needs and business goals, we implemented a cake reservation system allowing customers to pre-order cakes that were currently unavailable.
Pain Point 4 : Uncertain about flavors when ordering.
The cakes had blended flavors in each layer, making them hard to simply label "blueberry" or "lemon." I reframed this challenge as an asset by displaying cross-sections showcasing the layered flavors. Turning a labeling difficulty into a differentiating selling point.
We determined to overhaul the user interface of the appTo to establish a new brand tone and enhance user experience. The most important part is always the accessibility. I tested several different color in the WCAG contrast’s help and finally found this color palette and typography that could maximize the visual athletics.
Brand Design
The brand design aims to highlight the store's unique architecture-inspired cakes. Founded by architects, the store uses 3D printing to create intricate cake designs. I incorporated architectural elements into the UI to reflect the brand's creativity and strengthen its identity.
06.
Evaluation
I designed over 50 wireframe prototypes and screens, ensuring the design goals supported business growth objectives. This led to an increase in the percentage of orders placed from 8% to 17%. The app and branding redesign received an abundance of positive feedback from users, validating the success of the new user experience.
Open On Computer to See Whole Process