01. The Problem
Walgreens Boots Alliance is a global healthcare entity offering combined services in retail pharmacy, health and daily living access across the U.S and Europe. Despite this success, they face a nagging issue – Searching for a patient and their order. To change this, a few of us set out to revolutionize the system by accomplishing a few things simultaneously:
a. Provide a better user experience for team members with an accurate, adaptable searching capability.
b. Optimize workflow efficiency with mobile and touch-based devices.
02. My Role & Process
I was the visual designer in a seven person team along with a Product Manager, two Business Analyst, UX researcher, Principal UX Designer, and UX Designer. We followed an agile UX process that facilitated a task analysis, wireframes, concepts, and design validation. I was responsible for the visual design of UI.
03. Defining what is a Search
Research & Discovery
The UX researcher did a user research session with technicians, pharmacists to discover search issues and favorite search method within the context a customer picking up at the drive-thru. They were asked to choose a “Primary” and “Secondary” method. Using common parameters such as Lastname, Phone Number, DOB in various combinations yielded the result:
Other Issues
a. Team members are forced to search by one parameter only. This resulted in a longer wait time and longer list.
b. Searching for a hyphenated name was problematic, as the search only looks at the characters after the hyphen ( – ). So, for example, searching for patient name “Jones” will only return the patients in which “Jones” appears after the hyphen. A patient named “Jones-Richards” will not be returned.
c. Names that: contain spaces, imply spaces, or contain special characters like Sor Enson, Mcnelly, or O’ Teil is problematic.
Making Sense of Data
After gathering data, we identified the various pain points and created a list of design recommendations addressing the ‘patient search’:
-Smart Search: Incorporating applicable attributes similar to companies like Google.
-Eliminate pain points such as: Ignore spaces and special characters in names so that: A search for “OReilly” returns “O’Reilly” and “O’ Reilly” and “OReilly”.
-Create a way to look-up names with different spellings like “Mark” and “Marc”.
-Use the search parameter to search on both sides of hyphenated names within the database. For example, a search for “Reagan” will return: “Reagan” and “Reagan-Jones” and “Jones-Reagan”.
Imagining Search
Working from an Agile process, we brainstormed for divergent ideas using Figma’s collaborative environment. With the guidance of Google Material Design and Android Nexus 10 tablet in mind, I created a few visual UI concepts from the UX wireframes.
Wireframe iterations
High Fidelity Screens of Search
04. Patient Order Details
Research & Discovery
In conjunction with the search is a profile of patient order. So myself along with team members held a research session with technicians, pharmacists to discover what is an order and what it entails. To do this, we created and printed a wireframe of a what an order page would look like and request they comment.
Ideation through collaborative sorting
To start this phase, we conducted a collaborative sorting exercise as a team to examine emerging patterns and groupings of activities around details of a patient. Going the extra step, we also solicited their artistic imagination of what they think the Patient Order Details page should look like.
Based on the research and collaborative sorting, we identified the various pain points and created a list of design recommendations addressing the ‘patient order details’.
-Participants wanted the feature of having items a clicked away such as Forms etc
-They also requested the idea of having access to patients via tabs. Similar to browsers like Google Chrome with multiple tabs.
-Make certain areas like comments editable.
Defining the Patient Order Details
Working in an Agile environment allowed for iterations while working under tight deadlines. Using UX designers wireframe as a base, I started to create iterations of what it visually should look. Starting with a barebones wireframe in Figma and UI design drafts for users to gauge users impressions.
Settling on the Patient Order Detail
After much iterations, user testing and quality analysis this design was approved.
06. Converging on a Design
To give Walgreens team members and stakeholders an idea of what a typical search would look like, I created this Invision prototype to demonstrate it.
Final Thoughts
Collaboration
Having an open and collaborative environment with teammates played a huge role. I believed objectivity, constructive criticism and free flowing of ideas helped to shape the product into what it is today. When there was a major issue, we had a group meeting to identify and solve the issue.
I’m currently available!
