Heuristic Evaluation

2020

Summary

The main goal of this project is an evaluation of the existing gitti website and researching users in order to identify general usability issues and proposing optimizations to improve the User Experience of the product page.

What is an Heuristic Evaluation?

In a nutshell, a Heuristic evaluation is a usability inspection technique where one or a number of usability experts evaluate the user interface of an existing product (in this case a website) against a set of Heuristic Principles (also known as Heuristics).

Although there are numerous heuristics, the most commonly used criteria in usability inspection were developed by Jacob Nielsen in 1995, known as The 10 usability Heuristics for User Interface Design (which are the ones I’ll be using for this evaluation). This specific collection of heuristics contains 10 rules of thumb that have been proven to produce excellent UX designs.

Scope

Role: Evaluator, UX Designer

Type: UX Audit

Timeline: 1 week.

Platform: Desktop and mobile.

Process: UX Research - Heuristic evaluation - Usability Testing - Define new optimizations - Redesign

Evaluation Criteria

As mentioned, I’ll be following the 10 usability heuristics of Jakob Nielsen as my guidelines. In addition, based on secondary research about e-commerce websites, knowing that the checkout processes are often too complicated, and might lead to a decrease in conversions, I added the 11th heuristic: “Minimize the frictions during the checkout process” as an extra evaluation criterion.

Visibility of system status: The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.
Match between system and the real world: The design should speak the users’ language. Use words, phrases, and concepts familiar to the user, rather than internal jargon.
User control and freedom: Users often perform actions by mistake. They need a clearly marked “emergency exit” to leave the unwanted action without having to go through an extended process
Consistency and standards: Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.
Error prevention: Good error messages are important, but the best designs carefully prevent problems from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
Recognition rather than recall: Minimize the user’s memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another.
Flexibility and efficiency of use: Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
Aesthetic and minimalist design: Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.
Help users recognize, diagnose, and recover from errors: Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.
Help and documentation: It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.
Minimize the frictions during the checkout process.

Evaluation Report

In order to present the outcome in a digestible way, I created a heatmap to help visualize the data through variations in coloring depending on the severity of each heuristic violation.

Heatmaps are used to show relationships between two variables, one plotted on each axis (In this case vertical axis for the different Gitti pages and the horizontal axis for the Heuristics). By observing how cell colors change across each axis, you can realise if there are any patterns in value for one or both variables.

User Flow

The Task: Add a plant-based nail polish to your cart. The flow I’ve chosen for this task starts from the homepage and walks through the nail color product page, cart page, and the checkout process.

Execution

Grouping all the identified issues in clusters based on Jakob Nielsen’s principles helps organize the issues in a systematic way. While prioritizing the issues, I applied a 3-scale rating to rate the severity of each issue and prioritize the most critical issues based on the rates. Introducing the severity rating to the stakeholders helped me presenting the findings in an analytical and convincing way. It also helped quickly finding issues that directly cause abrupt trip over and dropping outs in the key flows.

Homepage

Product Page

Order Review

Homepage

1/8

Impact scores: To evaluate the severity of issues, I gave impact scores to different problems 3 being the most severe and 1 being the less severe.

Usability testing

The main feedback from users was having difficulties to find specific products as they couldn't find the magnifying glass and the photos of the products are not big enough for them to read if the product has water-based or plant-based formula.

I began this evaluation by performing a few rounds of testing on my own. However, in order to empathize with and understand the goals, desires, and preferences of gitti’s target users, I also conducted individual rounds of usability tests on a few of my friends who are gitti’s target audience (based on my assumptions).

I had to conduct the tests remotely due to the contact restrictions because of COVID19. I created a figma file with the screens of the flow and some post-its for them to point out things they like, dislike, comments and questions.

Redesign

Search icon more visible
Added breadcrumbs to make the navigation easier to follow for the user

Photo carousel with pagination dots instead of arrows on the edges (they get lost with the background photos)

Added -1+ option when adding items to the bag so the user sees instant feedback when adding.

Organized the layout of the content to make it more consistent and aligned. Especially the top so the CTA “add to bag” remains on the phone screen without needing to scroll down.
Redesigned the good to know part showing important information to the user to make the scroll more dynamic.

Distinctive icon to find water-based and plant-based at first sight
Adapted CTA’s to give more consistency in colors and shapes throughout the design

Redesigned the button “Notify me when available” so that it’s consistent with the other CTA’s and considering hierarchy.

Improved user flow

The major recommendation here in order to avoid the violation of the Heuristics "User control and freedom + Minimize the frictions during the checkout process." was to allow the user to exit the checkout process anytime, currently, once in the checkout process, there is no option (other than the browser back button) to go back to the shopping bag/gitti website screen.

Also, to avoid violation of the Heuristics "Help and documentation" If the user needs assistance has no option to access the channels of communication to reach their goal from the checkout screens. On the footer of the main navigation, the user has the option to find contact details and communication channels, but during the checkout, this option disappears.

Please note

This evaluation was one of the UX challenges I had to do for gitti conscious beauty as a part of the interviewing process for a UX/UI Designer position.

The evaluation was conducted by myself alone, and although it’s possible for one person to conduct a Heuristic Evaluation, it’s always more effective if 3–5 evaluators work on it.

2020