Imagine craving a cupcake, only to find yourself lost in a maze of cluttered pages, hidden prices, and confusing navigation. For users of Toronto Cupcake (www.torontocupcake.com), this was all too real. As a UX designer, I saw an opportunity to transform this local e-commerce gem into a delightful, user-friendly experience that matches the joy of its treats.
Toronto Cupcake, a beloved online bakery, had a loyal following but was losing potential customers due to usability hurdles. My mission? To uncover pain points, design solutions, and deliver a website that not only sells cupcakes but also sweetens the user journey. This case study chronicles how I turned frustration into satisfaction through rigorous research, iterative design, and a sprinkle of creativity.
I mapped the existing checkout user flow (8 screens) against competitors’ (4-5 screens), identifying inefficiencies that fueled a 40% abandonment rate. Navigation lagged 100% behind benchmarks due to poor information architecture (IA). This data pinpointed friction points and informed my redesign strategy.
To bake a better experience, I needed to understand the ingredients—what worked, what didn’t, and why. I employed a multi-method approach: heuristic evaluation, user research, usability testing, and persona development. Each step revealed insights that shaped my strategy.
Using Jakob Nielsen’s 10 heuristics, I audited the website to identify usability gaps. Key findings included:
I surveyed 15 participants—73% aged 18-24, mostly students—to uncover behaviors and preferences. Insights included:
Five participants tackled tasks like finding a Chocolate Ganache cupcake and completing a checkout. Results were telling:
From the data, I crafted two personas:
Before diving into high-fidelity designs, I created low-fidelity wireframes to test core concepts. These rough sketches focused on layout and functionality, addressing the top issues: navigation, pricing visibility, and checkout clarity.
I tested these wireframes informally with peers, confirming that the structure felt intuitive. Feedback helped refine button placement and spacing before moving forward.
To ensure consistency—a major flaw in the original site—I established a simple design system for the redesign. This unified the visual and functional elements, enhancing professionalism and usability.
This system guided the high-fidelity prototype, ensuring a cohesive look and feel across pages.
With the foundation set, I built a high-fidelity prototype to bring the solutions to life. This phase tackled the top issues with detailed, user-tested designs.
The Toronto Cupcake redesign wasn’t just about fixing a website—it was about crafting an experience as delightful as the product itself. By blending rigorous research with thoughtful design, I transformed a clunky platform into a user-friendly treat. This project showcases my ability to dig deep, solve problems, and deliver results that satisfy both users and business goals.
User-Centered Wins: Listening to users uncovered actionable fixes that heuristics alone missed.
Simplicity Scales: Less clutter and clear cues turned frustration into flow.
Iteration Matters: Testing validated solutions, ensuring they hit the mark.
Test the Prototype: Validate improvements with a broader, diverse user group.
Refine Details: Polish visuals and ensure accessibility (e.g., color contrast for vision-impaired users).
Monitor Metrics: Track bounce rates, cart completions, and return visits post-launch.