Toronto Cupcakes is an online e-commerce store that specializes in selling customized and branded cupcakes to corporate and retail clients in the Greater Toronto Area.

Founded by Michelle Harrison, the business is fueled by her passion for baking and a lifelong love for creating delicious treats. These cupcakes are freshly baked everyday, using only the finest ingredients, making them perfect for every occasion.

I. Research

The mission of this E-commerce Project is to redesign Toronto Cupcake's website to:

1. Make it accessible and easy to use for users on desktop and mobile devices.

2. Make it easier to navigate and bu products through any device.

3. Create an online platform for a more enjoyable experience where users feel that they are shopping in a bakery.

This redesign will establish a clear visual hierarchy, optimise call-to-action buttons, and create a visually pleasing interface.

C + C Analysis

I started my research by doing a competitive and comparative analysis using other competitor's websites such as Short & Sweet, Sweet Flour, Bobbette & Belle, Sprinkles, and SSENSE. I look at the visual patterns to find e-commerce trends and best practices. I also explored how brands visually communicated their stories. Through this analysis I realized Toronto Cupcakes needed to visually communicate its story.

While Toronto Cupcakes has thrived through word of mouth, a disconnect exist between the online store and its social media audience.

As a brand that generates a majority of its sales through word of mouth, the website showcased low-brand food photography, didn't provide a detailed description of the product or ingredients, had no clarity on navigation or clear visual hierarchy, or call to action buttons an interface that made it easy to navigate or complete purchases. The site and its SEO practices felt outdated. Customers face challenges in navigating the site due to a small font size and a lost hamburger menu pull out making it difficult to discover new products. The logo, although resembling buttons, is not clickable. Additionally, the food photography lacks appeal, and there are numerous missed opportunities for upselling. These issues highlight the need for a comprehensive redesign to enhance the overall user experience.

Interviews

To address the needs of the users I needed to understand the following:

● Why do the users purchase cupcakes?

● What was important to them in buying a cupcake?

● How do they purchase cupcakes online?

● What have been their experiences?

I interviewed 6 users who had purchased cupcakes online either for themselves or for a special event or occasion in the last few months.

Gave the same users a usability test of the orginal website provided them with a prompt to select a cupcake they would purchase and proceed to checkout. I wanted to understand how they navigated through the website, where they were spending their time, what they enjoyed and where they got stuck. I focused on the homepage because that's where the majority of time was spent.

My Findings

Usability Test: The Orginal Website

Key finding: users were spending too long on the homepage.

1. Users tried to click on each Toronto Cupcake logo at the top (which are not clickable.)
2. The small hamburger menu was not visible to view the full menu.
3. It was hard to read the advertisement that was in the pink bar on top of the page.
4. Users were not sure if clicking on the colour cupcake logo would lead them to another page.
5. Small font made the site hard to read for some users which created accessibility issues.
6. Users almost missed the bottom navigation bar.
7. Some users were trying to click on the Toronto Cupcake title to see if they could get to the Product Page.

User comment: “The website is outdated its from the 90’s and everything is so small. Is there something wrong with the website?”

Interview Findings

● Preferred online platforms to be organized and efficient.

● Would like to know the ingredients in a cupcake.

● Users buy large amounts of cupcakes for birthdays and school events because it is easy.

● Users have fond childhood memories of cupcakes.

● Users like the traditional vanilla and chocolate cupcakes but still would like to explore other flavour combinations.

II. Affinity Map

After all the interviews were completed, I used an affinity diagram to synthesis trends, mapping similar user behaviours, needs, and pain points. I identified two main categories within the general audience and created two personas.

Personas

Esther's Problem Statement:

Esther wants gourmet cupcakes with trendy flavours and the perfect icing-to-cupcake ratio, but the current online bakeries lack a user-friendly interface. She needs a faster way to buy her cupcakes online.

Hazel 's Problem Statement:

Hazel seeks a user-friendly online platform with clear cupcake details and ingredients, crucial for her daughter's gluten allergy. To enhance convenience, she's contemplating a loyalty program. The absence of accessible cupcake details poses a health risk, emphasising the need for an efficient and informative online experience.

Card Sort Findings

I had two users who participated in the card sort to help to understand how to organise the Information Architecture. I wanted to know how the users would organize the cupcakes into categories. Here are my findings:

● Inconsistent results.

● Users did not enjoy the program Trello for card sorting.

● Users settled on two categories - Cupcakes and Delivery.

● Needed more participants to do the card sorting however due to scheduling conflicts users were not available to assist.

III. Design

I started the design process with feature priotization.

I took the following steps to complete the redesign:

Information Architecture- organized content, and grouped related items to make it easier to read.

 Navigation - created an intuitive navigation system to help the user move through the website seamlessly for easy information retrieval, defined clear labels and call-to-action buttons guiding users where to go and to accomplish their goals.

Visual Hierarchy- created font sizes that are accessible and readable to everyone, headings that help give visual structure better product photography and organized content to streamline user processes. Improving accessibility was also a key focus.

IV. Early Visualization

I created rough wireframe sketches keeping in mind the rich data I gathered from user interviews, initial usability tests, card sorting, and c + c analysis.

Sketches for mobile: homepage, product detail page, checkout, member perk page.

Mid Fidelity Wire Frames PDP Listing Page, PDP

High Fidelity Wire Frames PDP Listing Page, PDP

Solution

I focused on improving product discoverability, imagery and searchability to help users better understand what Toronto Cupcakes offers. A streamlined interface allows easy navigation for selecting gourmet cupcakes, ensuring a delightful experience while considering allergies. The interface simplifies cupcake selection with clear details on flavours, ingredients, and the perfect icing-to-cupcake ratio. The added loyalty program encourages return visits.

V. Reflection

The project's goal was to design the desktop version with the first four screens translated into mobile.This was my first project where I worked from start to end. I was inspired by the founder MIchelle's story of Totoro Cupcakes and her passion for baking. I didn't want to recreate a website lacking personality, instead I aimed to develop a website that conveyed Michelle's baking journey providing users with an enjoyable experience that inspired them while shopping for a cupcake. Elements such as the stripe awning, colours and beautiful product photography were incorporated to create a bakery like ambiance.

If I could redo this project, I would have liked to design all the mobile screens and conduct more usability testing. I wished I had more time with the card sorts, as I found my results to be inconsistent, and I would have liked to investigate further. Regarding branding, I would have liked to explore the main brand's logo but this was outside the scope of the project.