A bakery app that offers a seamless ordering experience and literary-inspired baked goods
Once Upon a Crumb
COMPANY
ROLE
EXPERTISE
Duration
The Backstory
The Problem to Solve
My Responsibilities
Tools of Choice
Adobe Illustrator • Adobe Photoshop• Canva • Figma • Procreate
4 Pain Points from User Interviews
I conducted interviews with 6 users to understand how mobile ordering and e-commerce apps fit into user's daily lives.
From those interviews, 4 main pain points were brought up:
Issues with Navigation
Screens are confusing and not intuitive.
It's frustrating for a user when they can't find the right buttons, especially where there are obvious placements.
Lack of Clear Information
Insufficient details about menu items, including ingredients, dietary restrictions, and allergens, can deter customers from making informed choices.
Purposely Hidden Buttons
It is frustrating for users to have their information stuck in the database, but the path to the unsubscribe button might be purposely hidden or difficult to find.
Inaccurate Expectations
When users cannot trust the app to give an accurate time expectation, it creates disappointment and can discourage them from ordering again.
3 User Personas
Based on the insights drawn from my 6 interviews, I designed 3 user personas to represent groups of users.
Competitive Analysis
Although Once Upon a Crumb is a fictional bakery created for a Google UX Design certificate project, I completed a competitive analysis with 1 direct competitor and 2 indirect competitors.
Analyzing Sprinkles, Kneaders, and Panera uncovered both unique design opportunities and essential features for Once Upon a Crumb.
Allow guest checkout & menu browsing
Opportunity!
Allowing guests to browse menus and check out without account creation can reduce friction and attract more customers. Disallowing these features risks losing potential sales.
Unique menu items
Opportunity!
Once Upon a Crumb’s literary-inspired menu (think “Alice in Wonderland” tea cakes or “Pride and Prejudice” lavender scones!) offers a distinctive edge. The design should highlight and celebrate these unique offerings.
Online mobile ordering
Must-have feature.
Users expect seamless online ordering for pickup and delivery. Including this feature is essential to meet modern customer expectations.
Loyalty program
Must-have feature.
A loyalty program encourages repeat visits by allowing users to earn points and rewards. This builds both customer retention and brand connection.
3 Design Goals for the Application
To create an application for my personas and real world users, I came up 3 goals to lead my designs and began sketching design ideas for the main pages.
Deliver an intuitive ordering experience.
Design a seamless mobile interface that allows customers to browse the menu, customize orders, and check out quickly—without unnecessary steps.
Support guest checkout and easy account management.
Allow users to place orders as guests or register for an account, with simple options to save payment methods and reorder favorites.
Enhance accessibility and inclusivity.
Clearly showcase menu items that cater to diverse dietary needs (e.g., gluten-free, vegan, allergen-friendly) and make ordering convenient for all users.
Initial Wireframes
Using Figma and my initial sketches, I designed wireframes of the Once Upon a Crumb mobile application.
Usability Tests Conducted
Methodology
Usability study sessions
I conducted 30 - 45 minute moderated usability sessions, using a think-aloud protocol and task-based scenarios. Participants interacted with an interactive mid-fidelity Figma prototype.
Sessions were hosted in-person, where the I guided the conversation and took notes. All sessions were recorded with participant consent for later analysis.
Each session included:
A warm introduction, background of the project and time for user questions
Consent to record and assurance of anonymity
A think-aloud walkthrough of key tasks in my Figma prototype.
Goal of Usability study
My primary goal of the first usability tests was…
To determine if the layout and navigation flow of the 4 main pages work with the app or deter from its performance.
I observed how users browsed menu items, added banana bread to the cart, and purchased the items in the cart.
Usability test results
Positive Comments:
The interactions are fun, inviting, and artistic.
The flow of checking out and receiving confirmation of purchase is intuitive.
Appreciates how each baked good has a photo.
Constructive Feedback:
Navigation menus are not consistent across all of the pages, which leads to confusion.
The home page is overwhelming with too much information and too many photos.
P0
Confusion about finding the banana bread when looking at the ordering "All Categories" page. Some users took a few tries to use the "See All # Flavors" link, but others could not complete the task.
Plan: Update All Categories page to have more prominent buttons and categories
Users wished they could decide if they wanted delivery or pickup and choose a time
Plan: Create a page for users to decide those details before beginning the order.
P1
"Order Again?" section was confusing for some users at first; they didn't see the title and only saw the information cards
Plan: Make "Order Again?" more prominent and increase font size
On the "Breads" page, users mentioned it was difficult to read the secondary font underneath the title
Plan: Increase the font size and darken the font color
Was confusing to some participants that Terms and Conditions and Privacy was not in the User Profile.
Plan: Update the location of T+C and Privacy
P2
"Standard" on the Checkout page seemed redundant.
Plan: Keep "Customized" but remove "Standard"
Iterations and iterations!
After conducting usability tests, I redesigned a few key features.
Updated the Checkout Process
Updated layout of "information cards" for the menu page and each specific baked item category.
Why?
"See All # Flavors" was missed during a few usability tests and multiple users did not understand that it is a button. I updated the shape and color to define "See All # Flavors" as a button.
Created an "information card" for order details (delivery/pickup and the time an order should be ready) to the checkout page.
Why?
Adding this "information card" allows users to double check their order details and edit them before placing an order. This creates a "forgiving system" that anticipates mistakes in the order details and allows users to correct them if needed.
As Once Upon A Crumb is a fictional bakery, I designed the branding and logo for the app.
The 2 main colors for my app are
maroon (#B63F58) and deep blue (#3D405B).
Maroon is often associated with elegance, warmth, and nostalgia, evoking the feeling of a favorite book or a welcoming bakery,
The cool tone of deep blue balances the warmth of maroon, creating visual harmony and making important actions.
Final Figma Designs
After 4 months of researching, designing, and redesigning, I finalized my Once Upon a Crumb mobile app!
Curious to see more?
Reflection
Future Steps
To continue improving the Once Upon a Crumb app, I plan to address the following areas for growth:
Incorporate more accessibility considerations.
I ensured that the main maroon color and off-white background provided sufficient contrast for users with visual impairments. However, there is still room to incorporate additional accessibility considerations.
Create a web responsive version of Once Upon a Crumb.
Given the variety of device sizes today, I want to design a responsive web version of the Once Upon a Crumb app to ensure a seamless user experience across all screens.
Include more animations and interactions.
I want to practice my skills in motion design, so I plan to incorporate more animations beyond the 'Added to Cart' pop-up, adding subtle yet effective motion elements to improve user engagement and overall experience.
