Usability Evaluation of the TorontoCupcake Website

 By Mohammadreza Davoudi (Payam Davoudi)

Introduction:

The TorontoCupcake website is an online marketplace that provides Canada's finest selection of gourmet cupcakes and chocolate treats. They make delicious handmade cupcakes in many flavors. Toronto Cupcake is a small business established in August 2010 and owned by Ms. Michelle Harrison.

Why Did I Choose Toronto Cupcake?

Torrento Cupcake is number one on the Google search for cupcakes in Toronto! In Google Maps, users have given TorontoCupcake a 4.9-star review for their fantastic cupcakes and outstanding customer service. On the other hand, their website earned a 1-star review as well! Small businesses should have the best websites to attract more users to grow their business. Moreover, they can prevent customer loss by identifying and addressing significant issues on their website. 

I conducted heuristic evaluations and cognitive walkthroughs on the Toronto Cupcakes website and identified several key issues and problems. This blog aims to highlight these issues and offer suggestions for improvement.

Issues and Recommendations:

Lack of a Beautiful Homepage and Minimalist Design:

According to Nielsen Norman Group, designing beautiful and minimalistic website pages and focusing on the essentials is the key to improving user experience. All websites must have an attractive design on their homepage for a better first impression. 

The website's homepage is where we welcome our users. Unfortunately, On the homepage of TorontoCupcake, we see more packaging of the product instead of the cupcakes. Although TorontoCupcakes has gorgeous product packaging, this website is a Cupcake shop and not a packaging shop website. 

They also used the company logo eight times in a row on the top of the website, which is redundant. These icons are not even clickable and are just there for decoration. The best place to put the website logo is on the top-left side of the website. That is the first place most users look when they enter a website. 

In the middle of the homepage, there is a picture of a cupcake with low resolution. As you can see in the picture, images like this will be pixelated when the user zooms on it or opens the page on a high-resolution monitor. Another issue I can mention on this page is that they didn’t follow any pattern and alignment for their contents, and each line has its length, and there is also a typo mistake. 

Recommendations: 

• A beautiful layout will make users feel comfortable on the website. The best practice for TorontoCupcake is to replace the homepage design and add a more attractive and informative design for the homepage, focusing on cupcakes and flavors instead of the packaging. 
• Using proper alignment for all the elements on the page that can be adopted based on the screen size 
• Always use a high-resolution image for a better look on high-end monitors.

By making these changes, we will improve the consistency as well as usability of the website.

Lack of Efficiency of Use: 

TorontoCupcake does not support filtering or sorting cupcakes on the cupcake selection page. There is a very high chance that a user wants to filter items based on flavors or their allergy to the foods or sort cupcakes based on popularity and rating on the website. Unfortunately, the lack of these features can lead to frustration for users to find their favorite cupcakes. According to Nielsen Norman Group, it is best practice to design web pages as efficiently as possible, including in the item selection, to improve usability.  

Moreover, the users cannot change the size of the text or switch between light mode and dark mode. Another problem is in the checkout process. In the final step, when the user wants to pay for their cupcakes, the owner should process their request and manually send them an invoice request based on their order, which means more waiting time for the user to finish an order. This will dramatically reduce the efficiency of use.

Recommendations: 

• It is a good idea to implement good filtering options based on the ingredients of cupcakes or tastes. Also, it is a good idea to execute a search and sort based on the popularities and other factors. 
• It is also a good practice to bring theme customization, like font size and colors, to help older adults and disabled people work with the website more efficiently. 
• For payment, using different gateways from banks or PayPal is highly recommended to ensure the checkout process is automatic. 

Lack of Consistency and Standards on Website:

According to Nielsen Norman Group, for all eCommerce websites, it is essential to have standard features like proper page navigation and search. The lack of these features can confuse the users and frustrate them. TorontoCupcake has a navigation menu, but it is minimized by default. If you look at the top left of the website, there is a three-line icon (Hamburger icon) for the navigation menu.

The problem is that the menu is minimized by default, even for the desktop screens. Although it is a good practice to have a hamburger icon for mobile screens, in the desktop version, it is recommended to show the full-size navigation menu to make the navigation easier.

Moreover, we need more consistency in the website's pages. In other words, there is no menu bar or footer on some pages, like the checkout page, and the style of each page is slightly different from the others. Some pages have a menu bar and footer, and some don’t.   

Recommendations: 

• To solve these issues, developers usually use a Master page. A master page is like a container to wrap other pages and all the necessary elements.
• For navigation, we can also use the proper navigation and search bar based on the device's screen size; if the user opens the website on a mobile device, we can use a minimized menu and a hamburger icon, and if it is on a desktop screen, we can show the maximized version of the menu to the users to improve website usability.

How Can I Bring the Removed Items Back to The Cart?

Upon removing any item from the cart, the website gives users no feedback or confirmation prompt to check if they want to delete that item or click by mistake. Moreover, the “Undo” option is missing as well. So, if the user removes items from the carts even by mistake. Items are gone forever, and the users have to reselect them again from the selection page.

Another problem is that users don’t have a cancel button on the cart page, and continuing shopping is the only way to cancel the checkout process. 

Recommendations: 

• According to Nielsen Norman Group, implementing a multilevel undo and redo functionality for the website is a good idea. 
• When trying to clear the cart, give the user a confirmation prompt
• Use proper naming and labeling for the buttons.

Progress bar missing and showing Cart's Items in a bad way:

According to Nielsen Norman Group, system status should always be visible to the user. A progress bar is necessary here to make it easier for users to know the current state and upcoming tasks. Moreover, the place order button looks like it will complete the ordering process, but in the actual scenario, it does not end the process and moves the user to the next page to gather more information. In addition, the unnecessary spacing on this page makes it hard for users to read and track the items at a glance.

As we can see in the picture, there are four chocolate peanut butter cupcakes in the shopping cart, but the system, instead of showing it in one line and adding the quantity of that, shows it in 3 separate lines, which is not the best way to show items on a cart.

Recommendations: 

• Adding a progress bar on top of the page for each step is necessary to show the user the current state and give them an idea of what they will do in that step.
• In addition, instead of auto jumping to the cart page, we can let the user add items to the cart together, and when the user finishes the Cupcake selection, then go to the shopping cart list and place the order.
• Moreover, reducing the spacing in the cart’s lines is also recommended to make reading more accessible for the user. 

In Conclusion:

To summarize my adventure on the Torrento Cupcake website, by employing cognitive walkthroughs and heuristic evaluations, I have identified many user experience problems on the Torrento Cupcake website. It is very important for all website designers to follow at least the basics of user experience guidelines. This will help their users achieve their goals on the website more efficiently.

Based on my experience, usability improvement is an ongoing process. We should always look for improvement in our work and accept criticism for our designs. Even when a design is good, the designers must constantly search for methods to improve their designs and keep them up to date. I hope this blog post helps the Toronto Cupcake team enhance their design in their future web application.

Acknowledge:

Thanks to Grammarly for improving my writing for this blog post.

Please share your experiences or ideas about this blog post in the comments!