Toronto Cupcake Redesign
Toronto Cupcake was created by Michelle Harrison in August 2010 as one of Canada's first gourmet cupcakeries. Her goal is to provide high-quality cupcakes to local customers and businesses in the city of Toronto and the Greater Toronto Area.
Opportunity
Cupcake shoppers need to be able to order and schedule delivery quickly via easy-to-navigate pages so that they can continue with their day stress-free.
The challenge was to create a streamlined ordering and checkout process in as few pages as possible while enabling users to track their shopping experience.
My Tools
-
Site Audit
-
Feature Analysis
-
Task Analysis
-
Survey
-
User Interviews
-
Affinity Mapping
-
Card Sorting
-
Site Mapping
-
Visual Design
-
Wire-framing
-
Prototyping
-
FIGMA
My Role
UX/UI Designer
Constraints
Desktop E-commerce Website
Timeline
2 Week Sprint
Final Prototype
Click the image below to view
Current Site Audit
I evaluated the site based on an existing set of guidelines to assess the usability of its interface and determine which issues were top priorities. The following were my takeaways:
Minimal Design
Hidden Navigation
No Cart Icon
Vast areas of the site were barren, with all the site information condensed into a line at the bottom of the page.
The font choices were split between different several sans serifs of the same size (even Comic Sans), with no visual distinctions other than underlined links.
Initially didn't notice the three-lined "hamburger" menu at the top left
None of the badges at the top of the page were buttons, only there for design.
Links were buried within the paragraphs and it wasn't apparent that the image in the center was a link to the shopping page.
No shopping cart or bag icon on any pages meant there was no immediate way to see what items the shopper intends to purchase.
Current Homepage
Recognizable Branding
Despite the above issues, the simple color scheme coupled with the minimalistic design created instant memorability.
#FFFFF
#000000
#F6A6C1
What's It Like?
I then went through the task of purchasing one dozen, custom assorted cupcakes to see what that experience would be like.
Takeaways
When adding flavors to my assortment, I was taken to a separate page immediately.
With no cart or bag icon, there was no other alternative to check on what items I placed already
No clear organization of products on the shopping page.
What Else Is Out There?
I ran a comparative and competitive analysis on 3 cupcake competitors and 2 comparable companies to see what they had that Toronto Cupcakes didn't.
Competitors
Georgetown Cupcake
High-end, boutique cupcake bakery
Bobbette and Belle
Another Toronto-based bakery with only one location
Baked by Melissa
Large brand name with nationwide delivery
Comparisons
Edible Arrangements
Delivers decorative foods made to be given as a gift
Party City
Cupcakes are usually associated with parties and events, which party city provides supplies for
The majority of these businesses had shopping icons, filtered search, and account profiles while Toronto Cupcake did not.
So how might we...
...allow for faster selection on the flavor menu?
...provide status updates during their shopping experience?
...streamline the order to checkout process?
My
Recommendations
No clearly visible shop icon or link that takes the user to the shop page
Unnecessary backtracking
No up-to-date item view on page
=
=
=
Create a universal shop icon or tab to allow users to reach product page
Allow users to select all items on one page if they are packaged together
Create a cart icon that shows the quantity and details of the items placed
But Where Does It All Fit?
To see how the site could be better organized, I had 6 individuals participate in an open card sort to see how they categorized certain elements. A card sort is a research tool that has participants organize items from the site, sort them into categories, and label those categories.
Takeaways:
75% of subjects categorized the About, Resources, and Occasions Pages in the Primary Navigation category
Holidays and Themes were next in consistent categorization
Everyone had both chocolate and vanilla flavor categories
Who Uses It?
To find the users that would benefit most from an improved cupcake shopping experience, I sent out a survey, with the goal of finding individuals who purchased cupcakes recently, regularly, and through delivery.
5 people met that criteria and consented to an interview.
After synthesizing their answers through affinity mapping, I came up with the categories below to break down their purchasing motives, methods, and influences.
History
Pick-up vs. Delivery
Purchase Influences
Motives
User Persona
With those observations and data, I created my primary user persona to represent my target users.
A 29 yr old, single, female balancing a full work schedule and a social life in the city of Boston
Has a serious sweet tooth
Always checking out food pages on Instagram
Needs accurate and timely delivery
Holly
"When I think of cupcakes, I think of a party!"
Starting to Rebuild
Now that I had my primary user, I sketched out wireframes and digitized them through Figma to visualize a design solution for Holly.
Design Objectives
Maintain a familiar minimalist layout and brand color scheme that won't alienate long-time customers
Feature a prominent navigation bar at the top with the newly reorganized categories
Distinguish text through different fonts and create call-to-action buttons to guide users
"Maps are a Way of Organizing Wonder"
- Peter Steinhart
Between the information from the card sort and the data from the comparative analysis, I was able to sketch a sitemap. This sitemap would become the foundation for my navigation redesign.
The Reboot
What Changed
Shopping cart icon where Holly can track and edit her items, as well as navigate to checkout.
Navigation bar at the top for increased visibility
Different fonts and boldness to add character and readability
Distinct call to action buttons and highlighted links
Progress bar to indicate which stage in the shopping process Holly is in
Consolidated flavor menu to expedite selection
Star rating to show the quality of the product and build trust through reviews from other shoppers
Gallery of related items gives Holly the opportunity to explore and purchase more
Did It Pass the Test?
To validate my solution, I conducted 4 usability tests, with the designated task of assorting and ordering one dozen cupcakes for delivery. Below were the most notable takeaways:
100% of users completed the task of ordering successfuly
Participants liked the flavor selection menu because it was simple to create an assortment.
The visual design was described as "cute" and "fun to look at"
However
Some felt the star rating's prominence was distracting and expressed interest in having it placed in a more discreet location
Billing and shipping pages could be consolidated onto one page.
One participant even wanted to perform the usability task on the current site after finding the usability test to be incredibly easy.
The result:
It took them 2.5x times longer to complete it!
By redesigning top-level navigation as well as consolidating the flavor menu for assortment customization, online ordering is over 100% faster than its previous iteration.
And that means busy cupcake lovers like Holly can now quickly find and order the perfect assortment of cupcakes for their next party without skipping a beat!
What's Next?
If I were to continue with this redesign, I would:
Create additional delivery features such as a tracker and an updated scheduling menu.
Create links to social media so that more people can discover the business
Design a profile page so users can save their favorite assortments and preferences
With this project, I learned how to assess and redesign an existing website for a real-world business through research and design principles to successfully create a better user experience.
