London Drugs

Heuristic Evaluation & Redesign Project for well-known Canadian retail store "London Drugs"

Skills:

Designing with brand constraints
E-commerce
Usability Evaluation

Collaboration with Sherley Ferreira

Duration:

2 weeks

Roles:

Heuristic Evaluator

UX Designer

Assets Collector

UX Writer

Design Challenge Brief 

As picky shoppers, we couldn’t stay away from e-commerce.
We focused our evaluation on the online store with a nationally-focused sales London Drugs.
So why London Drugs? For a few good reasons:

  • It’s a Canadian brand, and one of our values is to help local brands
  • LD is one of the well-known online stores in Canada, yet - sales could be improved with the right design
photo-1574006985667-df54624c194d-1

01 | PROBLEM

Why London Drugs needs a redesign?

Because we tried to buy stuff online and after a few attempts, we would better quit the website and check other online stores. Talking seriously, from the first view we found their navigation very stressful, search  - complicated, virtual product stand - cluttered and checkout was a failure. That could be fixed with a better design. 

Brand Identity

Taking into account the original London Drugs Brand Guidelines was one of the important constraints of this project.

Brand-Identity-2

02 | HEURISTIC EVALUATION

Task Flow Selection

Design Prioritization Matrix

Heuristic Violations List

Task Flow Selection

Upon browsing the London Drugs Website, we saw a few different options for design intervention, but we narrowed our search for the "Search and Add an Advent Calendar to a shopping cart" task using the Desktop version of the web application. 

"Searching and adding an advent calendar to the shopping cart"

Usability Severity

For evaluation we used Jakob Nielsen's 10 general principles for interaction design. We assessed our usability issues on a scale of 0-4, where 0 has no issue, and 4 rendered it a "usability catastrophe". 

06.-Severity-rates-1

Design Prioritization Matrix

In the process of evaluation, we asked ourselves: where did the usability issues affect customers most, and how can we potentially reduce the amount of unnecessary information load on our users? After collecting all the issues into the list, we prioritized them using Design Prioritization Matrix 

Design-Prioritization-Matrix

Violation of the Heuristic #2:  "Match between the system and a real world"

Location: Header

Severity

0

Before

Pharmacy Icon: the UI elements are not easily recognizable

After

  • Header layout changed
  • Pharmacy Icon Updated
  • Search button is highlighted and has more elegant design
dwdw
Issue1-2

Violation of the Heuristic #8: "Aesthetic and Minimalist Design"

Location: Product List View

Severity

1

Before

Slide-16_9-3

As soon as we started our shopping experience and searched for Advent Calendars, we were overwhelmed by the amount of information on the Products List Screen.

After

45

We did the following changes to the product page layout:

  • More space added between filtering options
  • The Product Card is clean and concise
  • Description with the availability of the products turned into Filters with easy "switch on" and "switch off" mode

Violation of the Heuristic #9:  "Help users recognize, diagnose and recover from errors"

Location: Product Details Screen

Severity

4

Before

9.-Issue3

Even though the product is available for shipping to my store, the “Add to cart for ship to the store” button is disabled.

On the "Product Details Screen" we tried to "Ship the Advent Calendar" to the selected store by clicking on the “ADD TO CART” button, but as it was disabled - we couldn’t accomplish the task. Thus, the violation severity was prioritized to  4 - Usability catastrophe. 

After

How

Our design approach was to simplify the flow leaving the accent on the relevant information.
Therefore, the following improvements were done:

  • The “Free Ship to My Store” option is renamed  to “Collect at Store” with a new icon for easy and fast recognition
  • “Review” and “Add to wish list” buttons changed to give a more visual representation 
  • The “Add to Cart” button is highlighted and prompts the user to make a purchase.
  • New Flow motivates customers to make a purchase instead of quitting and leaving the website

 

Violation of the Heuristic #8 "Aesthetic and Minimalist Design"

Location: Cart Preview Pop Up

Severity

4

Before

After

8.Issue2_-5

Overlapped text in the Shopping Cart: price is leasted twice

8.Issue2_-4
  • A new “Cart Preview” pop-up layout
  • The subtotal price is clean and easy to read
  • “Frequently bought together” section added
  • “Change Location” option added to Cart Preview

What was also improved: Store Locator 

Before

After

Frame-5

To pick up calendar in Store in current LD site user is forced to perform an exhaustive search trought the form in pop up window.

 

 

Frame-6

Instead, we designed an easy switch between options and showing to the customer the nearest Store location with available items. Thus we removed an extra step from the flow.
Moreover, the New flow motivates customers to make a purchase instead of closing a site with text-heavy content.

03 | ACHIEVED IMPACT

  • Shorter Task Flow

  • Clean and concise design

  • The meaningful impact was achieved while working with the existing constraints

  • Design improvements are forming a positive shopping experience and contribute to bigger sales

  • Working in a team, we were able to complete everything together with schedules. We enjoyed our collaborative effort and tried to support each to succeed as a team

Let's connect:  krainna@icloud.com

Website design  © 2022 Inna Kravchenko