Toronto Cupcakes

Usability : UX/UI Redesign : Figma

Context

Introduction

Toronto Cupcake is a Canadian gourmet cupcakery in the Greater Toronto Area founded in 2010 by Michelle Harrison. Michelle created the company so she could pursue her love of baking with a goal of becoming Canada’s first gourmet cupcakeries.

Goal

The primary goal of this usability assessment is to enhance the overall user experience, aligning with the company's goal to broaden its appeal among everyday customers in the Greater Toronto Area with the establishment of their first physical location.  

In order to identify pain points in the Toronto Cupcake users' experiences, we set out to better understand how users navigate and interact with Toronto Cupcake's website. Our goal was to observe how people interacted with the Toronto Cupcake website while carrying out necessary tasks.

Key Hypothesis

We developed three hypotheses after our initial analysis of the Toronto Cupcake interface that we wished to validate during further research:
‍
H1: Users are unclear of what to do when initially arriving on the landing page.
H2: Users will have challenges looking for certain products.
H3: Users will have difficulties completing the transaction.

Study Plan

Our team conducted a 8 week long study that included user testing, analysis, and suggestions to Toronto Cupcake based on the established study goals.

Study Goals

We created three primary study goals while keeping our client's objectives and value proposition in mind:
‍
EVALUATE USABILITY
Our team had its own opinions about the efficacy of the site before the testing began. We were interested in whether the results of the tests and participant reports would support those findings.

OBSERVE
We wanted to know if participants shared our site-related worries, if they didn't experience the same issues, or if they discovered any brand-new issues.
‍
IDENTIFYING PAIN POINTS
We intended to break down and identify the users' challenges, their successes, and any new suggestions they may have made as they interacted with the website utilizing the data and observations we had collected.

PARTICIPANTS
After sending out a screening questionnaire to 12 candidates, we examined the responses and narrowed it down to 4 candidates that were closest to our ideal user. An example of a characteristic that we looked out for when picking our participants were, that they had a taste preference of sweet, or sweet and savoury foods. Another example would be that they shop online at least one to three times a week.‍

Methodology

Each session was completed in three parts, with one participant and at least two of our researchers—one acting as the moderator and the other as an observer—over a 30 minute-long Zoom video call.

PRE-TEST
‍Pre-test questions were used to screen and understand the demographics of our testers as well as experience with shopping online, and other background questions to better understand how they could affect results.
‍‍
THINK-ALOUD USABILITY TEST
‍Participants told to think-aloud while completing a preference test, five-second test, first-click test as well as pre-designated tasks on the Toronto Cupcake webpage to collect qualitative feedback.
‍
POST-TEST
‍We encouraged participants' to evaluate their overall experience on the site navigation and learning experience through a series of questions to collect quantitative feedback.

‍

Limitations

Due to the limited length of our study period, we were unable to perform a thorough usability test with a larger sample size. We were only able to include four users, which may have limited how broadly applicable our findings can be.
‍

Analysis

We used a rainbow sheet to record observations such as pain points, time on tasks, and success rates during the usability test.  The SUS (System Usability Scale) was used by asking post test questions to our participants to assist analyzing our findings.‍
‍

SUS Analysis

Toronto Cupcake’s website has received a SUS score of 38.125 from our participants which is almost 30 points below 68, deeming the website’s system usability to be below average.

Results

Design

Users realized that the website’s design felt outdated. They felt it need a lot of work to be done like better quality photos, and an updated menu with a bit more modernized look and feel. The users felt uncomfortable using the website compared to other websites.

Site Navigation

The users had a hard time with the current navigation that utilizes a small, hard to notice hamburger menu, therefore, this caused frustration when most of our participants were unable to locate things like the catalogue page or the checkout page.

Cart Function

Users had a difficult time selecting cupcakes, and adding them into the cart due to the inadequate design of the cart function. This lead users to jump back and forth between pages when selecting multiple items.

SUS Analysis

Toronto Cupcake’s website has received a SUS score of 38.125 from our participants which is almost 30 points below 68, deeming the website’s system usability to be below average.

Design Solution

Design

We enhanced the landing page by replacing the low-quality hero image with a more appealing and high-contrast one, thereby addressing concerns about website authenticity and improving the bounce rate. The introduction of a prominent "SHOP NOW" button and a clear navigation bar at the top streamlined user experience, while a visible allergen information banner to help enhance user awareness. Additionally, we improved navigation by allowing users to click on logos for easy return to the homepage and revamped the footer to include contact information, hours of operation, and social media links, enhancing Toronto Cupcake's promotional outreach.

Site Navigation

We improved the visual appeal of the catalogue page by ensuring consistent image sizing and incorporating Toronto Cupcake's distinct pink background. To address user engagement issues, we placed cupcake prices prominently beneath each item and introduced a left-side category sorting feature, streamlining navigation. Enhancing user search capabilities, we implemented a filter function for taste and price preferences, and introduced a "Quickview" hover state to guide users in discovering additional information by clicking on each product during usability testing.

Cart Function

To enhance the cart page's usability, we addressed user difficulties in finding it by adding a prominent cart icon at the top right of every page. Streamlining the shopping experience, we introduced a cart overlay that appears when items are added, reducing the need to switch between the catalogue and cart pages. Quality of life improvements were implemented, including the replacement of input boxes with "+" and "-" buttons for quantity adjustments, enlarged and clearer "Proceed to Checkout" and "Continue Shopping" buttons, and the inclusion of images for easy item identification based on our usability test findings.

Conclusion

The usability test uncovered significant challenges in navigating and ordering on the Toronto Cupcake website, potentially impacting user experience and overall success. To remedy these issues, it is recommended to implement solutions identified during the usability test, emphasizing ongoing collaboration with users to ensure success and continuous improvement. The next phase would involve presenting prototypes, incorporating recommended solutions, allowing users to test and provide valuable feedback for further refinement.