Final Prototype: Created in Axure, interactive version below
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
Type: Native iOS / Android
Project Length: 3 months (Nov 2017 - Jan 2018)
Design Team: UX Designer, Visual Designer, UX Copywriter, Researcher
Tools: Sketch, Axure, Zeplin, PowerPoint, Confluence, Microsoft Planner
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.
- Walgreens customers
- Pharmacy agents
- Design a native app implementation
- Improve UI/UX of chat
- Focus on Walgreens customers user group
- Increase discoverability of the feature
I conducted addition UX Research to augment findings from user research and data analytics. Following are my findings:
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
- 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
I facilitated an internal design workshop with 7 participants from Product, Business, and the Design team. The purpose of the workshop was to:
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 and accessibility features such as text-to-speech were pushed to later phases.
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
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.
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.
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.
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.
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
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
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: