Toronto Cupcakes

usability evaluation of torontocupcakes.com, a cupcake business based in Toronto

Client

Course Project

Mobile Computing | CSE 535

Torontocupcakes.com

My Role

UX Researcher

Duration

4 months

August 2022- December 2022

Team Size

Context

ABOUT TORONTO CUPCAKES

Toronto Cupcake is a small business owned by Ms Michelle Harrison, a lifelong baker, and was established in August 2010 as one of Canada’s first gourmet bakeries.

Toronto Cupcake is expanding this year with a flagship store and is establishing its digital presence along with it.

WHY WE CHOSE TORONTOCUPCAKES.COM?

Toronto Cupcake is a bakery that has been rated 4.9 stars on Google Maps for its excellent service and wonderful gourmet cupcakes. However, it also received a 1-star review for its terrible web design!

This got our attention as we know a user-centred, aesthetically pleasing, and accessible website is crucial for small businesses. Additionally, we believe that dedicated business owners like Michelle Harrison, the owner of Toronto Cupcake, should not have to lose customers over a lack of expertise in website design.

Thus, we decided to apply our knowledge and skills as UX experts to optimize the user experience of this website so that customers can have a high-quality experience on this website and easily order and enjoy delicious gourmet cupcakes from Toronto Cupcake.

Research Goals and Objectives

GOALS

The goal of this study is to test the usability of the website of Toronto Cupcake (www.torontocupcakes.com), a bakery business, and collect data and insights to improve the website.

OBJECTIVES

Identify problems in the user experience of the website through different UX research methodologies like heuristic evaluations, competitive analysis, and task analysis.
We evaluated the website on the following criteria -

Information architecture (includes navigation, organisation, and search)
Design affordances
User flows

Our Process Flow

01 Exploratory Research

We started by doing an exploratory search of various websites which have poor usability. We shortlisted many websites for our initial brainstorming session.

After careful evaluation, we chose Toronto Cupcake as we were interested in the idea of helping this successful business owner who has recently dgitized her company and is looking to expand it.

02 Heuristic Evaluation

As the first step of evaluating the usability of Toronto Cupcakes, we conducted a heuristic evaluation based on Jakob Nielsen’s 10 Usability Heuristics for user-centred design.

Our severity ratings ranged from 0 to 4, with 0 being no violations found and 4 being usability catastrophe.

No violations found

Cosmetic problem only

Minor usability problems

Major usability problems

Usability Catastrophe

From our evaluation, we found 5 heuristics most problematic which were further validated during the task analysis with participants.

These heuristics were:

1. Visibility of System Status

Progress bar missing

The lack of progress bar makes it very difficult for users to know upcoming tasks, making the system status unknown to the user.

No system pop-ups

Proper graphic links & standard labels are not clearly presented to guide user throughout the system.

2. Error Prevention

The form for Sender and Recipient can be easily confused

There is a slight difference between these two forms and this is not easily noticed. Additionally, it is redundant if the customer is the sender and recipient at the same time

Mandatory fields are not marked in the form

Users could miss filling important information because they do not know it is mandatory

3. Flexibility and efficiency of use

Lack of efficiency

It is not easy to search for an action or item in the system & users find it difficult to access at the home page itself.

No search button

Some users might benefit from a search button and the lack of one might make it challenging for some users to find an item in the system.

4. Help users recognize, diagnose, and recover from errors

Fields are not correctly encoded

The ZIP/Postal Code field allows input of alphabet characters as well as numerals. The phone number field is missing separators.

No way for the user to go back

On removing any item from the cart, the system feedback and “Undo” option is missing.

5. Help and Documentation

Information about the cupcakes is not substantial enough

Missing important information such as ingredients, longetivity, customizable options etc.

Website is missing a footer

There is no footer that gives users links to different pages of the website, the social media channels, help option, and careers/employement opportunities page.

03 Comparative Analysis

We did a competitive analysis for website against 5 direct competitors and 5 indirect competitors.

From our competitive analysis, we plotted all the competitors based on their customer experience and delivery time, two major requirements for a business to run successfully.

From the plot below, we can clearly see that all the direct competitors fall majorly in the positive quadrants while Toronto Cupcakes falls in the negative quadrants.

04 Usability Testing

RESEARCH DESIGN

We conducted five moderated in-lab usability tests with one moderator and one notetaker.

We designed six task scenarios to test if the users can:

Locate the products they desired
Successfully make purchases
Switch items in their cart
Delete items in shopping cart
Locate the shopping cart whenever they desire to
Go to the Homepage
Contact the business for further information
Learn about the amount they are going to pay in total

We applied a think-alound protocol to identify user’s thought process and gather their feelings toward the website

DATA COLLECTION

The following ways are in which data was collected from the task analysis -

Audio and Video recording of Participants
Screen recording of the actions being performed by the participants on the website
Moderator and notetaker notes
Likert and SUS score filled by the participants after each task and the end of the test

DATA ANALYSIS

We first compiled our moderator and note taker notes into an excel sheet for each of the tests we did.
Next, we compiled and analyzed the likert and SUS scores to gather quantitative insights.
Finally, we created affinnity maps based on the notes we took to visualize trends and gather quantitative insights.

PARTICIPANT RECRUITMENT CRITERIA

We assesed the target audiences as dessert enthusiasts who also have some experience with online food shopping experience to come up with a screener and choose participants from for the usability tests.

We screened participants based on the following criteria:

Gender

Age

A mix between 23-26 years

Interest of purchasing cupcakes
Have e-commerce shopping experience

5 out of 5 participants have experience ordering/ purchasing items through internet

SEVERITY RATING KEY

After every task, we asked our users to rate the ease of completing the task on a scale of 1 to 5, with 1 being very easy and 5 being very difficult.

Very easy

Easy

Neutral

Difficult

Very difficult

TASK ANALYSIS

We come up with the following tasks based on the finding from Heuristic Evaluations to see if the website can help users finish their tasks:

TASK 1 - Add cupcakes to cart

Scenario:

Christmas is coming! You would like to order christmas cupcakes from the holiday section.

Task Flow:

1. Go to product page

2. Locate product

3. Click "Add to Cart"

Task Completion rates: 100%

Average Severity Rating: 1.8

Key Observations:

Task 1 was fairly simple for all the participants.
Except for one participant, they all could locate the hamburger menu icon and find the “cupcakes” page.

Suggestions:

The most important insight from the participants was to create a clearly visible navigation menu.
They also suggested that it would be helpful if the user is aware of what step they are at with proper feedback from the system.

TASK 2 - Change items in the cart

Scenario:

You want to switch the cupcake your previosuly selected to Chocolate Hazelnut Cupcake.

Task Flow:

1. Delete item from the cart

2. Add "Chocolate Hazelnut Cupcake"

3. Check the updated Cart

Task Completion rates: 100%

Average Severity Rating: 2

Key Observations:

Task 2 also had a fairly simple rating given from most participants.
Participants found eliminating items in cart intuitive.
Participants start struggling with finding a back button/going back to home option
One participant went back after Task 1 and then struggled to find cart to delete an item.

Suggestions:

Create a cart icon/button that is available as a part of the global navigation.
There should also be an option to keep looking at the cart while shopping - a hover or a separate view along with the contents of the website on display.

TASK 3 - Find shopping cart

Scenario:

You are browsing the cupcake page again and want to check what is in your shopping cart to make sure you get what you need.

Task Flow:

1. Go to the "Cupcakes" page

2. Find "View Cart" in menu

3. Click to open cart

Task Completion rates: 100%

Average Severity Rating: 2.8

Key Observations:

Task 3 was not so easy for most participants. 3 out of 5 participants couldn’t figure out the shortes possible route for finding the “View Cart” page.
Many participants found it easier to add a dummy cupcake to the cart at first to be able to locate it and then delete the previously added cupcake.

Suggestions:

A visible clickable cart icon at the top right corner of the screen as suggested by all participants.

TASK 4 - Place the order

Scenario:

After checking the cart, you are ready to submit the order and send the order to yourself.

Task Flow:

1. Click "Place Order" on the cart page

2. Fill in all the delivery information

3. Submit the order

Task Completion rates: 100%

Average Severity Rating: 3.4

Key Observations:

Task 4 was challenging for all participants.
All participants hesitated or did no know if they need to fill the two forms: sender and receiver when they are ordering for themselves.
2 out of 5 participants think the information is overwhelming and the layout is poorly designed.

Suggestions:

Provide an option for “same as the billing information” when customers order and send the cupcakes to their places.
Better categorization of information to avoid information overload
Add progress bar to show which steps customers are in, so they know what they should do

TASK 5 - Contact the store

Scenario:

After placing an order, you want to get in touch with the cupcake shop with your delivery-related question.

Task Flow:

1. Open Menu

2. Click Connect/ Contact Us

3. Get the contact information

Task Completion rates: 100%

Average Severity Rating: 2.8

Key Observations:

Task 5 was fairly simple for all the participants.
4 out of 5 participant located “contact us” buttons at the footer with in a second.
1 participant navigated to the delivery page and find the contact information, however another participant find the delivery page is not helpful.

Suggestions:

Remove the “connect” button on the menu to reduce the cognitive load for users.
Eliminate the unneccesary information on delivery page to help users locate the information efficiently

TASK 6 - Find the delivery fees

Scenario:

You want to know the delivery fee of your order, please find the information on the website.

Task Flow:

1. Locate FAQs at the footer

2. Click “Does Toronto Cupcake deliver?”

3. Get the delivery information

Task Completion rates: 0%

Average Severity Rating: 4.6

Key Observations:

Task 5 was extremely difficult for all the participants.
All the participants checked the shopping cart to look for delivery fees there.
3 out of 5 participant checked the cupcake delivery page but do not find helpful information
1 out of 5 participant located the “FAQs”, but failed to find the desired information.

Suggestions:

Add the delievery fees on check out page
Remove the “connect” button on the menu to reduce the cognitive load for users
Eliminate the unneccesary information on delivery page to help users locate the information efficiently

05 Data Analysis

SUS ANALYSIS

As a part of our post-task activties, we asked users to fill up the SUS questionnaire for Torontocupcakes.com.

We compiled the SUS scores of the five participants and found an average SUS score of 51.5 for the website.

Comparing with the industry standard of 68, we arrived to the conclusion that the website represents a marginal acceptability score.

The usability of the website appears to be “OKAY”.

POST-TASK INSIGHTS

Lastly, we asked our participants a bunch of post task questions to get more qualitative feedback on the task analysis and Toronto Cupcakes.

AFFINITY MAPPING

Finally, we mapped out all our findings to understand the major themes and find our key insights from the usability testing

MAJOR USER COMMENTS

KEY INSIGHTS

Based on our affinity mapping, we converged on the following key insights:

Participants found that a clear navigation is missing, they faced problems in moving across pages and back and forth.
Some of the features such as “Cart” were not found on website at a specific location as per participant’s existing mental model.
They found that some parts of the website are text heavy and legibility is poor.
Users found some of the tasks time consuming and frustrating due to repeated input of same information or trouble in finding content.
Participants were expecting basic features like search bar, filters, sort content options to better find the products they are looking.

06 Recommendations

We recommend the following features/changes for Toronto Cupcake based on our usability test and research insights:

Usability Enhancements:

Add top navigation for content discoverability.
Improve website footer and add necessary contact information, social media links.
Add navigation breadcrumbs for navigation.
Add sort and filter options to give more flexibility to the user.
Add a search bar to help in finding specific items.
Add system information state in cart and checkout.
Make fonts consistent.
Add cart icon in the top navigation bar.
Bring navigation upfront instead of hamburger menu.

We recommend the following features/changes for Toronto Cupcake based on our usability test and research insights:

Additional Features:

Add diet-specific information adjacent to the cupcake.
Add a clear CTA on the homepage.
Distinguish between sender’s and receiver’s information in checkout.
Improve form layout in checkout.

Accessibility Enhancements:

Improve color contrast and text legibility.

My Reflections

Looking back, there are few things I'd do differently -