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.
Problem definition and solutions
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.
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
Busy Professional - Sarah
Occupation: Marketing Manager
Location: Downtown Toronto
Family: Single, no children
Income: $85,000/year
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
Behaviors:
Uses her smartphone for most online activities
Often orders late in the evening after work
Prefers businesses with clear communication and reliable delivery
Quotes:
"I need to be able to order cupcakes for my team quickly, without it eating into my workday."
"It's important that I can easily find ingredient information to accommodate everyone's dietary needs."
Party Planner - Michael
Occupation: Event Coordinator
Location: Mississauga, Ontario
Family: Married, two children (ages 10 and 12)
Income: $110,000/year
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
Behaviors:
Prefers to thoroughly research vendors before committing
Often works on multiple events simultaneously
Values building long-term relationships with reliable suppliers
Quotes:
"I need a cupcake vendor who can handle orders of 500+ cupcakes and offer custom designs."
"Reliable delivery and consistent quality are non-negotiable for my events."
Sweet Tooth - Emma
Occupation: Graphic Designer
Location: Liberty Village, Toronto
Family: In a relationship, no children
Income: $65,000/year
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
Behaviors:
Frequently browses food-related websites and Instagram for inspiration
Orders cupcakes for personal enjoyment and small gatherings with friends
Values aesthetics and presentation as much as taste
Quotes:
"I'm always on the lookout for cupcakes that are as beautiful as they are delicious."
"Having vegan options is a huge plus for me and my friends."
Design process
Conducted user interviews and surveys
Analyzed existing website analytics
Created user personas
Developed empathy maps to understand user needs and pain points
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
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
Created low-fidelity wireframes for key user flows
Developed interactive prototypes using Figma
Iterated on designs based on internal feedback
Analyzed usability test results
Prioritized and implemented design changes
Conducted additional rounds of testing as needed
Collaborated with developers to ensure design integrity
Provided design specifications and assets
Conducted regular check-ins during development to address any issues
Monitored key performance indicators post-launch
Conducted post-launch user surveys
Identified areas for future improvements and feature additions
Wireframes
Final design
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.