UX/UI Designer
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
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)
(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.
(10)
(11)
(12)
(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.