top of page
Anchor 1

Toronto Cupcake

Responsive Website Redesign for a Local Canadian Bakery

Toronto Cupcake
Vector 227.png

My Role

UX & UI Designer

Main Role : Information architecture, ideation and prototyping


4 people - Self Directed

Figma, Miro, Adobe photoshop, Maze


High-fidelity prototype for mobile and desktop 

Toronto Cupcake is a local business based in Toronto, Canada specializing in gourmet cupcakes with the option of customization. The current website is very outdated and doesn’t offer much information. The main issue of the website is a lack of user-centricity. Because of the difficult ordering process, new customers are reluctant to make purchases through the company's website.


Project Overview

Make Your Own Box

Customize a cupcake 

Fast Checkout

Toronto Cupcake



1- It lacks brand identity and professional look.

2- Complex Navigation and time consuming checkout process.

3- Customize order is only possible through contacting seller directly 

1- The information architecture should be modified to allow users to find the information easily and complete a task in the fastest possible way​.

2- Enhancing visual elements  and altering the current website layout to improve navigation​

3- Adding customization features to the website.

Heuristic evaluation

Online surveys

User interviews
Competitive analysis

Affinity diagram
User personas
Story mapping

Card sorting

Information architecture
User flow


Usability test

Card sorting


Style guide

Final Prototype

Next step

Toronto Cupcake
Vector 228.png

1 Empathize

Heuristic Evaluation

Based on the heuristic evaluation, we observed issues with cluttered layout, non-functional links, and lack of organization on the website. You can read more Here.

Heuristic Evaluation


10 Questions | 27 Participants

Frame 248.png
Frame 247.png
Frame 246.png


 5 of the participants. 

Website user-friendliness evaluation

All of the users found the website difficult to navigate and not user-friendly.

Task completion rate
Misunderstanding business type
Task retrying behaviour
User preference for ordering

Of users were not able to complete a simple task with the website.

It was found that only 1/4 of users were willing to retry tasks after reading positive Google reviews.

Due to the website's poor layout, 80% of users have expressed a preference for contacting the company by phone to place their orders.

The majority of users who visited the site mistook it for a retail business for a box selling firm.

Competitive Analysis

  • Five out of seven competitors offer user accounts, enabling users to like products and access their order history.

  • Four out of seven competitors provide information on product ingredients and allergy restrictions.

Competitor Analysis Chart.png
Interviews .jpg

2 Define

Affinity Diagram 

Website contents should completely be modified to provide a clear pathway for user to navigate. 

Affinity diagram


Image by Jake Nackos

Lily Jones  |  32

Human Recourse 

Lily Jones, a 32-year-old corporate banker at the National Bank of Montreal, is excited about her company's upcoming 200th-anniversary celebration. She's exploring catering options in Toronto and is drawn to Toronto Cupcakes for their customization and delivery services.

  • Find a reliable and efficient catering service for her company event.

  • Customize cupcakes with her company's logo to impress colleagues and superiors.

  • Have the cupcakes delivered directly to her office, saving time and effort.

  • Easy and user-friendly customization options for cupcakes.

  • Timely and reliable delivery service.

  • A seamless and stress-free ordering process with clear communication and confirmation.



1- The National Bank of Montreal (BMO) is going to have a 200 years anniversary in a few weeks.


2- Lily who works in a human resource department is responsible for planning a ceremony for this event.


3- She decides to look for some cupcakes that could be customized with the business logo.


4- She customized her order in the Toronto cupcake website and places her order.


5- She receives notification that her order is successfully placed and is getting processed .


6- On the day of the events, the cupcakes are shipped from Toronto Cupcake to the BMO company.


7- Everyone is enjoying the cupcake and Lily had a stressless experience ordering the cupcakes.


8- People are asking Lily where she got the cupcakes from. She shares her experience about Toronto cupcake with others.

3 Develop

To improve the Information Architecture, we conducted open card sorting with 10 participants.

card 2.png

Card Sorting

Site Map

Frame 219_edited.jpg

Task Flow

Task : Ordering Cupcake

Browse the website

Customize the cupcake

Customize a box

Place an order

Receive the product

User Flow

You can view the past user flow iterations here.

user flow_edited.jpg

Ideation Sketches

Designing the Homepage

Our team redesigned the homepage, focused on highlighting crucial information and enhancing user navigation. 

Homepage Sketch
Designing the Custom Order Page

We designed a user-friendly customization page with a step-by-step process. Users can choose cupcake base, frosting, toppings, packaging, and add their logo.

Custom Order Sketch
Designing the Product Page

This page is featuring high-quality images and detailed descriptions about ingredients .

Product Page

Style Guide

Style guide

4 Test

Usability Test

Users completed three tasks remotely, providing data on click paths, and task completion ratesHERE you can read the full report.


Unmoderated usability test 

No. Participants

5 participants

No. Tasks

3 Tasks


Google docs

"Please navigate to the Toronto Cupcake Website and place an order for a custom box of 6 cupcakes, consisting of a mix of chocolate and vanilla flavours. Then, place another order for a fully customized dozen cupcakes with a chocolate sponge, red velvet frosting, and raspberry topping, and add the logo file that provided to these cupcakes. Finally, complete the checkout process to finalize your order. Please note that this task is not meant to evaluate you, but rather to gather feedback to improve our website."

Iteration Decision  

Cupcake customization is now on a single page, simplifying the process, and users can preview their order before finalizing it.

To accommodate customers who enjoy sampling multiple cupcake flavours, an additional customization feature can be incorporated, enabling users to personalize their cupcake box by choosing from a variety of flavours.

The lengthy checkout process should be simplified with less steps.

Design Iterations



5 Design

Final Prototype

After multiple iterations and incorporating valuable user feedback, we have arrived at the final design.


Interactive Prototype

Click around to use the prototype 

Home Page

Navigating just got a whole lot simpler!

13in M1 Pro-3.png

Hero Image

13in M1 Pro-2.png

About Us


Customize Cupcake

Customize a cupcake in 4 easy steps.

Group 1680.png
Group 1681.png

Make Your Own Box

Buy a box containing your selected flavours.

Group 1678.png

Choosing Box Size

Group 1682.png

Selecting Flavours


Easy Checkout

Fast & easy checkout process.

13in M1 Pro.png
13in M1 Pro-1.png
In Summary 

Our team was tasked with redesigning the bakery website to create a pleasant shopping experience that would benefit both the customers & the business owner.​


By conducting user interviews, affinity mapping, task analysis, we were able to gather insights and understand our users' needs .


A functional website prototype was designed to enhance the shopping experience of users by allowing them to fully customize their order.

Toronto Cupcake Design Recap
bottom of page