top of page
Cup_Bild_Main

  • Toronto Cupcake is a website redesigned to enhance user experience.
     

  • It offers fresh, handmade cupcakes made with the finest ingredients and over 10 years of experience.
     

  • The site provides custom cupcakes for all occasions, including gluten-free and nut-free options.
     

  • Easy navigation, quick delivery across Toronto, and personalized orders make the shopping experience seamless.

PROJECT OVERVIEW

 Duration                                                    Team                                                       Role                                                    Tools​

2 months                                            Group of four                           UX/UI and Graphic Designer                   Figma, Miro,  Canva                                                                                                                                                                                          Photoshop,  Illustrator

Problem Statement:
 

  • Need: Toronto Cupcake needs a modern, user-friendly website to easily meet the growing demand for fresh, customized cupcakes. Customers are looking for a seamless online shopping experience, simple navigation, and fast delivery.
     

  • Current Gap: The previous website lacked proper navigation and had a cluttered design, which caused confusion for users. Information was mixed together without clear categorization, making it difficult for users to find what they were looking for. These issues led to a poor user experience and lost customers.
     

  • Rebranding: The client requested a complete rebranding, which is why the logo and colors were completely updated to create a fresh brand identity and make the online shopping experience more convenient and appealing to users.

Goals:
 

  • Improving User Experience (UX): Designing a website with simple navigation and an optimized user experience that makes it easy for customers to find and order the products they want.
     

  • Modern Design Focused on Cupcake Sales and Rebranding: Updating the website design to immediately communicate the focus on fresh cupcakes, while showcasing the new logo and color scheme of Toronto Cupcake.
     

  • Customizing Orders: Providing easy and quick customization options for cupcakes, allowing customers to personalize them for any occasion.

Key Challenges & Solutions:​​

Poor Navigation

Simplify the navigation with clear categories for easy browsing and ordering

Personalization Limitations

Introduce quick and easy customization options for personalized cupcakes

Mobile Optimization Issues

Implement a mobile-first design to ensure smooth performance on all devices

The Process

127

Discover

Define

Develop

Deliver

Discover

Business Analysis
 

  • Fresh, Delicious Cupcakes: Baked daily using the finest ingredients to offer Canada’s most delicious cupcakes.
     

  • 10 Years of Experience: Expertise in creating cupcakes for all occasions, with options for customization based on individual tastes.
     

  • Dietary Options: Gluten-free and nut-free cupcakes available for special dietary needs.
     

  • Community Support: Donating cupcakes, time, and care to charitable causes.
     

  • Fast Delivery: Most deliveries made the same day, available across Toronto, the GTA, and beyond.
     

  • Delivery Windows:

    • Toronto: 8 AM - 12 PM, 12 PM - 6 PM

    • Outside Toronto: 12 PM - 6 PM
       

  • Order Minimums:

    • Minimum order of 1/2 dozen assorted cupcakes.

    • For personalized orders, 48 hours' notice required.
       

  • Delivery Fees:

    • Delivery available to downtown Toronto and surrounding areas, with free or discounted rates for larger orders.

Before the Redesign​

Toronto Cupcake 16
Toronto Cupcake 18
Toronto Cupcake 17

Heuristic Evaluation:
 

A heuristic evaluation is like a deep dive into a website’s design, uncovering areas that need improvement. For Toronto Cupcake, we focused on enhancing usability, speed, and navigation, leading to a redesign that offers a smoother, more enjoyable shopping experience.
​

1. Visibility of System Status:
In the old site, users couldn’t track progress due to missing "added to cart" signs, no user guide, and unclear cupcake box interactions. The new design clearly shows each step, with easy access to product details like price and ingredients.
 

2. User Control and Freedom:
Missing features like search boxes, close icons, and undo options made navigation difficult before. Now, the design includes clear "back" and "exit" buttons, enhancing the overall user experience and making it easier to check reviews or customize products.
 

3. Consistency and Standards:
The old site had scattered information and an inconsistent design. Now, key features like accounts and shopping carts are always at the top, offering a more unified and accessible experience.
 

4. Flexibility and Efficiency of Use:
The previous site lacked customization and features like favorites or contact info. The new design offers more personalization and a faster, clearer process.
 

5. Aesthetic and Minimalist Design:
The previous design was cluttered with unclear information, mismatched visuals, and long texts. The new design is clean and minimal, focusing only on essential details for a much better visual experience.
 

6. Help and Documentation:
Previously, support was hard to find. The new design includes visible live chat and a contact number, so users can easily get help when needed.

128

5

1

129

3

2

1

6

4

4

5

Competitive Analysis
 

This competitive analysis compares Toronto Cupcake’s website with both direct competitors and major industry players. The goal is to identify gaps and areas for improvement based on observed strengths and weaknesses.

CompetitiveAnalysisTC 19

Opportunities for Toronto Cupcake:
 

  • Add a Reviews section.
     

  • Introduce Order Tracking.
     

  • Implement a Flavor Filter.
     

  • Clearly define USPs.

Competitors' Weaknesses:
 

  • Reviews section is missing on some sites.
     

  • Order Tracking is absent on several platforms.
     

  • Flavor Filter is not available on a few websites.
     

  • USPs are not clearly defined on many sites.

Key Takeaways:

This competitive analysis compares Toronto Cupcake’s website with both direct competitors and major industry players.The goal is to identify gaps and areas for improvement based on observed strengths and weaknesses.

SWOT Analysis

SWOT 20

User Behavior Analysis: Page Views & Click Intensity
 

The Google Analytics chart shows the trend of Page Views and Bounce Rate over time, offering insights into user engagement with the site. The heatmap visualizes user click intensity across different regions of the webpage, highlighting areas of high interaction. Together, these charts provide valuable data to optimize the user experience and identify key areas for improvement on the Toronto Cupcake website.

output Toronto Cupcake 21
Toronto Cupcake 22

Define

Persona

​Name: Jimi Walsh      Age: 34               
Location: Toronto
Occupation: BMW Customer Service Representative 

Background:
Jimi works at BMW and loves exploring cafes with his wife to try new sweets.
He dreams of opening a café in downtown Toronto.


Goals:

  • Order customized cupcakes for BMW’s corporate events.

  • Open his own café specializing in sweets.

  • Strengthen relationships with clients and colleagues through memorable events.


Needs:

  • Corporate Orders: Customized cupcakes with the BMW logo for events.

  • Bulk Orders: Quick and efficient ordering for large quantities.

  • Simple Online System: Easy process for customization and bulk ordering.


Frustrations:

  • Struggles to find a service offering high-quality, customizable cupcakes in bulk.

  • Frustrated by complicated ordering systems and limited options for corporate events.


Activities:

  • Visiting cafes to try new sweets and coffee.

  • Planning corporate events and looking for creative ways to engage clients.

PersonaTC 23

"You can’t be sad when you're holding sweet people in your life"

Scenario:  Jimi Walsh’s Experience Ordering Corporate Event Cupcakes
 

Scenario:
Jimi Walsh, a BMW Customer Service Representative, wants to order customized cupcakes for his company’s anniversary celebration. He’s looking for a reliable service that allows him to order in bulk and add the BMW logo to each cupcake. Jimi needs an easy, quick online ordering process, as the event is approaching fast.

User Journey Steps:
1. Awareness:

  • Action: Jimi searches online for "customized cupcakes for corporate events."

  • Touchpoint: Google search, Toronto Cupcake website.

  • Emotion: Curious but a bit overwhelmed by the number of options available.


2. Exploration:

  • Action: Jimi visits the Toronto Cupcake website and browses through the customization options.

  • Touchpoint: Website’s homepage, cupcakes section, and corporate orders page.

  • Emotion: Interested, impressed with clear product offerings, but unsure about the customization details.
     

3. Consideration:

  • Action: Jimi clicks on the “Order Now” button and navigates to the product page to customize cupcakes with the BMW logo and bulk order features.

  • Touchpoint: Customization page, logo upload section, and order quantity options.

  • Emotion: Relieved to find that customization is possible, but slightly concerned about the order deadline.

  • Reassurance: He notices the customer support phone number and live chat feature on the page, which eases his concerns about delivery timing. He feels more confident that any issues can be addressed quickly.
     

4. Decision:

  • Action: Jimi fills in the order details, uploads the BMW logo, selects the quantity, and finalizes the order.

  • Touchpoint: Checkout page, payment options, order confirmation.

  • Emotion: Confident but slightly anxious about the delivery timing for such a large order.


5. Post-Order:

  • Action: Jimi receives a confirmation email with order details and an estimated delivery time.

  • Touchpoint: Email confirmation, customer support follow-up.

  • Emotion: Satisfied with the smooth process, relieved that the event planning is on track.
     

Outcome:

  • Successful Outcome: Jimi successfully orders a bulk of customized cupcakes with the BMW logo for the corporate anniversary event. The cupcakes are delivered on time, and the company is impressed with the personalized touch.

  • Impact: Jimi strengthens his relationship with colleagues and clients by organizing a memorable event, enhancing his reputation within the company.

Card Sorting 
 

This card sorting was created based on user research and analysis to effectively organize site information and enhance the user experience. Its goal is to provide easier access to various products and services.

Toronto Cupcake 32

Site Map
 

This sitemap outlines the main sections of the Toronto Cupcake website, including Products, Orders, Customer Service, Discounts, Blog, and Contact Information, ensuring easy navigation for users.

SiteMapTC 24

Develop

User Flow
 

The user flow for Toronto Cupcake is designed based on our persona, mapping out the customer journey from discovering the perfect cupcake to completing the order seamlessly. It ensures an intuitive and personalized experience, tailored to the needs and preferences of our target user.​

Toronto Cupcake 33

Iteration
 

In the Iteration phase of the Toronto Cupcake redesign, the focus was on refining the design based on usability testing and feedback. After gathering initial feedback, we iterated on the design to address user pain points and enhance the overall experience. This included adjustments to user interactions, visual elements, and navigation flow.
 

Further rounds of testing and continuous improvement helped finalize the design, ensuring it met the needs of our target users. The refined design was then passed on to the development team for final implementation and preparation for launch.
 

After the initial iterations and changes in the early wireframes and visuals, we moved on to mid-fidelity wireframes that provided a more detailed structure and clearer design direction.

Toronto Cupcake 38
Toronto Cupcake 39
Toronto Cupcake 40
Toronto Cupcake 41

Wireframing
 

The wireframe for Toronto Cupcake was created using a mid-fidelity model. Based on our research, we determined that the mobile version is more critical for this business, so the mobile design was developed first, followed by the desktop version. This approach allows us to optimize the user experience on mobile.

Toronto Cupcake 25
Toronto Cupcake 26
Toronto Cupcake 28
Toronto Cupcake 27
Toronto Cupcake 29
Toronto Cupcake 30
Toronto Cupcake 31

Desktop Version

Toronto Cupcake 35
Toronto Cupcake 37
Toronto Cupcake 36
Toronto Cupcake 34

Deliver

Visual Design
 

To ensure a consistent and engaging interface, a UI kit was developed based on the new brand style. It defines the colors, typography, and components used throughout the website.

Toronto Cupcake 42

Usability & Iteration
 

Following user testing of the initial user flow and wireframes, we identified key areas that needed improvement:

  • Users expressed confusion around unclear screen transitions and next steps.
    For example, several users hesitated after the customization step, unsure if their choices had been saved.

  • Some steps were perceived as repetitive, causing unnecessary friction.
    For instance, users were asked to review the order twice before checkout, which felt redundant.

  • The lack of a clear content hierarchy made navigation feel overwhelming.
    One user mentioned that they couldn’t easily find the allergy-friendly options, even though they were present.
     

Based on these insights, changes were made to the structure to address these issues:

  • Unnecessary steps were reduced, resulting in a more streamlined user journey.

  • The hierarchy of content was clarified to improve the logical flow between screens.

  • Call-to-actions and decision points were revised to enhance clarity and usability.

Toronto Cupcake 43

User-Centric Mobile Design
 

Research revealed that most users access the site via mobile devices. With that in mind, the high-fidelity design process started with the mobile version to ensure the best possible experience for our target audience.

111
116
112
117
113
118
114
115

Desktop Version Adaptation
 

The desktop version was designed after finalizing the mobile layout, ensuring consistency across devices while optimizing for larger screens and extended interactions.s.

1.Main Desktop 119
124
120
122
121
123
125
126

Key Results:
 

  • Improved user flow reduced unnecessary steps in the ordering process.

  • Customization options became more accessible and user-friendly.

  • Visual clarity enhanced through a clean and consistent UI.

  • Allergy-friendly filters and delivery details were easier to find.

  • Mobile-first design improved usability on smaller devices.

Next Steps:
 

  • A follow-up usability test is planned to assess the design in real-world use.

  • Adding more filtering options like gluten-free and nut-free is under consideration.

  • Potential features such as a loyalty program or quick reorder may be explored.

  • Further improvements in performance and SEO are being evaluated.

  • Ongoing user data will be monitored to inform future design updates.

bottom of page