mockuuups-clean-desk-with-dell-display-mockup 1 (1).png

Background

Challenge: Evaluate the usability

of an existing digital product www.torontocupcakes.com by conducting a Heuristic Evaluation. Second, to provide a redesign and overhaul of the website. 

My Role: Measure the extent to which the website adheres to the Neilsen Norman Group’s Usability Heuristics.

Timeline: Dec 13, 2021 to January 7, 2022 

Platform: Desktop

Toronto Cupcake is one of Canada's first gourmet cupcakeries. They use finest ingredients to make what they believe are the tastiest treats around. The website allows users to order cupcakes online.

Prototype: Link

Tools: Figma & Adobe Creative Suite

 

How did we evaluate the website?

sdfdsfds 3.png

Nielson Norman Group heuristics were used to evaluate the usability of the website. 

Who are the Nielson Norman Group? 

NNg-MatFrame-735-405px-675w 1 (1).png

Who are the Nielson Norman Group, are they credible?  They are a credible user experience consulting firm that is trusted by leading organizations around the world to provide guidance on user experience and design.

Usability Severity Scale 

Group 165 (1).png

In addition to Evaluation Heuristic, a Usability Severity Scale was used to assess Toronto Cupcake's website. It ranges from 0 meaning "Not a Usability Problem" to 4 denoting "Usability Catastrophe: Fix prior to release." 

Why did we evaluate Toronto Cupcake Website?

Group 166.png
Group 168.png
Group 167.png

Landing Page - Heuristic Violation # 1

iMac angle 1 1.png
Group 136.png

Consistency and Standards

Website does not follow platform and industry conventions. Users should not have to wonder whether different elements, situations, or actions mean the same thing.

Menu not obviously visible

Frequency: High

Impact: Low

Persistence: Repeated Occurrence

Severity: 2 - Minor Usability Problem

Landing Page - Heuristic Violation # 2

iMac angle 1 1.png
Group 149.png

Recognition over Recall

The user should not have to recall information from one part of the interface to another. Details, actions, and options should be visible or easily retrievable when needed.

No shopping cart icon

Frequency: High

Impact: High

Persistence: Repeated Occurrence

Severity: 3 - Major Usability Problem

Cupcakes Page - Heuristic Violation # 3

Group 169.png
Group 149.png

Recognition over Recall

Accelerators speed up the interaction for the expert user. The design can cater to inexperienced and experienced users.  

Menu has no filter function

Frequency: Medium

Impact: Low

Persistence: Repeated Occurrence

Severity: 2 - Minor Usability Problem

Issue: The website itself violated countless Usability Heuristics that was beyond repair, but only three violations as shown were chosen for display. Ultimately, it was decided to give the entire website a complete overhaul.

Heuristic Violation # 1

Group 136.png

Before 

Menu not obviously visible

Mask Group (20).png

After

Menu not obviously visible

Heuristic Violation # 2

Group 149.png

Before 

No real time shopping cart

Mask Group (21).png

After

Real time cart added

Heuristic Violation # 3

Group 149.png

Before 

No filter available

Mask Group (22).png

After

Filter Added