top of page

Toronto Cupcake

Website redesign

What is Toronto Cupcake?

Toronto Cupcake is a Toronto-based online bakery that focuses on handcrafted, premium cupcakes, especially for celebrations and special occasions. The brand serves both individual customers and businesses, offering custom cupcakes for birthdays, baby showers, weddings, and corporate events.

The business operates primarily as an online delivery-focused bakery, allowing customers to order through the website for same-day or scheduled delivery within Toronto and surrounding areas.

Project Overview

Duration

Tools

Role

Team

3 Weeks (Part-time)

Figma, Photoshop, Zoom, Maze

UX Designer

Group of 4

This project was completed as part of a UX bootcamp in collaboration with our program stakeholders. The work simulates a real-world client engagement, following an end-to-end UX process from research to solution.

Problem Statement

Following our meeting with the stakeholder, we identified key usability issues affecting the website's ordering experience. Users are struggling to navigate the site, find their desired products, and clearly understand delivery options. Additionally, important features such as corporate ordering and other collaborative services with other vendors are not easily discoverable. These challenges are creating friction in the customer journey and missed business opportunities. As a result, the business decided to improve clarity, supporting users' decision-making and enabling a smoother end-to-end ordering experience. 

Objective

To establish a clear and intuitive information architecture that enables users to easily find their desired products and complete the ordering process without confusion.

By creating a more structured navigation and smoother checkout experience, we aim to reduce friction in the customer journey while ensuring that key features such as "corporate ordering" are visible and easily accessible.

During the initial kickoff, the stakeholder tasked our team with evaluating and improving the website’s ordering process to create a more seamless and user-friendly experience.

Design Process

Discover

Develope

Define

Deliver

Problem Space

Solution Space

Our team applied the Double Diamond framework to guide our design process. While the model provided clear direction, our approach remained highly iterative. We revised stages as needed to incorporate insights, validate assumptions, and strengthen our final solution.

Heuristic Evaluation

As an initial step, our team prioritized a heuristic evaluation before conducting user interviews or competitive analysis. This early assessment helped us uncover usability concerns, generate hypotheses, and better define the areas requiring deeper investigation.

(9) Footer Appears Too Abruptly

The footer comes in without a strong transition and that's dangerous if users haven't converted yet.

(2)

(2)

(2)

(5)

(1)

(6)

(2)

(4)

(3)

(7)

(8)

(9)

ham.png

(10) Weak Product Card Structure

Each cupcake visually floats on page without containment.

(11) Quantity Selector Creates Unnecessary Friction

Most users don't carefully choose quantity before adding.

(12) Add to Cart Buttons Lack Visual Dominance

The buttons visually fade into the design and there are no alignments. In addition, users cannot select multiple cupcakes at once, which is time-consuming.​

(13) The Layout Feels Structturally Broken

The cart content and pricing summary feels visualy disconnected. 

cupcake.png

(10)

(11)

(12)

purchase.png

(13)

(14)

(14) The "Continue Shopping" Competes With "Place Order"

"Continue Shopping" button presents an escape route at the exact moment of closing sale. All buttons look equally impoertant and creates confusion.

(1) Navigation Clarity Problem

The hamburger menue on desktopm is risky unless extreamly minimal.

(2) Visual Noise

Too many interruptions before the user even engage such as Tariff banner, announcment bar, Logos.

(3) Missing Shopping Cart Visibility

The shopping cart is not clearly accessible, creating uncertainty around the purchasing process and potentially discouraging order completion.

(4) Chat Widget Placement is Disruptive

The chat bubble overlaps key contents.

(5) Paragraph is Too Dence

Large blocks of text reduce scannability.

(6) CTA Lacks Priority

The "Order Now" button is small and visually lost.

(7) Weak Information Hierarchy

Every heading looks similar in size and visual weight and as a result user cannot tell what matters.

(8) Value Proposition Repetition Without Strength

Multiple sections say roughly the same thing such as "fresh", "great for occasions", and "many flavors" but none say it in a memorable way.

Usability Recommendations

High Impact

Medium Impact

Low Impact

Addressing these recommendations will reduce friction, improve usability, and support a more seamless purchasing experience.

  • Strengthen primary CTAs: Make Order Now, Add to Cart and Checkout visually dominant to guide user actions.

  • Clarify the homepage value proposition: Communicate key benefits.

  • Prioritize checkout in the cart: Emphasize the total cost and make the checkout button the most prominent element.

  • Improve visual hierarchy: Use clear heading levels, spacing, and contrast to direct attention.

  • Break up dense text: Replace large paragraphs with feature highlights for easier scanning.

  • Redesign product cards: Apply a consistent structure to enhance browseability.

  • Reduce visual noise: Minimaze distracting banners and pop-ups.

  • Remove early frictions: Default quantities to one and allow edits in the cart.

  • Introduce filtering and sorting: Help users to navigate large product selection more efficiently.

bottom of page