Usability Inspection

By Luvnit Sawhney
BREW92
Specialty Cafe & Roastery
What is Heuristics? Heuristics Principles
1.Visibility of system status:

A heuristic evaluation is a usability 2.Match between system and the real world:

inspection method for computer 3.User control and freedom:

software, Website or Application 4.Consistency and standards:

that helps to identify usability 5.Error prevention:

problems in the user interface (UI) 6.Recognition rather than recall:

design. 7.Flexibility and efficiency of use:

8.Aesthetic and minimalist design:

9.Help users recognise, diagnose, and recover from errors:

10.Help and documentation:

Homepage
Issue: No Brand Awareness

Severity: 2 - minor usability problem

Heuristics Violated: Use names that are conceptually

related to function

Description: When a user lands on the Homepage, they

don’t know what the website is about or what the offerings
are. There is no brand awareness created.

Suggestion: Homepage should have a great beginning,

middle and end. Have a strong header that states the
Brand name and the various actions that you can perform
on the website.

Issue: Bad CTA

Severity: 3 - major usability problem; important to fix

Heuristics Violated: Reduce uncertainty

Description: On the homepage the “Shop Costa Rica”

CTA is irrelevant. First time users won’t know what this

Button does. Users are left guessing as to what this CTA

does. Is Costa Rica a brand name or type of coffee ?

Suggestion: Have a strong clear CTA that is universal.

Display data in a manner that is clear and obvious to
reduce decision time and error.

Issue: No Heading / Product Title

Severity: 2 - minor usability problem

Heuristics Violated: Reduce uncertainty

Description: On the first fold of the website, there are

Product listings but the user has not been told yet what
products they are viewing. Even the product title doesn’t

Have any clues as to what the product is. Is it whole beans

Ground coffee ?

Suggestion: Have a strong header explains to the user

what he is going to see, instead of showcasing random
products. Have a short product description.

 Issue: Add to Cart doesn’t look like a button.

Severity: 4 - usability catastrophe; imperative to fix

Heuristics Violated: Consistency and standards:

Description: Currently add to cart is just a text. Users

might miss the fact that the product can be bought.

Suggestion: Make the Add to Cart option a button with

bold colours and bounding box.

The product image is taking up a lot of real-estate on the site.

Reduce the image size by 15 - 20%

Header & Menu
Issue: Language selection is broken.

Severity: 4 - usability catastrophe; imperative to fix

Heuristics Violated: Recognition rather than recall / Present new information with meaningful aids to interpretation

Description: There is no need to display the English language selection option on a page that is already in English

This holds true for the vice versa also. The language option here is also represented by EN / AR. We are assuming

That the audience under this abbreviation nomenclature. Also the language selection icon is very close to the “cart” icon.

Users might get confused by the proximity of the icons.

Suggestion: If the website is in English only display the option to switch to the Arabic language and vice-versa.

Also the Arabic language should be written in Arabic and not “AR” since that assumes that the user understands

AR as Arabic.

Issue: Wrong Cart Icon

Severity: 4- usability catastrophe; imperative to fix

Heuristics Violated: Recognition rather than recall:

Description: Users will have to guess what these icons do.

Minimize the user's memory load by making objects,
actions, and options visible and according to convention.

Suggestion: Replace the icon to common icons that users

can relate to. Such as -

 This is an odd place to put Login.

Issue: Menu items hidden in a website

Severity: 4- usability catastrophe; imperative to fix

Heuristics Violated: Group data in consistently meaningful

ways

Description: Since the menu items are hidden inside a

hamburger style menu. Users will spend more time
searching for options and navigation because a 2 step
process. Also the login button shouldn’t be hidden in this
menu.

Suggestion: Within a screen, data should be logically

grouped; across screens, it should be consistently grouped.
This will decrease information search time. Have this
navigation on the header and remove the hamburger style
menu. Move the Login button to the header also.
Product Page
 Issue: Add to cart button looks disabled.

Severity: 2 - minor usability problem

Heuristics Violated: Recognition rather than recall:

Description: Currently the Add to Cart button looks

disabled. This might deter users from clicking the button.

Suggestion: Make the button colourful based on branding

There is no way to increase quantity and or have hover over animation.

Subscription Page
Issue: Vertical scroll for simple information & repeating info.

Severity: 3 - major usability problem; important to fix

Heuristics Violated: Group data in consistently meaningful

ways

Description: Within a screen, data should be logically

grouped. Having a vertical scroll to display information that
could have been grouped horizontally is inefficient. Having
5 CTA button on a single page is excessive and confusing.

Suggestion: Make step 1, 2 & 3 horizontal and have one

CTA button on the page.
Cart Page / Checkout flow
The user checkout flow is slow here. This page
should only have Sign in & Check out as guest,
without the “Email Address” text field. Because you
can ask this detail on the enter shipping address
page.

I also suggest we have a Continue with Facebook

option as well.
No place to apply promo code
BREW92
Specialty Cafe & Roastery