Linkedin Envelope

T&T Supermarket
Heuristic Evaluation

T&T is a reputable and widely recognized supermarket chain with a strong base of loyal in-store shoppers. To support the expansion of T&T’s online customer base, our team conducted a heuristic evaluation of their website, with a specific focus on optimizing a critical user task flow: purchasing dinner. This evaluation aimed to identify usability improvements that would enhance the overall online shopping experience and drive engagement.

Prototype Link

Project Type & Date

Heuristic evaluation
August 2022

Platform

Website

My Role

Researcher, UX Designer,
Copywriter

Timeline

3 Weeks

Tools Used

Figma, Canva,
Google Docs

Team

3 People

Task Flow: Buying Groceries for Dinner

Browsing
1
Selecting
2
Checking Out
3

Ensuring users can easily browse and find specific items online is essential, especially when in-store shopping isn’t an option. To address this, our team concentrated on refining the user experience for purchasing dinner, aiming to streamline the process and improve overall accessibility and convenience.

Heuristic Measures

The evaluation was conducted based on Jakob Nielsen’s 10 Usability Heuristics.

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

Design Prioritization Matrix: Narrowing The Focus

During our analysis of the dinner purchasing process on T&T’s website, we identified several heuristic issues impacting the user experience. To streamline our efforts and ensure a targeted approach, we organized these findings within a design prioritization matrix, enabling us to focus on the most critical areas for improvement.

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

HOVER OVER THE DESIGN MATRIX TO SEE THE RESULTS

Usability Error #1

Navigation Issues

A highlight showing navigation issues
A scale for a functionality
The first issue identified was a navigation header inconsistency on the homepage. As users scrolled, the signup button and cart disappeared, disrupting the category hover state and potentially causing users to lose their place. This functionality conflict was classified as a level 3 violation of user control and freedom.
Hover Above For More Information

Usability Error #1

Our Solution: Consistent & Simplistic Design

A page for T&T Supermarket
After
  • One Consistent Design
  • Less Visual Clutter

To address this issue, we redesigned the navigation header to remain fixed and consistent, regardless of the user’s scroll position. Additionally, the banner design was simplified to align with the brand’s styling, enhancing usability and providing users with greater control.

Usability Error #2

Navigation Issues

A highlighted section of a page
A category scale
The category dropdown contained significant visual clutter, creating an overwhelming experience for users and violating the heuristic of aesthetic and minimalist design. This issue hindered quick searches, leading us to classify it as a level 3 severity and prioritize it for resolution.
Hover Above For More Information

Usability Error #2

Our Solution: Iconography

A website page screenshot
After
  • Condensed Subcategory Menu
  • Icons Are Universally Understood

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

A screenshot about the web page
A scale for the web page
Scrolling down the homepage revealed two sidebars that obstructed key buttons essential for browsing items, severely violating the heuristic of user control and freedom. This critical issue directly impacted the user’s ability to navigate and make purchases.
Hover Above For More Information

Usability Error #3

Our Solution: Remove Sidebars

Website features and products
After
  • Relocated Information To Footer
  • All Buttons Are Now Accessible
 

Our solution involved removing the left sidebar and transforming the right sidebar into a floating chat button. This design prioritizes functionality, allowing users to browse items and access essential buttons while benefiting from the chat feature for guidance.

Usability Error #4

Weekly Specials - Colour & Category Confusion

A section of a page highlighted
A scale to rate the web page
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.
Hover Above For More Information

Usability Error #4

Our Solution: Simplify and Categorize

After
  • Maintained Brand Colours
  • Highlight Products With Photography
  • Clear Message

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

A web page section
A scale for rating the website
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.
Hover Above For More Information

Usability Error #5

Our Solution: Guest Checkout Button

After
  • Add Guest Checkout
  • Smoother Process

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

A section of the web page highlighted
A scale to rate a web page feature
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.
Hover Above For More Information

Usability Error #6

Our Solution: Remove the Automatic Refresh

A cart page
After
  • Add Guest Checkout

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.

  • Conduct heuristic evaluations of other website task flows.

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

Thank you for taking the time to review this case study. If you have any questions, feedback, or would like to discuss further, feel free to reach out via email at jveintrop@gmail.com or connect with me on LinkedIn.

I look forward to hearing from you!