Analyze this
Optimizing account sign up
for Shoppers Drug Mart Online Pharmacy
Research, growth design, UX / UI design
6 min read
Shoppers Drug Mart Online Pharmacy is a web and app product that allows customers to manage their prescriptions online. I led the research and design efforts to increase conversion for our lengthy sign up process. After multiple cycles of build-measure-learn, the resulting work led to a 107% increase in conversion.
In this case study:
The problem: Large drop offs during account creation steps
What I did: Develop & iterate on the new account creation process
The results: A 107% increase in conversion for account creation
What I learned: A few takeaways
Highlights
Product: Shoppers Drug Mart Online Pharmacy
Users: Pharmacy patients with ongoing prescription medications
Product by the numbers: 2.4M users/accounts, 3,600+ enterprise users
Role: Researcher, Lead UX/product designer
Other team members: Luke Lockhart (Product manager), Nick Kuhne (Product manager)
Timeline: Two sprints (8 weeks, 2 weeks)
Sector: Healthcare, Pharmacy, Retail
Skills & methods: Experimentation, A/B testing, Qualitative research, Generative research, Customer interviews, Evaluative research, Usability testing, UX design, UI design, Facilitation, Quantitative data
Tools: SiteSpec, Adobe Target, Miro, Sketch, Abstract, Zeplin, Realtimeboard
Artifacts: Flows, wireframe sketches, screens, presentation decks
The problem
Signing up for Shoppers Online Pharmacy was not an easy process. Users needed to complete several steps and provide information that they often didn’t have on hand. Our product could only be used with an account, so it was essential to make signing up as easy as possible.
Users repeatedly showed us intent to sign up (by entering the flow), but got frustrated or locked out at one of the steps further down. Our analytics showed us large drop offs (61% and 19.1%) at two of the steps. We set out to find out why and to explore how to fix it.
Analytics showed large drop offs towards the end of the sign up funnel
Account creation consisted of 3 steps, where users had to enter personal info, prescription and store number and verify their identity through a series of 4 multiple choice questions
What I did
I developed the new account creation process and iterated on it based on users’ response on the live site.
Defining the problem
I ran a workshop with the team to define what problem we are solving and what hypotheses we have on why users stumble during sign up.
Working with the product management, business intelligence & strategy teams, I mapped out hypotheses of what may hinder account creation for users. We then revisited these after conducting research and checking data.
Qualitative research, data & analytics to understand
current state
I mapped out all that we know about the sign up flow from existing qual research, customer surveys and analytics. This helped identify gaps in our knowledge. I then conducted generative research, pulled missing data (with the wider team’s help) and set up 3 A/B tests on the current flow to get a fuller view of what parts of the flow were not working and why. I discovered that users’ mental models did not always align with what we were actually asking from them during sign up. I shared the results through another workshop, where we identified next steps as a team.
(above) Contextual inquiry, watching customer sign up for Online Pharmacy in their homes. Other research included interviews with customers who abandoned account sign up and ones who signed up, but never used the application.
A/B testing to validate ideas that came out of research sessions on the live site
A workshop mapping out research findings, data (analytics, A/B testing results) and next steps
Constraints exploration
We had to collect specific types of data during account creation to keep customers’ personal health information secure. Working closely with the dev, regulatory and privacy teams, I mapped out what data we absolutely had to collect and what alternatives we had available.
(top left) Workshop with the development team to map out potential sign up flows;
(top right) Visualizing ideas for data collected during sign up for the regulatory and privacy teams
Mapping out data collected and stored for other account types.
These inputs could be skipped and auto-filled for these users.
Design & test
I did a competitive scan for other best in class sign up flows. Next, working closely with my PM, I created design explorations of what an alternative sign up flow could look like. I conducted usability testing on the prototypes of the top four ideas. We came up with the final version based on user input as well as privacy team recommendations.
Mapping out happy and unhappy paths for the new account creation process
Sketches, high fidelity design explorations and analysis of usability testing findings from prototype testing
All this work resulted in the final designs.
In Step 1, I adjusted the informational right siderail panel based on usability and A/B testing. It now warns the users what they’ll need to provide next.
Step 2 is now replaced with simply locating your pharmacy. This change fits better with pharmacy customers’ mental models, as we discovered through contextual inquiry. We removed the option to skip steps, based on A/B testing.
Finally, in Step 3 we removed the most confusing question based on analytics and contextual inquiry.
I also adjusted the UI to be more breathable and easy to use, especially on mobile.
Version 1 release
Ship version 1 and measure results
Analytics of a typical 3-month period after Version 1 release showed significant improvement in completion of the last two steps and in the total percentage of users who complete the entire flow
More usability testing on the live site with real customer data
Once the new design was live, I conducted more usability testing on the live site. I recruited Shoppers customers who were able to use their real information to sign up. I uncovered epic fails with Step 1 of the process. We could not see these issues in our analytics, partially because of how we tracked our error messages. After sharing the findings with the product team, we decided to adjust our roadmap and prioritize fixing these UX issues. I worked with our centralized Accounts team to change Step 1, integrating their suggested design.
Usability testing on the live site with real customer data showed that the Loblaw universal login (PC™id) was causing confusion and friction for customers during Step 1 of account creation
Ship version 2 and measure results
Analytics of a typical 3-month period after Version 2 release showed further improvements in the percentage of users who make it through the overall account creation flow
Results
The resulting work led to a 107% increase in accounts created. That significantly boosted our product revenue: once users were able to sign up and actually use the product, they could place many more prescription refills online.
Analytics over a typical 3-month period after the latest version release showed a 107% increase in the percentage of users who were able to make it through the entire account creation flow
Lessons learned
I learned about the importance of considering data sets and testing on the live site. I also saw that the flashiest solution is sometimes the least effective.
The answers are in the data sets
If the account creation process is complex and pulls from different sets of data, the main design constraint becomes what data we have available, how clean the data is and what is the minimum acceptable amount of information to verify from the legal and regulatory perspective.
Test it, for real
I got a much fuller view of user friction points through testing on the live site with real customer data. Prototype testing, as useful as it is, often misses the complexities of what happens when real customer data gets pulled from various interacting databases, and how users interpret the resulting error messages.
Don’t get enamoured by sexy tech
One of the solutions tested involved taking a selfie and a photo of an ID. A combination of AI and some customer support would then check the match for authenticity. This seemed like an exciting mobile-first option to explore. In usability testing it proved to be the worst-performing prototype. ID photos kept being rejected because it was difficult to take pictures without any glare. Customers also had privacy concerns: selfie photos felt very intrusive in the context of signing up for a health-related service.