Final Prototype: Created in Axure, interactive version below
Deepak Pradeep
Product Designer
Pharmacy Chat
Pharmacy Chat is a 24/7 live chat service from Walgreens that customers typically use for prescription status and refills, medication questions, health advice, and pricing and insurance questions.
As Sr. Mobile UX Designer for Native Apps at Walgreens, I was tasked with leading the redesign of Pharmacy Chat for iOS and Android.
Role: UX Designer
Company: Walgreens
Type: Native iOS / Android
Project Length: 3 months (Nov 2017 - Jan 2018)
Methodology: Water-Scrum-Fall
Design Team: UX Designer, Visual Designer, UX Copywriter, Researcher
Tools: Sketch, Axure, Zeplin, PowerPoint, Confluence, Microsoft Planner
Usage Data:
as of Sept 2017
60,000
monthly unique chat sessions
90%
on mobile
Usability Test: User repeats information after being transferred (top), input text is clipped as user attempts to type a long message (bottom)
Problem Summary
Pharmacy Chat was web-based and unoptimized for smaller screens, but over 90% of chat sessions started on a mobile device. This meant there was a huge opportunity for an improved experience.
User research further validated Pharmacy Chat's lack of mobile optimization through a moderated in-person study.
User Groups
Walgreens customers
Pharmacy agents
Goals
Design a native app implementation
Improve UI/UX of chat
Focus on Walgreens customers user group
Increase discoverability of the feature
Approach
Current State Audit: Welcome screen (left), Chat layout (right). Both screens have font readability issues
UX Research
I conducted UX Research to augment findings from user research and data analytics. Following were my findings from each method:
Current State Audit
Low feature discoverability in app
Font readability issues
Usability issues with keyboard display during chat
Audited screens of current native app implementation and evaluated against usability heuristics
Landscape Analysis
Prevalent use of chatbots
Preconfigured response options using Pill UI
Easy fallback to human agents
Analyzed screens and best practices from Amazon Customer Support, Microsoft Customer Support, and Ada.support
Chat Transcript Analysis
Two types of pharmacy agents - Techs and Pharmacists
Opportunity to improve agent-facing Salesforce chat dashboard (out of scope)
Opportunity to improve customer-facing chat categories
Reviewed chat transcripts from Aug 2017 and created affinity diagram based on chat categories
Design Workshop: I grouped "How Might We" sticky notes into an affinity diagram to identify themes post-workshop
Design Workshop
I facilitated an internal design workshop with 7 participants from Product, Business, and the Design team. The purpose of the workshop was to:
Present findings from user research, product analysis, and my UX analyses to have a shared understanding
Document additional user problems by framing them using the How Might We method
Ideate solutions to identified problems using Crazy 8s paper sketching
Phase Prioritization: I grouped ideas into multiple phases based on immediate goals
Phase Prioritization
I captured all the ideas brought up during the workshop and split them up into phases, guided by immediate goals of the project.
Anything required for Minimum Viable Product (MVP) was prioritized for Phase 1, any nice-to-haves such as text-to-speech were pushed to later phases.
Paper Sketch: Bottom Sheet Concept
Sketches
Once I had a good sense of product direction and feature prioritization, I started ideating divergent concepts on paper. Keeping in mind that the goal was to be able to minimize chat and still use other parts of the app, I explored two patterns - Bottom Sheet and Chat Head.
I learned quickly from reviews with the design team that the Bottom Sheet pattern could have issues - the user would have to swipe vertically to reveal/hide chat, which would conflict with system gestures on the iPhone X.
Virtual Chat Assistant: Chatbot Welcome Dialogue Flow
Virtual Chat Assistant
After making layout decisions from paper sketching, I started ideating how to improve the chat experience itself. From discussions with Product, I proposed replacing the existing welcome form, which collected name, email, and purpose of visit, with a rule-based chatbot. I created a flow diagram to demonstrate how this could work, collaborating with the UX Copywriter to meet Walgreens voice and tone guidelines.
There were some internal concerns on the use of chatbots in a medical context (e.g. trust, privacy). I decided to move forward with two concepts - one with chatbot, one without; and then make a final decision based on feedback from usability tests.
Wireframes
I created low-fidelity wireframes to facilitate discussions on functionality and interaction with Product and Engineering. These discussions led to the discovery of edge cases, such as chat time-out, connectivity issues, and blocked user, which I later also documented in wireframes.
Wireframes were created in Axure, and each screen was annotated and labeled, so they could be cross-referenced.
Visual Design
I worked with the Visual Designer to convert key screens into high-fidelity designs. We collaborated closely to solidify icons, layout, and general look and feel, while referring to Walgreens' Design System.
Usability Tests: We showed customers two concepts - Conversational Input with chatbot (left), and Form Input (right)
Usability Tests
I collaborated with the Researcher to create a test script to evaluate two concept prototypes. The Researcher facilitated an in-person moderated usability test with 10 Walgreens customers at our User Research Lab.
Findings
5/10 users preferred interacting with the chatbot as it felt quicker
4/10 users liked the visuals of the Form Input
Users mentioned the Form Input felt more personal, and upon probing we found they felt that way because it asked for their names first, whereas the other version asked later
Some users thought they were talking to a real person while talking to the chatbot, which was a concern
Although both versions had options to minimize chat, users were still wary of losing their place
Final Prototype
Based on findings from Usability Evaluations, the Visual Designer and I decided to make updates to the avatar and name of the chatbot (Virtual Chat Assistant) to make clear that it was not a real person. The UX Copywriter and I also updated copy in the experience to clarify that users could minimize chat without losing their place.
This prototype was the final deliverable used to socialize the new native Pharmacy Chat experience among stakeholders, product managers, and developers.
Tap Health Services -> Pharmacy Chat on the screen here to test it out. Also explore contextual placements in Prescriptions, Shop Products, and Store Locator aimed at increasing feature discoverability
Pharmacy Chat: Also optimized for Android and Tablet devices
Results
After 3 months of user research and design work, I worked with engineers to implement and quality analyze (QA) the feature. The new native Pharmacy Chat was eventually launched in April 2018 on iOS and Android.
The Product team saw that contextual placements greatly improved utility and drove usage, leading to an increase in unique chat sessions from about 60,000 to 112,000 in one month.
Download the Walgreens app and give it a try:
3
Design iterations
2
Usability tests
20
User interviews
86%
Increase in chat sessions