Toronto Cupcake Website Redesign | Kathan Shah Designs

Project Team

Individual

Project Duration

1 month

Tools

Adobe XD

Photoshop

FigJam

Whimsical

Key Responsibilities

UX Research, UX Design, Competitive and Task analysis, Wireframing, Prototyping

Overview

Redesigned the Toronto Cupcake website with optimized user experience and enhanced brand appeal.
Utilized research insights and user feedback for informed design decisions, resulting in a user-centric platform.
Integrated brand identity for a cohesive and memorable representation of Toronto Cupcake.
Enhanced website visuals with high-quality imagery, creating an engaging and captivating user interface.
The website's navigation and information architecture were reorganized, ensuring that users could easily find and access relevant content, resulting in an intuitive and satisfying browsing experience.

Toronto Cupcake Prototype

At a glance

Brief overview of the entire project

What is Toronto Cupcake?

The Toronto Cupcake website is an online platform that offers an exquisite selection of gourmet cupcakes and chocolate confections in Canada. Their delightful treats are handcrafted with the finest ingredients, offering over 30 daily flavors with customizable options for special occasions. From birthdays and weddings to baby showers and anniversaries, Toronto Cupcake caters to diverse events with a focus on delivering handcrafted delights made from the finest ingredients.

Problem

Inefficient Navigation: The menu bar's hidden main menu, represented by the hamburger icon, made it challenging for users to navigate the website efficiently. This could result in a confusing user experience and a higher bounce rate.
Lack of Consistency: The website lacked a general structure and consistent color palette across different web pages, leading to an inconsistent user experience.
Quality of Cupcake Photos: The quality of cupcake photos on the website needed improvement to enhance the overall visual appeal and entice customers.
Checkout and Payment Process Concerns: Users encountered difficulties with the checkout and payment processes, which raised concerns about the overall user experience and could potentially lead to cart abandonment.

Goals

Improve the overall user experience on the Toronto Cupcake website to increase user engagement and encourage seamless navigation.

Enhance User Experience

Create a new branding strategy that effectively communicates the identity of Toronto Cupcake and establishes a unique brand presence.

Rebranding

Design a user-friendly navigation that allows visitors to easily find relevant information, minimizing the number of clicks required to access key sections.

Intuitive Navigation

Solution

Improved Visuals: Update the product images to high-quality photos, showcasing the cupcakes and chocolate confections in an appealing manner to match the brand's identity of simplicity and elegance.
Clear Information Architecture: Revise the site map to create a clearer information architecture, making it easier for users to navigate and find relevant information without getting lost.
Branding and Identity Integration: Integrate the new branding elements into the website's UI design, ensuring consistency throughout the site and reinforcing Toronto Cupcake's unique brand identity.
Streamlined Checkout Process: Analyze competitor websites to understand efficient checkout processes, and then streamline Toronto Cupcake's checkout process to reduce the number of screens and steps required for completion.

User Interviews

I conducted interviews with four potential customers who ordered a dozen cupcakes through Toronto Cupcake's website. These interviews provided me with essential firsthand insights into their experiences, preferences, and challenges while interacting with the website. These valuable insights allowed me to identify areas for improvement and refine the user experience to ensure seamless and delightful cupcake-ordering journeys.

Methodology

Participants were selected based on their potential as representative users of the target audience, considering factors such as age, location, and cupcake-buying habits.

Interviews were conducted either in person or remotely, depending on participants' preferences and accessibility.
Participants were given the task of ordering a dozen cupcakes through the Toronto Cupcake website.
Open-ended questions allowed participants to share candid and insightful feedback.
The interviews provided valuable firsthand insights into user preferences, pain points, and expectations.

Key Insights

Navigation and Usability: Users encountered difficulties with website navigation, particularly during the checkout process. They sought clearer and more intuitive pathways for efficient order completion.
First Impressions: Visual appeal, including low-quality product images, significantly influenced users' initial impressions of Toronto Cupcake, capturing their attention.
Website Responsiveness: Users valued seamless and responsive experiences across various devices, emphasizing the need for mobile-friendly design.
Checkout Process: Concerns were raised about the checkout and payment process, highlighting the importance of a streamlined and secure flow to instill user confidence.

Outcomes

The user interviews provided valuable qualitative data, shaping subsequent stages of the UX design process.
Understanding user needs and preferences enabled me to identify specific areas for improvement and optimize the website.
As a result, these insights guided my design decisions, creating a user-friendly and visually captivating website for Toronto Cupcake.
The enhanced user experience aims to increase user confidence and foster greater engagement with the Toronto Cupcake brand online.

Competitive Analysis

I conducted a comprehensive competitive analysis to gain valuable insights into how Toronto Cupcake's main competitors are catering to their customers' needs. I thoroughly examined the design and functionality of various cupcake websites to gain valuable insights into industry trends and best practices.

This competitive analysis enabled me to make informed design decisions and implement strategies to ensure Toronto Cupcake's website stands out in the competitive market, offering a superior user experience to its customers.

The analysis involved evaluating the websites of

Methodology

Selection of Competitors: I carefully selected the main competitors in the gourmet cupcakes industry to ensure a relevant and representative comparison.
Website Evaluation: I thoroughly examined each competitor's website, assessing aspects such as user interface, navigation, visual design, product presentation, and the checkout process.
Feature Analysis: I identified and analyzed key features, including customization options, customer reviews, promotional campaigns, and loyalty programs, to understand their impact on the overall user experience.

Competitive Analysis

Outcome

The insights gained from the competitive analysis informed the UX design decisions for Toronto Cupcake's website.
By understanding the successful features and industry best practices of competitors, I aimed to create a website that not only differentiates Toronto Cupcake from its competitors but also provides a delightful and user-friendly experience for its customers.

Task Analysis

I conducted a task analysis of the Toronto Cupcake website, focusing on the checkout flow and its comparison with competitors' streamlined processes. This analysis identified pain points and areas for improvement, leading to a streamlined user experience, and intuitive website navigation.

Methodology

Defining Tasks: I focused on the task of placing an order for a dozen cupcakes on the Toronto Cupcake's website. I also examined how competitors facilitated the same task on their respective websites.
Step-by-Step Evaluation: I broke down the checkout process into individual steps, noting the actions required by users at each stage.
Comparative Assessment: I then compared the number of steps and screens needed to complete the checkout process on Toronto Cupcake's website with those of its competitors.

Task Analysis

Outcome

The task analysis findings provided valuable insights into the checkout process on Toronto Cupcake's website and its competitors. The analysis also helped me prioritize design changes that would lead to higher customer satisfaction and increased conversion rates on the website.

Design

Branding and Identity

I developed a compelling brand strategy for Toronto Cupcake, aiming to differentiate it in the competitive gourmet cupcakes market. To visually represent the brand, I carefully selected a complementary color palette and typography and established clear guidelines for imagery. These elements reflected Toronto Cupcake's essence of simplicity, elegance, and joy, creating a cohesive brand identity.

Design Components

Sitemap

I analyzed and improved the website's navigation to create a more user-friendly experience. By restructuring and grouping similar pages together, I enhanced the site's information architecture, making it easier for users to access relevant content and reducing navigation complexities.

Previous Sitemap

The previous sitemap of the Toronto Cupcake website had a relatively complex navigation structure, which users found confusing.
The main menu was hidden behind a hamburger icon, requiring users to click multiple times to access essential pages like the Menu, About Us, and Events.
This lack of a clear and consistent information architecture led to a disjointed user experience, potentially resulting in higher bounce rates and decreased user satisfaction.

Revised Sitemap

The revised sitemap focused on simplifying navigation and improving the website's information architecture.
I grouped similar pages together under relevant categories to provide users with a more intuitive and straightforward browsing experience.
The revised sitemap now features a visible and accessible main menu on the Home page, allowing users to quickly navigate to key sections such as Menu, About Us, and Events.

Current Sitemap

Proposed Sitemap

Wireframe

I translated the research findings into detailed and visually clear blueprints for the key pages of the Toronto Cupcake website. By strategically arranging elements and content, I ensured an intuitive user experience and easy navigation.

This iterative process allowed for feedback and refinements, resulting in a visually appealing and user-centric website design that aligns with the project's objectives.

Home Page

About Page

Menu Page

Events Page

Prototype

I created a fully functional prototype of The Toronto Cupcake website, allowing users to interact with the website as if it were live and providing a realistic and immersive user experience. By incorporating all design elements, navigation features, and user interactions, the prototype served as a valuable tool for testing and validating the user interface and user experience.

Home Page

About Page

Menu Page

Events Page

Impact

The prototype received feedback from multiple users, leading to iterative design improvements and an increase in overall user satisfaction.
The interactive nature of the prototype improved user engagement and provided a realistic understanding of the website's functionality.
The prototype provided valuable insights that informed design choices and prioritized user-centric features, resulting in an impactful and user-friendly website design.
The prototype effectively communicated the project's direction and objectives, aligning users for a seamless design process.

What did I learn?

Competitive and Task Analysis: Conducted thorough analysis of competitors' websites and evaluated user task flows to identify best practices and optimize Toronto Cupcake's website for a more streamlined and user-friendly experience.
Brand Customer Experience: Working with a brand provided insights into defining and aligning the website's customer experience with the brand identity, creating a cohesive and memorable brand impression.
Feedback Transformation: Transformed user feedback into opportunities for enhancement, iterating and refining the design to meet user needs more effectively.

Future Consideration

Customer Support: Implement a responsive customer support system, including live chat or a dedicated contact form, to address inquiries and concerns promptly.
Social Media Integration: Integrate social media platforms to leverage user-generated content, engage with customers, and increase brand awareness.
Enhanced Visuals: Invest in professional food photography to showcase high-quality images of cupcakes, enticing users and reinforcing the brand's premium image.
Mobile Optimization: Prioritize mobile optimization to cater to the increasing number of users accessing the website from mobile devices.

View All Projects