Biomotivate Internship

UX Design & Data Visualization | May 2021 - September 2021

UX Design Team

  • Designed and prototyped staff dashboards and user interfaces for staff at Opioid Addiction treatment centers using patient biometric data, allowing them to clearly analyze trends in patient's behavior 

  • A/B tested prototypes with staff at centers around the region to get feedback and develop 30+ iterations

Data Visualization Team

  • Worked on developing the functional dashboard to display and parse patient tech wearable data using JavaScript D3, HTML, CSS to improve the current method of information organization at many treatment centers

Solo Patient Journey Map Project

  • Created workflows and a comprehensive patient journey map for a National Institute on Drug Abuse competition based on interviews

  • Won second place, awarded $30,000 and publication on the national website 

Tools

Skills

Figma
Javascript (D3)
HTML/CSS
Adobe Illustrator
InDesign
Storyboarding
Prototyping
A/B Testing
Interviewing
User Testing
Wireframing
User Research
Frame 200 (6).png
 

UX DESIGN TEAM

Staff Dashboard Redesign & Development
3 Month Project | Figma Prototyping, Illustrator

Primary Problem

Opioid addiction treatment center staff often struggle to organize and manually analyze paper trials of untabulated patient data. Unorganized information makes it difficult to analyze critical trends in biometric data collected from wearable devices and identify potential risks in patient behavior. More effective communication between staff and patients can contribute to preventing relapses in treatment centers.

Solution

As a part of the UX Design team, I designed and prototyped dashboards and user interfaces that summarize patient biometric data (sleep cycles, heart rate (HRV), emotional activity (EDA), mood logs, events), helping staff in treatment centers better identify high-risk patients. Developed  30+ iterations  of staff dashboard redesigns consolidating patient information into 4 different pages: Trendview weekly, Trendview Daily, Card View, Snapshot View, each fulfilling different staff needs.

Secondary Problem

A/B tested functional prototypes with Opioid addiction treatment centers in Ohio and Pittsburgh, in addition to a series of presentations for an AIM research grant, to develop more effect iterations from feedback. 

Several professionals mentioned that too much information is displayed on the interface; the page was  too dense and cluttered which made it difficult to comprehend necessary details.

 

Design Process

Trendview Daily & Weekly Pages

  • 2 Pages: Displays patients' weekly and daily biometric data for multiple measures (EDA, Heart Rate, Mood,
    Sleep, Events, Cravings, HRV, Weather)

  • Process: Developed 20+ iterations consolidating patient information and user tested with Opioid Addiction Treatment Center Staff. 

  • Target audience: Staff at treatment centers

  • Key Insight: After A/B Testing the original iteration with staff, the main key insight was that too much information is displayed on the interface; the page was  too dense and cluttered which made it difficult to comprehend necessary details to identify trends in patient behavior or find necessary data quickly. 

Original Trendview Daily Design

Original.png

Original Trendview Weekly Design

Original (1).png

Overall Redesign Decisions

Group 3351 (1).png

Integration of Search Bar

Staff are able to filter to include certain events or date ranges to locate symptoms and identify trends 

Integration of a Date Adjuster

Added a scrolling week adjuster menu to indicate the data subset being analyzed. This makes it easier to distinguish weekly from daily trend view and navigate through dates to recognize patterns in patient behavior over time. Staff noted that most trends are visible by comparing week-to-week data. The "today" button eases access to current week's information.

Minimizing Bar Design

Staff do not need all of the data to be visible at once; it’s more effective to only see the information needed at a time, preventing information overload and confusion. This minimizing tab design still allows for data points to be compared across different biometric spectrums. 

Added Info Buttons

Some people are unfamiliar with biometric measurements, and the tooltip can also logistically explain how the measurement is taken (including frequency).

Sleep Panel Redesign 

Old Trendview Daily 

Frame 2645 (1).png

Old Trendview Weekly

Frame 2648.png

Sleep Panel

Incorporated simple colors to easily indicate positive or negative sleep, and created iterations that include sleep scores derived from the wearable device to quantitively access sleep quality. The daily view shows a simplified version of sleep stages. Removed the toggles since they had no toggle function. 

Option Bars with Toggles

Option to add specific components to each graph rather than have them always visible, making the graphs easier to read

New Trendview Daily 

Frame 2649.png

New Trendview Weekly

Frame 2644 (1).png

Weather Trends

Many staff members mentioned weather can often influence emotions and mood so I decided to incorporate weather trends more clearly in the two views. The daily view shows more detail with also displaying trends in temperature and pressure.

Events Overlapping

Old versions included events running through the dashboard blocking biometric measures. I moved this into the events option dropdown so it is not always visible. 

HR, EDA, Mood Panels Redesign 

Old Trendview Daily 

Frame 2647 (1).png

Old Trendview Weekly

Original (2).png

New Trendview Daily 

Frame 2650.png

New Trendview Weekly

Frame 2646.png

HRV Diamonds

Mood Circles

Events

Changed colors to green and read to clearly indicate positive and negative above the threshold.

Added events as a toggleable option for each section, removing lines going through the sections. Biometrics throughout the day are often a result of events such a "therapy," or "meeting family."

Added circles to represent positive and negative moods instead of having faces. Removed small mood circles since the majority of the day is not reported moods. 

New Details Panes Concept

  • Designed a new feature for the dashboard where staff can click on a specific day in weekly view to see details for that day in any chosen measurement. They can also click on a time range in daily view to see details for that time window. 

  • This allows for detailed information about the measurements to still be visible and easily accessed by staff but not overwhelming at first sight in the main interface section. 

  • The feature also allows for the addition of more panes, to compare measurements across days and recognize patterns across measurements (etc. event of “group therapy” consistently decreases heart rate).

Final Design Minimized (1).png

Sleep (day/ specific time range)

Includes sleep quality for the past 10 days/ 7 days to quickly compare trends over time. Also includes more detail breaking down a certain period of sleep into different stages with REM, Deep, Light, and Awake 

Weather

Specific details for that day including temperature, pressure and wind speed. Weather can often influence emotional responses

Mood

Records the moods logged on the patient’s app
Also includes a
notes section for staff members to record irregularities or for patients to write mood descriptions/ explanations

Filtering & Storytelling Exploration

Exploration on how to narrow down and display filtered search results according to specific word queries and date ranges through vertical zoomable filters and highlighting certain sections without a gray overlay

Misc. Filter Shaded Version.png
Simplified Story View (1).png
Vertical Story View.jpg
 

Final Prototypes

Trendview Weekly Page

Left: Minimizing Design with all tabs expanded (most complex view)

Right: Minimizing Design Simplified View (only one tab is expanded with no added filters)

Group 4220.png
Group 3351 (1).png

Minimizing Tab Figma Prototype

Detail Pane Concept Figma Prototype

Trendview Daily Page

Group 3350 (2).png
Group 3350 (1).png

Final Card View

Final Snapshot View

Overview where every patient is summarized in one card; Can drag and organize cards in different orders; Color at the top of each card indicates risk level; Card can be expanded for more details or dragged onto a calendar 

Card view_hover (1).png

In order to receive feedback from professionals at treatment centers as a part of the AIM national grant research study, I created 18 snapshot view dashboards based on research from real patient participants in our study from the [--] Treatment center. These dashboards reflect each patient's sleep, heart rate, emotional activity, and mood logs as well as convey the patient's history and notes from interviews, consolidating information for the staff to perform appropriate actions. I created 3 dashboards for each patient over a month in time. It also includes a section where significant logs are reported.

(🔒 Mockups details are hidden due to patient's confidential info )

Group 3348 (1).png

Reflection 

Through this experience, I learned how to effectively display and condense information by implementing new design features, ensuring users aren't overwhelmed at first glance. I began with breaking down the interface to analyze which components were the most critical and finding ways to organize the information architecture in a simplistic manner for each of the biometric measures. User testing the prototypes with actual staff members also allowed me to gain insight on the use cases and scenarios for the dashboard, knowing what information to prioritize. Working on the data visualization team also allowed me to understand how Figma prototyping coalesces with front-end development to develop a functional prototype for users. Data scrubbing data points from thousands of measurements from tech wearables allowed me to explore how to display data to make it appear more digestable and easily analyzed by staff.

 

Final feedback from staff at treatment centers unanimously mentioned how useful this dashboard would be, solving analyzing stacks of paper for each patient, allowing them to better treat those who face substance use disorder. This internship allowed me to understand the importance of understanding your target audience and their needs, and it was extremely rewarding to design something that would actually improve their quality of life if implemented. 


 

Data Visualizations 
3 Month Project | Javascript, HTML, CSS, Figma

 

Problem Space

How can we visualize the biometric data recieved from wearables from patients into creating a functional prototype of the staff dashboard designed on Figma in order to take the product to market with real implementations in Opioid treatment centers. 

Project Overview

As a part of the Data Visualization team, collaborating with one other intern, I began to convert my Figma designs for the dashboard into Javascript through the D3 library and HTML and CSS. Below are components of the dashboard I began coding. They include different data visualizations of biometric data from patients' wearable devices. Data scrubbing and cleansing to determine critical data points from hundreds of thousands of measurements was also necessary.

Coded Components & Visualizations

Mood Visualizations

Analyzed 15 patient's anonymized mood log data over 1 week, separated by colors and positive and negative moods along the x axis

Events Timeline

Drawing from daily notes and logs, organized each patient's events over a month; the vertical timeline is scrollable and can be hovered over to see event details (i.g meal contents). This can be implemented for the events component of the details pane.

Emotional Activity Expandable Timeline

Zoomable graph of emotional activity data for one day, cleansed to include 1 data point per second, 86400 points recorded per patient. This functionality is what we hope to achieve for the graphs in the dashboard.

Monthly Sleep Chart

Displayed a patient's sleep data from their wearable over one month, with set thresholds for sleep levels with color changes and bar height to indicate sleep quality and length.

 

Patient Journey Map 
3 Month Solo Project | Figma, Stakeholder Interviews, User Interviews & Research

Project Overview

  • Solo created a comprehensive Substance Use Disorder patient journey map for a National Institute on Drug Abuse competition

    • Awarded $30,000 for receiving second place, Published on the NIDA website ​

  • Based on thorough secondary research and user research through 1 on 1 interviews of people encountering S.U.D.

  • Created personas, workflows, and mapped stakeholders along the journey, with detailed descriptions, personal accounts, and statistics for each stage and each different path in their journey (ex. Suboxone and MAT treatment, therapy based)

  • Incorporated a smaller journey map of a staff member to discuss major pain points and opportunities in this space 

  • Recorded mind and brain psychology of the persona through the journey within the iceberg metaphord, working with the clinical team to reflect on improvement 

  • Click for Full PDF

  • Biomotivate Website 

Biomotivate Journey Map Final.png