SHOPPERS DRUG MART

Medication Invetory

Role

UX Director

Responsibilities

Design Execution

UX Research

User Testing

Accessibility

Prototyping

Overview

Shoppers Drug Mart partnered with us to design a platform that allowed their customers to check medication inventory based on location, during a time when shortages were affecting people across the country. The real challenge was how to present scarcity without creating more panic. A map full of red dots wouldn't help anyone. So we developed an iconography style that avoided unnecessary alerts, and when a medication wasn't available, we offered alternatives, either at nearby locations or with similar drugs.

Medication Search and Results

Medication Inventory Homepage
Medication Inventory List

Iconography

We created custom icons to represent each medication, and also used circles as quick visualization for the medication strength. The circles allow users to quickly scan the list looking for the right strenght.

Detailed Shot of the Medication List and Icons

Iconography

We created custom icons to represent each medication, and also used circles as quick visualization for the medication strength. The circles allow users to quickly scan the list looking for the right strenght.

Detailed Shot of the Medication List and Icons

Iconography

We created custom icons to represent each medication, and also used circles as quick visualization for the medication strength. The circles allow users to quickly scan the list looking for the right strenght.

Detailed Shot of the Medication List and Icons

Mobile List

On mobile we created a sticky column that allows the user to scroll both vertically and horizontally while keeping the “Check Stock” button always available.

Detailed Shot of the Medication List and Icons

Mobile List

On mobile we created a sticky column that allows the user to scroll both vertically and horizontally while keeping the “Check Stock” button always available.

Detailed Shot of the Medication List and Icons

Mobile List

On mobile we created a sticky column that allows the user to scroll both vertically and horizontally while keeping the “Check Stock” button always available.

Detailed Shot of the Medication List and Icons

Stock Availability

Medication Inventory Homepage

Similar Drugs

Some customers may feel anxious if their medication is not available so we designed a system that allows them to check the availability of similar drugs, an easy to access accordion opens with a list of drugs and their availability without having to leave the page.

Detailed Shot of the Similar Drug Accordion

Similar Drugs

Some customers may feel anxious if their medication is not available so we designed a system that allows them to check the availability of similar drugs, an easy to access accordion opens with a list of drugs and their availability without having to leave the page.

Detailed Shot of the Similar Drug Accordion

Similar Drugs

Some customers may feel anxious if their medication is not available so we designed a system that allows them to check the availability of similar drugs, an easy to access accordion opens with a list of drugs and their availability without having to leave the page.

Detailed Shot of the Similar Drug Accordion

Map View

The default view is set to list, but using the tabs on the top left corner the users can switch to map view. Where the screen is split in half showing the map and list together, allowing the user to get a location based overview .

Medication Inventory Homepage

Similar Drugs

On mobile the list is hidden, giving more space for a full view of the map, clicking one of the location icons reveals the additional information.

Detailed Shot of the Similar Drug Accordion

Similar Drugs

On mobile the list is hidden, giving more space for a full view of the map, clicking one of the location icons reveals the additional information.

Detailed Shot of the Similar Drug Accordion

Similar Drugs

On mobile the list is hidden, giving more space for a full view of the map, clicking one of the location icons reveals the additional information.

Detailed Shot of the Similar Drug Accordion

CONTENT

Medication Search
Stock Availability
Map View

Let's Chat!

© 2026 Marcelo Luft