Heuristic Evaluation + Redesign
Timeline: 7 Days
Website: Pittfitandfun.ca
Goal: Improve usability and increase program booking conversion
My Role: Usability Evaluator, UX/UI Design
Challenge
Using Nielsen Norman Group’s 10 Usability Heuristics, assess & improve Pitt Fit & Fun’s website user-experience.
Shortcuts
Original Website
Rating System
These ratings are are a combination of frequency, impact and persistence of the problem.
Each heuristic evaluation criteria is scored from the medium of the score per relevant screen on a scale of 0 to 4 as defined in the table below.
-
A heuristic evaluation is a method for finding usability problems in a user interface design. They involve having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics").
The The Nielsen Norman Group’s 10 Usability Heuristics for User Interface Design were used as the evaluating criteria.
-
Visibility of system status
Match between system and the real world
User control and freedom
Consistency and standards
Error prevention
Recognition rather than recall
Flexibility and efficiency of use
Aesthetic and minimalist design
Help users recognize, diagnose, and recover from errors
Help and documentation
Task Selection
Core Task: Booking a yoga class.
Why: This task is core function of the website: program conversion.
How: The following flow chart indicates the user’s task flow, starting from the home page and ending with their chosen program in-cart.
Violations Discovered
Click To Enlarge
I discovered 5 Heuristic Violations, and created a Prioritization Matrix for the redesign.
Aesthetic and minimalist design
Consistency & Standards
Error Prevention
User Control & Freedom
Help users recognize, diagnose, and recover from errors
Click To Enlarge
VIOLATION #1
Aesthetic & Minimalist Design
Major Usability Problem; important to fix.
Confusion & Overwhelm
The home-page lacked visual enclosure, resulting in a cluttered, overwhelming appearance.
For the User, it’s difficult to identify where they should click to book a class.
Click To Enlarge
Click To Enlarge
Redesign
We began by setting up a 12-Column Grid System to allow space for distinction and hierarchy.
For continuity, interactive elements were placed into cards.
To prioritize convenient navigation, we simplified the information architecture to reduce overwhelm.
VIOLATION #2
Consistency & Standards
Major Usability Problem; important to fix.
Difficulty Accomplishing Tasks
The main CTA was not located in a primary or industry-standard location, and it is not clearly differentiated from other links
Additionally, the search function was rather confusing, and made it difficult for the user to accurately filter or refine their search.
Click To Enlarge
Click To Enlarge
Redesign
To solve this, we redesigned, emphasized, and relocated the Main CTA, allowing the user to take the most natural path of their task.
VIOLATION #3
Help Users Recognize, Diagnose, & Recover From Problems
Usability Catastrophe; imperative to fix before product is released
Error Messaging
In an already Error-Prone search function, the error message we received did not specify where, how, or why the error occurred, making it difficult for the user to understand where they went wrong
Click To Enlarge
Click To Enlarge
Redesign
To solve this, we redesigned the error message to specify what the error is and why it happened.
The user now has clear direction on how to solve it.