Here's my go-to interesting fact about myself: Before I pivoted to a career in tech, I was the Assistant Manager for a small cupcake bakery in South Carolina. We baked 400 to 1,200 fresh cupcakes 7 days a week, including fun flavors like Bourbon Pecan Pie and Salted Caramel Chocolate (my personal favorite). We also catered weddings, birthday parties, and other fun events with custom cupcakes and cakes. It was a really fun job and I miss it dearly.

When our customers wanted to place a custom order (i.e. rainbow icing or unicorn cupcakes), they would call or come into the bakery to talk with us about options and pricing. While I loved chatting with our customers about their creative ideas for a kid's birthday party or an office celebration, I noticed frustrations with the process. Customers wanted fun decorations and special flavors, but it was difficult to communicate exactly what they would be getting for which price. While our employees were knowledgeable about what we did and did not offer, there was no standardized documentation outlining specific offerings, their prices, and what they looked like.

‍

This got me thinking:

How might we help small businesses achieve their sales goals while optimizing the ordering process?

How might cupcake lovers make their creative vision come to life, while also feeling confident in pricing, appearance, and ingredients from the start?

‍

Enter Cake Thirty.

‍

The Problem:

Busy customers don’t have time for multiple trips to a bakery to place large, custom orders for events. They are also often confused about variations in pricing for different flavors and decorations.

‍

The Goal:

Design a mobile app to provide transparency in price, ingredients, and visual renderings so that customers can place orders in the app and know exactly what they’re getting.

Understanding the User

Good UX design starts with good user research. I interviewed bakery employees and customers to understand pain points, which guided my creation of personas and use journey maps. While this app could benefit both the customer and the bakery, I decided to focus on customer needs for this particular project.

In addition to confirming the user's need for transparency and ease in the ordering process, my research revealed other pain points such as accommodations for those with food allergies, as well as menu format and text that make it challenging for users who struggle to read text in English.

‍

From these interviews, I discovered 3 user pain points:

1

PRoduct Detail

Custom bakery orders require a variety of options and pricing. Users cannot see all available options and prices without calling or visiting the bakery.

2

Time

Working adults do not have time for multiple trips to a bakery. They prefer to place their order entirely online.

3

Inclusivity

Users cannot order for people with food allergies if they cannot see a full ingredients list. Additionally, users who are not proficient in English reading and speaking may feel anxious reading text-heavy menus with few photos.

From my research, I created user personas and user journey maps.

A woman with dark hair, wearing white pants and a jacket, standing and smiling with a hand on one hip.

Zheng

Age: 35
Education: Master's Degree
Hometown: Tuscaloosa, AL
Family: Married, 5 y/o daughter
Occupation: Teacher

“Being a working mom can be stressful. I want to make sure I spend quality time with my daughter during and after a busy work week.”

Goals

1. Spend quality time with her daughter choosing the theme for parties and events.
2. Place large orders for birthday parties and school events, often with custom decorations.
3. Order well in advance and stick to a budget.
4. Order and pick up efficiently with minimal trips to the bakery.

Frustrations

1. Discouraged when bakeries don’t disclose their ingredients lists, as some kids in her daughter’s class have food allergies.
2. Has to go into the bakery and talk to someone in person to know what customization options are available and how much they cost.

Biography

Zheng is a teacher who balances her passion for her job with her passion for being a mom to her 5 year-old daughter. Zheng often places large bakery orders for her daughter’s classmates or birthday parties. She enjoys picking out themes and decorations with her daughter, but doesn’t have the time to go to the bakery to see what kind of decorations they can do. She also needs to accommodate to food allergies in her daughter’s class, and wants to be certain that the baked goods are safe to eat for all children.
Zheng is a working parent who needs a way to order custom cupcakes in advance, knowing the ingredients and pricing because she doesn’t have time for multiple trips to the bakery.

Action

Determine which decorations to order

Determine size of order

Contact bakery to place order

Determine price and pay for order

Pick up order

Task list

A. Decide which type of baked good(s) to order
B. Look for decoration ideas with daughter
C. Compile a list of possible customizations

A. Determine number of children in daughter’s class, plus extra
B. Determine which children have dietary restrictions, and what foods would be safe for them

A. Call or visit bakery
B. Present list of decorations to see what the bakery can create
C. View ingredients list and select options for children with dietary restrictions
D. Place order for specified pickup date

A. Finalize order numbers and decorations with bakery
B. Pay cashier for order

A. Travel to bakery
B. Ensure baked goods for students with dietary restrictions are marked and order is correct
C. Bring order to daughter’s classroom

Feeling

Excited to provide a celebration for daughter

Anxious about whether the bakery can accommodate dietary restrictions
Uncertainty about bakery’s ingredients list

Uncertain of what the bakery will be able to create
Hopeful that bakery will have a complete ingredients list

Anxious/uncertain about how much the order could cost

Relieved to have picked up the order
Worried about getting the order to daughter’s class on time

Improvement opportunities

Include photos of each baked good and customization options in app

Include full ingredients list for each item in the app

Include functionality to order and pay through the app

Include price in the app as user creates their order, including price for customization

Include push notifications or text message reminders when order is ready for pickup

Starting the Design

Wireframes

I drafted several iterations of each screen of the main user flow: placing an order. For the home screen shown below, I explored several different formats but ultimately prioritized a clear path for starting an order, as well as highlighting the visual nature of custom cakes through photos.

After creating paper wireframes, I moved to Figma to get my designs in a digital format. Based on findings from user research, I decided to prioritize space for images and icons when creating digital wireframes. This aligns with the visual nature of cake customization, shows the user exactly what they are ordering, and helps those with language or reading barriers navigate the app more easily.

The carousel at the top of the home screen features new or popular items and provides decoration inspiration to users.

Category selection buttons contain large photos to provide more visual inspiration and to give users an idea of what the final product might look like.

The large item preview at the top gives a rendering of the order based on user selections.

Customization buttons include item names and images, as well as additional fees when applicable.

Low-Fidelity Prototype

The low-fidelity prototype shows the primary user flow of customizing and ordering an item for pickup. This prototype was used in the first usability study for this app.

View the Cake Thirty low-fidelity prototype.

Usability Study

I designed and conducted two usability studies for the Cake Thirty app. Findings from the first usability study helped guide the transition from wireframes to mockups. The second study used a high-fidelity prototype and revealed opportunities for further improvement.

Round 1 Findings

1. Users need clear visual cues for beginning the ordering process.

2. Users want a full ingredients list on each item's screen.

3. Users need clear cues for moving forwards and backwards in a flow.

Round 2 Findings

1. Users want more customization options such as the size of the cake and the number of toppers.

2. Users expect symbols or text to indicate that a product is free of common allergens.

Findings from both of these usability studies confirmed the pain points from my initial user research. Users need to know exactly what they're getting when they order from a bakery, including appearance of the baked goods, ingredients, and price.

Mockups: Refining the Visual Design

Findings from the first usability study revealed that the app needs to clearly guide users to begin the ordering process. I placed the Begin Order button at the top of the homepage and used the red accent color to make it stand out.

After the second round of usability studies, I added more customization options for the size and shape of the cake, as well as icons for common allergens.

High-Fidelity Prototype

The final version of the high-fidelity prototype allows for more detailed customization within each bakery item. It also meets user needs for clearer visual cues for critical actions and information in the main user flow.

View the Cake Thirty high-fidelity prototype.

Accessibility

In addition to the accessibility considerations found in the user pain points, I also took the following steps to make the Cake Thirty app as accessible and inclusive as possible:

1

Included full ingredients list and icons for common allergens so that users with food allergies can clearly determine which items are safe for them to eat.

2

Used real-time renderings of cake flavors, frostings, and toppings to give all users a clear visual preview of their order.

3

Included icons for basic navigation tools, as well as icon labels for users who use screen readers to navigate through the app.

Reflection

Impact

The Cake Thirty app takes the guesswork out of ordering custom baked goods. Users see exactly what they’re ordering and how much it will cost up front.

‍

Quote from a usability study participant:

“Now I want to order some cupcakes in real life! This app has inspired me to go all out for my next party.”

‍

What I Learned

Throughout the design process, I was reminded of the importance of asking for feedback frequently from a diverse group of people. Seeing peers’ comments and watching study participants interact with the app broadened my perspective of what the user ultimately needs.

Next Steps

Of course, a design is never truly finished. Looking forward, these actions would help me take this project to the next level:

Conduct additional usability studies to see whether users’ pain points have been addressed, and to see what other featured they’d like to see in the app.
Conduct further user research with bakery employees and owners to identify pain points from their perspective. From those findings, I’d like to design a “baker’s version” of the app to manage incoming orders and inventory.

Cake Thirty Mobile App