Redesigning the Toronto Cupcakes website around what customers actually wanted: easier browsing, more product detail, customisation, and a checkout that didn't feel like a tax form.
Toronto Cupcakes is a beloved local bakery known for its warmth and creativity. Their website didn't reflect that. The browsing experience was crowded, product pages were thin on detail, and the checkout was long enough to lose people halfway through.
The brief was simple: redesign the experience around how people actually buy a cupcake. Discover something good, customise it, gift it if they want, and check out without friction.
We ran three usability sessions with the prototype. The goal wasn't to confirm what we already believed, it was to find what we'd missed. The sessions surfaced four concrete changes that went into the next iteration:
The most useful part of testing was hearing how people described the friction in their own words. These five quotes shaped the redesign more than any heuristic could.
We didn't pile on features for the sake of it. Each one came directly from a real user comment in testing.
The before-and-after wasn't about prettier pixels. It was about restructuring the flow so customers could complete a purchase without thinking too hard.
Before: a wall of cupcake thumbnails, manual quantity selection per item, no filters, no nutrition info, generic add-to-cart buttons.
After: filters at the top, product cards with rating and calorie info, a clear "always available" lineup, dedicated product pages with rich detail and customisation, and a checkout flow with breadcrumbs that always told users where they were.
A bakery's website should feel like the bakery — warm, generous, and easy to walk into.
Toronto Cupcakes already had a strong palette. Our job was to organise it into a system that scaled across product pages, cart, and checkout without losing the bakery feel.
Poppins for everything. A clean, friendly Google Font that reads well at every size and feels modern without being cold.
A six-step heading scale from 56px down to 20px gave us hierarchy without inventing dozens of variants.
Mulberry as the primary brand colour, baby pink for soft touches, black and white for structure and clarity.
The final design simplified browsing through filters, gave each product its own dedicated page with the detail customers asked for, made customisation a first-class action instead of a hidden menu, and tightened the checkout to the screens that actually mattered.
Both a mobile and a web prototype were delivered, with consistent flows across both.
Listen for the surprise. Almost every change in the final design came from a sentence a user said in testing that we hadn't anticipated. The redesign was built out of those moments.
Cut more than you add. The most impactful change was removing the separate email-tracking page. Subtraction is design too.
Customisation belongs near the cart. Once we moved adjustments to the cart itself, completion rates in testing felt different. People stopped backtracking.