AstraZeneca offers B2B customizable analytic dashboards to patients and medical providers. 

Project Brief

OVERVIEW

Asthma patients are required to enter information into a mobile app that is recorded to their electronic medical record (EMR) which is shared with their care team of doctors and nurses. The care team can view each patient’s EMR.

AUDIENCE

Asthma patients on medication and their care team of doctors, nurses, hospital staff. 


MY ROLE

UX/UI Designer

DELIVERABLES

Dashboard UI 

TERMINOLOGY

  • EMR: Electronic Medical Record
  • Care Team: a care team of doctors, nurses, and medical staff
  • Triage:  The assignment of degrees of urgency to decide the order of treatment of a large number of patients. 

 

UX RESEARCH

CHALLENGE—How might we empower medical providers to track their patients' activities and data to make fast and accurate decisions?
SOLUTION—If we create a customizable dashboard, we can help medical providers view all the data they need in one place, which will help them make quick data-driven decisions to increase the efficiency and accuracy of managing their patient's conditions. 
WHITEBOARD SKETCHES 
The Senior UX  Designer and I brainstormed by whiteboarding in design jam sessions, then taking pictures with our phones to place them into Sketch. We then traced over the pics to create mid-fidelity wireframes.
INCLUDED FEATURES—
  • Top bar with logo
  • User login 
  • Left and right side panels 
  • Top patient cards
  • Timeline
  • Scatter Plot
00.1.1_Wireframes + Low Fid

Key Discoveries

00.1.3_Key Discoveries CHART

Personas

Nurse
AMY

SCENARIO

Dana, an internal medicine practitioner at Mount Pleasant Hospital, walks into the room of her patient, Amy Coleman. Since Amy sent a message using the Full Breath app, Dana needs to review Amy's medical records to see if the insights on Amy's condition have changed since her last visit.

USER STORY

As a medical practitioner, I want to know the patient's conditions' insights, so I can treat them efficiently.  

USER JOURNEY

Dana is the primary user.

Lucidchart-User-Journey_AZ-Healthcare-Platform-Dashboard-

The Process 

PATIENT INFO

The design process started at the top. The top of the dashboard has information about the patient including their MRN (Medical Record Number). In this image, the patient's name is Amy Coleman, a member of her care team's name is Dana Smith.

01.1_Patient Info
01_Patient Info with Side Panels Closed
02_Patient Info with Side Panels Open
SIDE PANELS CLOSED

Then the side panels were designed. There are two side panels that can be collapsed closed or opened, so the user has visibility with less cognitive overload. In the gif shone below, once the patient's name is chosen, the panels closed. Both designs were tested. 

 

SIDE PANELS OPENED

The design has important patient info is to the left, and messages and notes to the right. Notes were appreciated in user testing,

Left panel 

  • Patient List: A  triaged list of the patient with icons that symbolize different medical conditions like ER visits. 
  • Filter: These conditions can be filtered by a checkbox interaction or an inputting field.

Right panel 

  • Show messages between the care team and the patient. 

  • Area for notes

THE CHART

This is the main focus of the chart. It is designed to be connected to an EMR (Electronic Medical Record) and uses machine-learning to update the data and also linked with EPIC Pharmacies.

  • Scatter Plot: The central area of the dashboard is the patient's recorded data shone on a scatter plot. 
  • Timeline: Above is a timeline of 30-day increments. Dates align with the graph. 

Panel Titles 

  • Patient's Day

  • Symptoms

  • Rescue Medication 

  • Maintenance Medication

  • Triggers

  • Peak Flow

  • FEV1

  • Asthma Control Test

  • Air Quality: Trees, Grass, Weeds, Humidity

The panel titles can be collapsed with an arrow as the signifier.

03.1_The Graph Main
03_The Graph
03_The Plots

THE PLOTS


  • Color-coded: The color-coded plots are for efficient recognizability.  
  • Recognizable Symbols: During a design-sprint meeting, the app engineer proposed a checkmark and x symbol for the medication data.    
HOVER ELEMENTS

A user can hover over plots for info.

  • Plot Hovers: when a user hovers over a scatter plot, a hovercard will pop up with a condition report. 

  • ER Visits: A large red line hovers over the date of an emergency room visit to indicate the importance.

03_The Hovers

THE DASHBAORD WAS DESIGNED IN SKETCH

Dashboard-Full-inSketch
AZ_inVision-Prototype
Basic functionality with exportable PDF for print, with page-breaks & invite email for app.

THE IMPACT

It was presented to stakeholders for a partnership. It also has been tested in hospitals by medical practitioners. My design team made a handoff to an East coast team to continue to iterate and test in a healthcare environment. We provided ideation and an organized design system. Contact me for more details and also about the app prototype linked to this dashboard. 

© 2021 Kristen Kelly. All rights reserved