IMAGE OF BIOLOGICS IN TREATING ASTHMA

Fusion x64 TIFF File

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

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

MY ROLE: UX/UI Designer

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

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 efficiency and accuracy of managing their patient's conditions. 

WHITEBOARD SKETCHES TO MID-FIDELITY
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-

Design 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

Dashboard Design

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

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. 

Selected Work

© 2020 Kristen Kelly. All rights reserved