Ordering cupcakes for an event, made quick and confident

Small-batch cupcakes for every celebration in Toronto and the GTA.

Toronto Cupcakes is a local bakery selling handmade cupcakes, celebration cakes and gift boxes online, with delivery across Toronto and the GTA. Customers order for birthdays, office celebrations, weddings and holidays, often for a specific day and time. The business earns its revenue from direct online orders, custom orders and corporate gifting.

View prototype ↗

I worked on this project for two months as the UX and UI designer, collaborating with my team throughout. I contributed to the research, card sorting and information architecture, and designed the final UI, design system and clickable prototype in Figma and FigJam.

Toronto Cupcakes already had a website, and our task was to redesign it. The existing site was hard to scan: spacing and fonts were inconsistent (ten font families on one page), categories were unclear, and the checkout showed a total that did not match the cart. The redesign had to cover browsing cupcakes, custom orders, corporate gifting and occasions, plus a clear cart and checkout with a chosen delivery day and time.

Instead of a competitive analysis, I started with the people who order: I ran interviews and a survey, then turned what they told me into an open card sort to learn how they expect a bakery site to be organized.

Using the content and wording from the interviews and survey, I ran an open card sort. Participants grouped the site's content into their own categories. Cleaned-up results (typos fixed, duplicates merged) — then the insights that shaped the navigation.

Card-sort groups became the site map. The final navigation keeps five top-level items; delivery, help, about and policies moved to the footer, so the header stays short.

The scenario as a linear flow — from landing on the site to checking her order status.

Every click and decision Shirin makes. Diamonds are decisions — YES continues adding, NO moves on to checkout.

Quick explorations of the homepage, listing, product and checkout before moving to Figma.

After the sketches I built a low-fidelity wireframe of the homepage, then redesigned every page. Each board puts the original torontocupcake.com page beside the redesign, with notes on what changed and why.

To fix the inconsistencies from the first prototype, I built the design on Figma variables instead of hand-picked values. Because every screen uses these tokens, changing the brand direction later updates the whole site at once.

I explored seven visual directions and chose Bakery Classic: a long-scroll homepage in espresso and crimson with a soft pink accent. Every page shares the same header, footer and tokens, and each nav item has its own page.

A usability test with five people who order baked goods for events, using Shirin's scenario as the task: order 2 chocolate, 1 vanilla and 1 gluten-free lemon cupcake for delivery tomorrow, then check the order status. I'll iterate on the checkout first, where the first prototype had the most problems.

Comparing the research with the final screens surfaced a few gaps worth fixing before testing.

The redesign turned a hard-to-scan bakery site into a guided ordering experience: clear categories, five focused navigation items, consistent tokens and a checkout whose totals match at every step.

This project taught me how card sorting shapes navigation, and how a design system makes a whole site consistent and quick to change. With the timeline I had, I prioritized browsing and the core purchase journey. With more time I would test the custom order and corporate quote flows with real customers.