Shoppers Drug Mart - Capstone Project

Role

UX Designer

Client

Shoppers Drugmart

Loblaw Digital

Timeline

4 Months

Completion

2022

Project Summary

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.

Role & Activities

My role as a UX designer was to ideate early concepts, research user personas, and present the final product to clients. The goal was to ensure the UI/UX matched the company's branding and that the features implemented were relevant to the brand's customer base. More importantly, our team assured the app supports integration with their information architecture and is scalable in the long term.

Background

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.

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.

Goal

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.

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.

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:

Create an onboarding experience that allows users to choose their preferred consumer experience—pharmaceutical, retail or both
Create a modern and personalized homepage with prominent features based on users' preferred journey
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:

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

Outcome

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.

Our final prototype had three core features:

Personalized homepages based on the user's preferred user journey during the onboarding process
New and improved visuals
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

‍

Get in touch with me

Shoot me an email at monique@moniquedanao.com

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.