Deepak Pradeep
Product Designer

Pharmacy Chat

Final Prototype: Created in Axure, interactive version below

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
Pharmacy Chat

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
Pharmacy Chat

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

Pharmacy Chat

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:

  1. Present findings from user research, product analysis, and my UX analyses to have a shared understanding

  2. Document additional user problems by framing them using the How Might We method

  3. Ideate solutions to identified problems using Crazy 8s paper sketching

Pharmacy Chat

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.

Pharmacy Chat

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.

Pharmacy Chat

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.

Pharmacy Chat

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

  1. 5/10 users preferred interacting with the chatbot as it felt quicker

  2. 4/10 users liked the visuals of the Form Input

  3. 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

  4. Some users thought they were talking to a real person while talking to the chatbot, which was a concern

  5. Although both versions had options to minimize chat, users were still wary of losing their place

Final Prototype: Created in Axure, click to interact

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 PrescriptionsShop Products, and Store Locator aimed at increasing feature discoverability

Pharmacy Chat

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:

App Store Play Store

3
Design iterations
2
Usability tests
20
User interviews
86%
Increase in chat sessions