Shoppers
Project Name
Shoppers Drug Mart
Client
Shoppers Drug Mart
Timeline
4 Months
Completion
2022
Project Hero Image

Overview

Shoppers’ digital pharmacy reported a decline in online transactions and customers as more patients moved to competitor pharmacies. We conceptualized and redesigned the pharmacy digital experience to help the company attract more patients and boost retention. This capstone was a collaboration between George Brown College and the Loblaws Digital Team.

Problem

What makes a good pharmaceutical experience? Shoppers Drug Mart is Canada's largest retail pharmacy chain with more than 1,300 stores throughout the country. Historically, the brand’s retail experience overshadowed its pharmaceutical experience. As a result, the mobile app had an extremely cumbersome user journey that resulted in a 5% decline in patients requesting for online prescriptions and a 15% increase in patients aiming to transfer their prescriptions to a competing pharmacy.

Shoppers Drug Mart tasked our team to increase traction for their online pharmaceutical user journey in mobile and web platforms. The final product must be able to track this modification's success from the number of transactions, patient registration, and OSAT score. Our team examined the factors that went into designing a seamless pharmaceutical experience and prioritized features that were highly relevant to its customer base. We also worked closely with the company’s product team and surveyed current customers to identify issues and solutions.

Research

Shoppers is a leader in Canada's retail drug store marketplace. The company's popularity is due to its accessibility and 1,307 locations within the country.

Our team worked with the Shoppers Drug Mart product team to understand how their online pharmaceutical process worked. To determine the ideal pharmaceutical experience, we conducted a competitor analysis with its direct competitor in Canada—Rexall. Rexall Pharmacy Group ULC is a chain of retail pharmacies in Canada.

Through feature comparison, we analyzed the strengths and weaknesses of Shoppers and Rexall. Our findings revealed that Rexall's website focuses more on medical products and healthcare services. Their app has more medical resources, more personalization, and better-performing SEO.

Shoppers is owned by a grocery chain company—with retail as its primary focus. While the brand offers a wide range of products and categories, its in-app pharmaceutical services and features were overshadowed by its assortment of retail goods.From there, we conducted brainstorming sessions and developed a series of proposals during the exploratory phase, so users could request medications and easily use drugstore services.

project-image

Opportunities

Given that the company's retail aspect is equally important as its pharmaceutical aspect, could we make the pharmaceutical experience more prominent among users who availed of their pharmaceutical products and services?

Based on this problem, we focused on three main areas:

  1. Create an onboarding experience that allows users to choose their preferred consumer experience—pharmaceutical, retail or both
  2. Create a modern and personalized homepage with prominent features based on users' preferred journey
  3. Brainstorm personalized features and enhance current pharmaceutical-related features to make it easy for users to get their medication

Feature Prioritization

At this stage, we had information about Shoppers' pharmaceutical experience and popular in-app features based on its competitors. To determine core features in our redesign, we classified Shoppers' features into two categories: pharmacy-related and shopping-related.

Our primary focus was the features on the upper right quadrant - deemed high priority and pharmacy-related - for our planned prototype.

Surveys & Interviews

Next, we examined the viability of pharmaceutical-related in-app features. We surveyed users to understand their target audience. These respondents were selected and classified based on three age groups: youth, middle-aged, and seniors. To get qualitative insights, we asked about their brand-related experience, in-store experience, and mobile app experience. These 20- to 30-minute conversations allowed us to discover their motivations, shopping-related behaviors, and pain points.

From the affinity mapping, we developed three personas based on our three age groups: youth, middle-aged, and seniors. These include a student named Alison (youth age range), a parent and dedicated employee named Farah (middle-aged adult age range), and a retiree named Dan (senior).Allison was our primary user, as most Shoppers' customers who use the app belonged in the 20 to 35 age range. Interestingly, we learned respondents among all age groups were overwhelmed by the app's complex onboarding and pharmaceutical experience.

User Flow

Our user flow is designed around our primary persona, the busy young adult who wants a faster and more efficient way to access pharmaceutical services.Users must log in to the mobile app and pick their preferred language. From there, they could sign in to their account or continue as guests.Next, users can choose their preferred Shopper's experience—pharmacy, retail, or both. More importantly, they can select the options they want to prioritize and make them more prominent on the homepage.

Sketching, Wireframing, and Low Fidelity

Based on our personas, we started the process of ideating features for the app — first on sticky notes, then through individual sketches, then in wireframes, while refining details in each stage.

We built the first iteration of our prototype in Figma from our sketches. Our low fidelity was mainly black-and-white, so users testing the app could focus on functionality, not aesthetics.

Usability Testing

We conducted three user tests. We interviewed people from three age groups: youth, middle-aged, and adults, to determine their perception of our prototype. We put a mobile phone loaded with the prototype in Figma and assessed their initial impressions.

Here's what we learned:

  1. The current Shopper's homepage seems complex. The text needs to be more readable for seniors, and it needs icons.
  2. They liked the onboarding experience in our prototype better than the Shoppers' app because it was easy to use and intuitive.
  3. They want a personalized homepage tailored to their preferred features.

project-image

Design Solution

We built a high-fidelity prototype focused on two main features—onboarding and personalization. We refined our mockups and low-fidelity prototypes based on user testing. Using the branding guideline established by Shoppers Drug Mart, we created custom illustrations to make our user journeys more appealing.

project-image

Seamless onboarding

We allow users to choose their primary experience—pharmacy, retail, or both. This personalized approach tailors the app to individual user priorities right from the start, making it easier and faster to access the features that matter most.

Prioritization

After choosing their preferred experience—pharmacy, retail, or both—Shoppers Drug Mart app users can further personalize their journey by prioritizing essential services such as prescription refills, health check-ups, and more. They can also set up a profile, select their preferred pharmacy location for easy access, and add emergency contacts—a feature especially valuable for elderly patients who may rely on family or friends for assistance.

Personalized homepage

The Shoppers Drug Mart app offers a personalized homepage tailored to each user’s preferred experience—pharmacy, retail, or a combination of both. Pharmacy-focused users can quickly access prescription refills, health card, and medication reminders, while retail-focused users see easy navigation to shopping categories, rewards, and promotions. For those who choose both experiences, the homepage integrates top services from both pharmacy and retail, creating a balanced view that meets a variety of needs in one convenient location.

Outcome

Our final prototype had three core features:

  1. Personalized homepages based on the user's preferred user journey during the onboarding process
  2. New and improved visuals
  3. Clear homepage navigation

The design of the final prototype supports integration with the app's information architecture. As such, the company can track the modifications and determine the number of transactions, patient registration, and OSAT score