T&T Heuristic Evaluation

T&T Supermarket – Heuristic Evaluation Overview

T&T is a well-known and respected supermarket chain with a loyal network of in-person shoppers. In order to expand T&T’s online customer base, my group conducted a heuristic evaluation of their website; focusing on an important customer task flow: buying dinner.

Project Type

Heuristic evaluation

Timeline

3 Weeks

Team

3 people

Platform

Website

My Role

Researcher

Copywriter

UX Designer

Tools

Figma

Google Docs

Task Flow: Buying Groceries
for Dinner

Browsing

Selecting

Checking out

Being able to browse online for specific items is very important. After all, shopping in-store is not always possible. Because of this, my group focused on improving the user’s experience when it comes to buying dinner.

Heuristic Measures

We conducted the evaluation based on Neilson Norman’s heuristic measures.

Visibility of System Status

Tell the user what’s happening…

User Control and Freedom

Does the user have an emergency exit?

Error Prevention

The best designs foresee errors and prevent them.

Flexibility and Efficiency of Use

Efficiency for new and returning users

Help Users Recognize and Recover from Errors

Clear error messages and markers telling the user what to do

Match Between System and the Real World

Will the user recognize it? Is it familiar?

Consistency and Standards

Users shouldn’t have to worry if different words mean the same thing.

Recognition Rather than Recall

The design should not depend on the user remembering information.

Aesthetic and Minimalist Design

If it’s not relevant, keep it out.

Help and Documentation

Can the user find help?

Severity Scale

Based on the severity of usability problems, a number is assigned to each heuristic using a 1 to 5 rating scale.

0 = This is not a usability problem

1 = Cosmetic problem only: need not be fixed unless extra time is available

2 = Minor usability problem: fixing this should be given low priority

3 = Major usability problem: important to fix, should be given high priority

4 = Usability catastrophe: imperative to fix this

T&T Brand Style

My group started out by establishing the core style elements, based on the existing T&T brand guidelines. This was to help maintain consistency throughout our redesigned solutions.

Typeface: Poppins

Brand Colours

Narrowing Our Focus

When it came to buying dinner on T&T’s website, we found a variety of heuristic issues. To help narrow our focus, we entered the data into a design prioritization matrix.

Using the matrix, we focused on the usability issues that make the highest user impact with the lowest amount of effort.

Usability Error #1 – Navigation Issues

The first error identified was a home page inconsistency on the navigation header. As you would scroll down and search, the signup button and cart would disappear. This change could unintentionally end a category hover state, causing a user to lose their place. Because of the way the function of the elements would change and interfere with each other, this was a level 3 violation of user control and freedom.

Our Solution: Consistent & Simplistic Design

To fix this, we redesigned the navigation header to be fixed and consistent; regardless of how and where the user scrolled. The banner design has been simplified to make it consistent with the rest of the brand styling, giving the user more control.

Usability Error #2 – Navigation Issues

In the category dropdown, there was a lot of visual clutter. For the user, it’s overwhelming and unnecessary; violating the aesthetic and minimalist design heuristic. For hindering attempts to make quick searches, we rated it a level 3 on the severity scale and made it a priority fix.

Our Solution: Iconography

Our solution refines and condenses the subcategory menu, through the use of iconography. The added icons visually show the different food categories and subcategories have been moved to their individual food groups page. This simplified the design in a way that makes browsing easier, resolving potential language barriers.

Usability Error #3 – Scroll Function Blocked by Element

As you scroll down the homepage, two sidebars appeared on both sides, blocking important buttons used for browsing items. This catastrophically violated user control and freedom. After all, if you can’t browse, it’s hard to buy anything.

Our Solution: Remove Sidebars

Our solution and design change included two things: removing the categories sidebar on the left and transforming the right-hand sidebar into a floating action chat button.

In terms of the hierarchy of importance, these sidebars do not have priority over the function. However, the chat feature answers a lot of important questions and helps the user navigate through the site. With the design change, the user can browse through items and access all the buttons.

Usability Error #4 – Weekly Specials – Colour & Category Confusion

In weekly specials, we noticed that the lowest-priced items used the same red color to highlight the banner and button. This could be easily misinterpreted as a selection error state. This was a level 3 high-priority fix as it violated Consistency and Standards.

Our Solution: Simplify and Categorize

Our solution removes the red highlight and makes sure all ‘add to cart’ buttons remained consistent. Categories will still use a horizontal scroll, but we have added a background fill. This is to help guide the user’s eyes and signify that the items are grouped together.

Usability Error #5 – Registration Required Before Checkout

When we were conducting the heuristics evaluation, we noticed that before you could check out your cart and make your purchase, you had to sign up as a new user. This was a violation of flexibility and efficiency of use and we gave it a level 3 severity rating.

Our Solution: Guest Checkout Button

To better define and simplify each step, we broke the checkout process into 4 parts. By doing this, we were able to move the ‘pickup’, ‘delivery’, and ‘send a gift’ options to their appropriate page, the address page. This simplified the design and gave new users more flexibility.

Usability Error #6 – Automatic Cart Refresh Post Registration

When we began, you couldn’t check out without signing up and when you did, your shopping cart would refresh and empty out. Users did not have the ability to save their cart or return to it after signing up. This violated the user’s control and freedom at a catastrophic level. We gave it a severity rating of 4 because this issue would likely cause a customer to leave the site.

Our Solution: Remove the Automatic Refresh

To fix it, we removed the automatic cart refresh. This way, a new user who decides to sign up will not be surprised with an empty cart, saving them from having to start shopping all over again.

Key Learnings

  • Having the brand style guide handy can improve efficiency
  • When there are time constraints, write task lists and set timers

Next Steps

  • Conduct heuristic evaluations of other website task flows

Thank you for taking the time to read this case study!

If you have any questions or comments, I would love to hear from you. Send me an email at [email protected] or connect with me on Linkedin.