Toronto Cupcake

Toronto Cupcake is a local bakery specializing in gourmet cupcakes. The goal of this project was to redesign their website to improve user experience, increase online orders, and better showcase their product range.

Hotspot image

Problem definition and solutions

Problem Definition

Mobile User Experience Gap

Problem: Despite 60% of traffic coming from mobile devices, the mobile conversion rate was 25% lower than desktop.
Impact: Significant loss of potential orders and revenue from mobile users.

Inefficient Ordering Process

Problem: Users found the current ordering process cumbersome and time-consuming.
Impact: High cart abandonment rate (45%) and low overall conversion rate (2%).

Lack of Customization Options

Problem: The website didn’t offer sufficient customization options for flavors, designs, and bulk orders.
Impact: Difficulty in meeting the needs of event planners and losing potential high-value orders.

Poor Product Visualization

Problem: Product images were low quality and didn’t accurately represent the cupcakes.
Impact: Users were hesitant to place orders, particularly for special occasions.

Insufficient Dietary Information

Problem: Lack of clear information about ingredients and dietary options (vegan, gluten-free, etc.).
Impact: Users with dietary restrictions or allergies were unable to confidently place orders.

Design Solutions

Responsive Design

Solution: Implemented a fully responsive design with a mobile-first approach.
Features:

Streamlined mobile checkout process
Touch-friendly interface elements
Optimized image loading for faster mobile performance

Expected Impact: Increase mobile conversion rates by at least 20%.

Simplified Ordering Flow

Solution: Redesigned the ordering process to be more intuitive and efficient.
Features:

One-page checkout option
Guest checkout available
Progress indicator for multi-step orders

Expected Impact: Reduce cart abandonment rate by 15% and increase overall conversion rate to 3.5%.

Advanced Customization Interface

Solution: Developed a comprehensive customization tool for orders.
Features:

Mix-and-match flavors in bulk orders
Custom topping selection
Special dietary options for each cupcake type

Expected Impact: Increase average order value by 20% and improve satisfaction for event planner persona.

Enhanced Product Showcase

Solution: Revamped the product imagery and presentation.
Features:

High-resolution, zoomable product photos
360-degree view for specialty cupcakes
User-generated content integration for social proof

Expected Impact: Increase user engagement time on product pages by 30% and boost confidence in online ordering.

Comprehensive Dietary Information System

Solution: Implemented a clear and detailed ingredient and allergen labeling system.
Features:

Filterable product catalog by dietary restrictions
Expandable ingredient list for each product
Prominent allergen warnings

Expected Impact: Increase orders from users with dietary restrictions by 25%.

Intelligent Product Recommendations

Solution: Implemented a smart recommendation engine.
Features:

“Frequently bought together” suggestions
Personalized recommendations based on browsing history
Seasonal and event-based cupcake bundles

Expected Impact: Increase cross-selling by 10% and improve overall user experience.

User Personas

Team member

Busy Professional - Sarah

Sarah is a 32-year-old Marketing Manager at a fast-paced tech startup in downtown Toronto. She's always on the go, juggling multiple projects and client meetings. Sarah is health-conscious but has a sweet tooth and enjoys treating herself and her team to cupcakes after successful project launches. She's tech-savvy and prefers to do most of her shopping online to save time.

Goals:

Find a quick and efficient way to order cupcakes for team celebrations
Easily browse flavors and place orders during her short breaks
Schedule deliveries in advance for upcoming events

Pain Points:

Limited time to spend on ordering process
Needs clear information about ingredients due to team members' allergies
Frustrated by websites that aren't mobile-friendly

Team member

Party Planner - Michael

Michael is a 45-year-old Event Coordinator who runs his own small event planning business. He specializes in corporate events and weddings in the Greater Toronto Area. Michael prides himself on attention to detail and always strives to exceed his clients' expectations. He's looking for reliable vendors who can handle large orders and offer customization options.

Goals:

Find a cupcake vendor capable of handling large, custom orders
Offer clients a wide variety of flavors and designs to choose from
Ensure reliable delivery for events

Pain Points:

Difficulty finding detailed information about bulk pricing and customization options
Concerned about consistency and quality for large orders
Needs flexible delivery options for various event venues

Team member

Sweet Tooth - Emma

Emma is a 26-year-old Graphic Designer who works remotely for a digital marketing agency. She's a food enthusiast and loves trying new, Instagram-worthy treats. Emma is very active on social media and often shares her culinary discoveries with her followers. She's conscious about her diet and appreciates businesses that offer vegan and gluten-free options.

Goals:

Discover unique and photogenic cupcake flavors
Find cupcakes that align with her occasional vegan diet
Share her cupcake experiences on social media

Pain Points:

Disappointed by cupcakes that look better in photos than in reality
Frustrated when vegan options are limited or uninspired
Dislikes websites with poor visual design or low-quality product photos

Design process

Empathize

Conducted user interviews and surveys
Analyzed existing website analytics
Created user personas
Developed empathy maps to understand user needs and pain points

Define

Synthesized research findings
Identified key user needs and business goals
Defined problem statements and how-might-we questions
Prioritized features based on user impact and business value

Ideate

Conducted brainstorming sessions with the design team
Used techniques such as crazy 8’s and mind mapping
Generated a wide range of potential solutions
Evaluated and prioritized ideas based on feasibility and impact

Prototype

Created low-fidelity wireframes for key user flows
Developed interactive prototypes using Figma
Iterated on designs based on internal feedback

Iterate

Analyzed usability test results
Prioritized and implemented design changes
Conducted additional rounds of testing as needed

Implement

Collaborated with developers to ensure design integrity
Provided design specifications and assets
Conducted regular check-ins during development to address any issues

Evaluate

Monitored key performance indicators post-launch
Conducted post-launch user surveys
Identified areas for future improvements and feature additions

Final design

Image module
Image module
Image module

Desktop

Mobile

Lessons learned

  • Mobile optimization is crucial for e-commerce success, especially for local businesses.
  • Clear, high-quality product imagery can significantly impact user engagement and conversions.
  • Customization options can lead to higher order values and customer satisfaction.
  • Addressing specific user needs (e.g., dietary restrictions, bulk ordering) can set a business apart from competitors.

Next Steps

  • Implement a "Favorites" feature for repeat customers.
  • Develop a loyalty program to encourage repeat orders.
  • Integrate user-generated content to showcase customer creations and build community.
  • Conduct ongoing user research to identify new opportunities for improvement and innovation.