top of page

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.

TC Logo 01 Artboard 1 1.png
Pink Sugar


 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


My Role

UX/UI Designer


Desktop E-commerce Website


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

Screenshot 2022-06-08 at 15-22-37 Toronto Cupcake Home Cupcake Delivery GTA.png

Recognizable Branding

Despite the above issues, the simple color scheme coupled with the minimalistic design created instant memorability.

TC Swatches.png
Current Site
Pink Sugar

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.


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.

Gerogetown Cupcake.png
Bobbette and Belle.png
baked by melissa.webp

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


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.

Pink Sugar

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?


 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

Pink Sugar

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.


75% of subjects categorized the About, Resources, and Occasions Pages in the Primary Navigation category

CardSortCS Img 1.png

Holidays and Themes were next in consistent categorization

CardSortCS Img2.png

Everyone had both chocolate and vanilla flavor categories

CardSortCS Img3.png

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.

AffinityCS Img1.png
Pick-up  vs. Delivery
AffinityCS Img2.png
Purchase Influences
AffinityCS Img4.png
AffinityCS Img3.png
Pink Sugar

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



"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

Pink Sugar

"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.

Site Map - TC Final.png

The Reboot

Pink Sugar

What Changed

HomepageCS Img.png

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

Frame 111.png

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"


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!
Pink Sugar

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!

Pink Sugar

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.
bottom of page