Usability Evaluation of Lori’s Gifts Website

Systematic Identification of Usability Concerns in Lori's Gifts.

8 min read

3 months

Group project

UX researcher

Figma, Excel, Zoom

SUS Score

64.8

Poor User Experience

Success Rate

67%

Across 3 tasks

Average Task Time

214s

Across 3 tasks

Overview

Overview

Overview

Lori’s Gifts operates hospital gift shops across the United States, providing an online platform for purchasing gifts for patients. The website, however, was found to have significant usability issues through initial heuristic evaluation and cognitive walkthroughs.

Goals

Lori’s Gifts operates hospital gift shops across the United States, providing an online platform for purchasing gifts for patients. The website, however, was found to have significant usability issues through initial heuristic evaluation and cognitive walkthroughs.

Goals

Lori’s Gifts operates hospital gift shops across the United States, providing an online platform for purchasing gifts for patients. The website, however, was found to have significant usability issues through initial heuristic evaluation and cognitive walkthroughs.

Goals

Identify major design and usability problems.

Measure Site Performance, user satisfaction and ease of task completion.

Provide actionable recommendations to enhance the user experience.

Methodology

The study utilized a summative usability testing approach. Participants were recruited from a target demographic of online shoppers, mostly aged 18-30.

Methodology

The study utilized a summative usability testing approach. Participants were recruited from a target demographic of online shoppers, mostly aged 18-30.

Methodology

The study utilized a summative usability testing approach. Participants were recruited from a target demographic of online shoppers, mostly aged 18-30.

Heuristic Evaluation Summary

Heuristic Evaluation Summary

Heuristic Evaluation Summary

The heuristic evaluation conducted using NN Group’s criteria yielded several critical areas for improvement. These ranged from visual inconsistencies to functional inconsistencies.

The heuristic evaluation conducted using NN Group’s criteria yielded several critical areas for improvement. These ranged from visual inconsistencies to functional inconsistencies.

The heuristic evaluation conducted using NN Group’s criteria yielded several critical areas for improvement. These ranged from visual inconsistencies to functional inconsistencies.

Examples

Poor accessibility

Button contrast in the hover state doesn’t meet WCAG 4.5:1 contrast ratio standards.

Follow conventional standards and make the hover state color a darker shade of the existing red color used.

Poor design consisty

Inconsistent typographic scale and poor legibility across similar sections make the page feel visually fragmented.

Standardize a compact typographic system, use solid or semi-opaque overlays for text on images, and align spacing and CTAs.

Examples

Poor accessibility

Button contrast in the hover state doesn’t meet WCAG 4.5:1 contrast ratio standards.

Follow conventional standards and make the hover state color a darker shade of the existing red color used.

Poor design consisty

Inconsistent typographic scale and poor legibility across similar sections make the page feel visually fragmented.

Standardize a compact typographic system, use solid or semi-opaque overlays for text on images, and align spacing and CTAs.

Examples

Poor accessibility

Button contrast in the hover state doesn’t meet WCAG 4.5:1 contrast ratio standards.

Follow conventional standards and make the hover state color a darker shade of the existing red color used.

Poor design consisty

Inconsistent typographic scale and poor legibility across similar sections make the page feel visually fragmented.

Standardize a compact typographic system, use solid or semi-opaque overlays for text on images, and align spacing and CTAs.

Cognitive Walkthrough Summary

Cognitive Walkthrough Summary

Cognitive Walkthrough Summary

T1

Ordering a gift for a newborn

T2

Applying for a job

T3

Finding and redeeming a coupon

Using Wharton et al.’s method, during each step of the tasks we asked:

Can the user identify the correct action? Will they understand what it does? And will they see that it’s working as intended?

Examples

Improper Labels

None of our participants were able to predict that the 'REWARDED' section was inside 'SHOP LORI'S'/

Slightly renaming the category to accommodate the rewards program , or promoting it on their home page.

Examples

Improper Labels

None of our participants were able to predict that the 'REWARDED' section was inside 'SHOP LORI'S'/

Slightly renaming the category to accommodate the rewards program , or promoting it on their home page.

Examples

Improper Labels

None of our participants were able to predict that the 'REWARDED' section was inside 'SHOP LORI'S'/

Slightly renaming the category to accommodate the rewards program , or promoting it on their home page.

Usability Test Summary

Usability Test Summary

Usability Test Summary

Moderated remote usability test

30 Participants

3 Tasks

4 metrics tracked

T1

Buying gifts based on ratings

T2

Finding and redeeming a coupon

T3

Leaving a product rating

Major Findings

Major Findings

Major Findings

Complex Navigation

Confusing navigation across the site, particularly with finding reviews, coupons, and leaving reviews. The absence of breadcrumbs and inconsistent navigation contributed to confusion.

Follow conventional standards when designing a navigation scheme.

Redirection Issues

The website frequently redirected participants to other sites without prior warning, which caused distrust and made tasks more complicated.

Warn users before redirecting them. Open new websites in a new browser tab.

Inconsistencies in Design

Inconsistencies in the design, such as different button styles, font styles, and background fills which made the website appear inconsistent.

Unify the contents by using a design library. Eventually, aim for a design system.

Difficulty Finding Information

Participants had difficulty locating necessary information, such as where to leave a review or how to use coupons. This often led to task failures or frustration.

Follow conventional standards when designing a navigation scheme.

Perception of Security

Some participants’ browsers flagged certain pages as unsafe, which further diminished trust in the website.

Mitigate security risk by verifying web certificates and SSL.

Recommendations

Recommendations

Recommendations

Improve Navigation

Implement a consistent navigation structure and include breadcrumbs to help users orient.

Eliminate Unnecessary Redirections

Ensure users stay on the main website without unnecessary redirections. Provide warnings when redirected.

Standardize Design Elements

Apply consistent design standards, including uniform button styles, font sizes, and text formatting.

Enhance the Review Section

Improve ‘Customer Reviews’ section to display product specific reviews, to help users make informed purchases.

Address Security Concerns

Ensure that all pages are secure and do not trigger browser warnings, which can undermine user trust.

Clear and Consistent Terminology

Use consistent terminology like renaming the ‘Rewarded’ section to ‘Coupons’ to better align with user expectations.

Create a free website with Framer, the website builder loved by startups, designers and agencies.