SHOPPERS DRUG MART

Medication Inventory

Role

UX Director

Responsibilities

Design Execution

User Testing

Accessibility

Prototyping

Overview

During the COVID-19 pandemic the world was experiencing a shortage in medications, many of which millions of people’s life depended on. We worked with Shoppers Drug Mart to develop a platform to allow Canadians across the country to search through SDM’s drug inventory.

Medication Search and Results

Medication Inventory Homepage
Medication Inventory List

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
Screenshots showing 3 mobile comps for the medication inventory. First image shows the default search, second image shows once the user starts styping and last one shows the search results.

Stock Availability

Medication Inventory Homepage

Similar Medications

We knew that only showing a certain “not available” to a medication wouldn’t offer any solution, so we created a similar medication accordion, instead of unavailability customers were being offered a list of possible solutions.

Detailed Shot of the Similar Drug Accordion

Similar Medications

We knew that only showing a certain “not available” to a medication wouldn’t offer any solution, so we created a similar medication accordion, instead of unavailability customers were being offered a list of possible solutions.

Detailed Shot of the Similar Drug Accordion

Similar Medications

We knew that only showing a certain “not available” to a medication wouldn’t offer any solution, so we created a similar medication accordion, instead of unavailability customers were being offered a list of possible solutions.

Detailed Shot of the Similar Drug Accordion
Screenshots showing 3 mobile comps for the medication inventory. First image shows the default search, second image shows once the user starts styping and last one shows the search results.

Map View

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

Medication Inventory Homepage
Screenshots showing 3 mobile comps for the medication inventory. First image shows the default search, second image shows once the user starts styping and last one shows the search results.

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