Cupprimo
Project Overview
Aiming to meet all of your cupcake and sweet craving needs
​
Exploring designing a seamless journey, from browsing to checkout, to enhance the user experience at Cupprimo, a cherished local Austin cupcakery. BY refining every aspect, from a streamlined checkout flow to more intuitive navigation, we aspire to elevate thwe online ordering experience for current and new users.
Project Type
Individual Ecommerce Redesign
Platform
Desktop
Adobe Color Contrast Checker
Adobe Color Blind Safe
Tools
Figma
FigJam
Optimal Workshop
Timeline
3 Week Sprint
Role
User Researcher
UX Designer
UI Designer
Problem Statement
Task Flow
Wireframing
Prototyping
Usability Testing
Methods
C&C Analysis
User Interviews
Affinity Mapping
Card Sorting
Persona
What is Cupprimo?
Cupprimo is a local cupcake store in Austin, TX that first opened its doors in 2008.
​
Although being an Austin original, Cupprimo gained further recognition by competing in Cupcake Wars and being featured in Food Network along with other local news.
​
Locally, Cupprimo isknow for their phenomenal cupcakes and for having the tastiest gluten free and vegan cupcakes in town.
​
The only problem is... their complicated website did not have a checkout option.
​
To address this problem, I embarked on a 3 week website redesign quest to help Cupprimo live up to its full potential.
Competitive Analysis
Direct
Indirect
The first step was to analyze what Cupprimo's competitors were already doing. Through competitive analysis, I discovered that the checkout process for desserts is quite similar across my competitors and follows a similar flow with the exception of some difference in buttons. The flow usually starts with creating an order, selecting a store, and choosing the pickup date and time. Then, the users are allowed to select dessert options and add to cart. Next, users are allowed to view their cart to confirm their choices before being directed to checkout, where they could sign in or continue as a guest. Finally, users input checkout information and place their order to receive their order confirmation. This information would help shape the checkout flow that I would build for Cupprimo.
​
In comparison to these competitors, I found that the current Cupprimo website was lacking in proper sorting and filtering options and had confusing, poor navigation with scattered information.
User Interviews
As research is the foundation of insights, I conducted 6 user interviews online through Zoom. These interviews were crucial in understanding how users purchase desserts or cupcakes both online and in-person.
​
This data was synthesized into an affinity map, through which I discovered 4 main categories of insights.
1. BUYING ONLINE
-
Convenience of choosing pick up times
-
Saves time and has less human interaction
2. DECISION MAKING
-
Look through all available menu selections before choosing
-
Consider image, description, and ratings when making a purchase
-
Tend to stick with flavors that are familiar to them
-
Decide on quantity of items before choosing flavor
3. PURCHASE CHOICES
-
Usually order a pack of desserts rather than a singular item
-
Purchase desserts often for special occasions
-
Purchase desserts when craving something sweet
WEBSITE CONSIDERATIONS
-
Search for items by filtering by flavor
-
Special dietary needs should be labeled
-
Desire visible pricing
-
Current Cupprimo website does not have enough filtering options
Defining the Problem
01 Persona
By compiling ample research data and insights, I was able to establish our primary user. Meet Sarah, a prime representative for Cupprimo's target audience.
Information Architecture
FLAVORS
-
Chocolate
-
Vanilla
-
Fruit
-
Peanut Butter
COLLECTIONS
-
Classic
-
Specialty
-
Seasonal
DIETARY CONCERNS
-
Gluten Free
-
Vegan
02 Card Sort
To refine the information architecture of the website and optimize the navigation, I conducted an open card sort to understand how users generally categorized cupcake flavors. The cord sort and analysis was conducted using Optimal Workshop.
​
The specific filtering options users most frequently used could be further categorized into flavors, collections, and dietary concerns.
03 Problem Statement
Sarah needs a quick and efficient method to order pink, assorted cupcakes online for pick up the morning of her party because she does not have time to place the order in person and the current Cupprimo website is confusing to navigate.
Task Flow
To focus and guide my ideation and designs, an optimal checkout task flow was created to address Sarah's problem. This flow details Sarah's journey on the site and outline actions that she will take.
Wireframes
Using my task flow and sketches from ideation as a guide, I crafted wireframes to lead Sarah seamlessly through the cupcake purchase process.
With each usability test, I incorporated the feedback into my design iterations
Likes
-
Easy to see navigation menu
-
Information about dietary needs
-
Multiple navigation methods
-
Order interaction was fun and streamlined
-
Menu page descriptions, reviews, and recommendations
-
Order detail information when viewing cart
-
Font was accessible and easy to read
Dislikes
-
No descriptions in checkout menu
-
Weird, small search bar icon
-
No ability to add to cart from menu page
-
No prices on menu page
-
Order button was difficult to locate
Next Steps
-
Include popup of descriptions of flavors for the menus in the checkout process
-
Include some pricing guide on menu page
-
Add open/close hours to contact information
-
Find a different place to put global order now button.
