Kai

a better continuum of care

Interaction Design User Experience Product Design User Research

Overview

INTRODUCTION

As part of Interaction Design at Washington University in St. Louis, we partnered up with a team of medical professionals, iCHASM - Investigators Connecting Health and Social Media, to design a digital experience for mothers that are recovering from opioid abuse.

The partnership was for 3 months and our role as a student design team was to design to inspire a medical team that was developing an app for the mothers.

Engineering feasibility was considered, but not the main focus.

PROBLEM

Design a digital experience that helps mothers who are either pregnant or postpartum and recovering from opioid substance abuse.

SOLUTION

A smart wearable that connects patients with resources in the community and allows for more reliable communication with providers.

ROLE

Teammates: Anya Pawar, Maya Terry

Role: I was a generalist on the team contributing to the visual, interaction, and product designs of Kai. I also acted as the defacto product manager setting deadlines and goals throughout the process.

PROCESS

Here's a general outline of our process.

Research

  • Context Study
  • Stakeholder Interviews

Synthesis

  • Pain Points
  • Problem Definition

Ideation

  • Ideas
  • Features

Design

  • Wearable
  • Website

Feedback

  • Iterations
  • User Testing
  • Hand Off

Research

CONTEXT STUDY

"Between 2000 and 2009, there was a 500% increase in the number of women who used opioids during pregnancy."

- Elizabeth Krans, M.D., M.Sc.

"Since 1999, death from opioid overdose in women has increased by more than 400%, compared to 265% in men."

- Center for Disease Control

Millions of people each year suffer from pain medication addiction. Vulnerable populations such as pregnant mothers are especially susceptible to becoming victims of opioid abuse due to the exposure to medication that they receive during their term and postpartum.

Source

Now while novel efforts to curb the Opioid Epidemic such as Medication Assisted Treatment and Harm Reduction Sites have been made, the problem not only persists, but also continues to rise. Which is why attacking the problem in different ways such as through digital experiences is so important.

STAKEHOLDER INTERVIEWS

We had the privilege of visiting a women's care clinic at Barnes Jewish Hospital to interview moms and their care providers.

In preparation, we made an interview guide to help us throughout the interviews. You can see the full interview guide here. We did our best to frame our questions to bring out stories and experiences to get as authentic answers as we could get.

Unfortunately no moms were available to be interviewed when we visited. We understood and had accounted for this in our guide as they are a sensitive and generally unavailable population to interview.

Instead, we interviewed a whole team of providers. These included:

Physician
Social Worker
Therapist
Researcher

During interviews, we had providers participate in two interactive card-sorting activities. They were given pre-filled cards and a board to sort the cards on. These were some of the results.

Activity #1

Participants were asked to rank the importance of items in context of the patient recovery journey.

Activity #2

The second activity was to visualize the patient journey by ranking parts of the patient journey in chronological order and magnitude of difficulty.

Synthesis

PAIN POINTS

After unpacking our research notes, we came across some common pain points. Some of the most frequently cited ones included:

Unreliable Communication – Social workers and case managers had a difficult time getting ahold of patients because most patients did not have a stable permanent address and used prepaid phones for communication.

Shame and Stigma – Many of these women don’t receive the support they should get and are vulnerable in more than one identity and can’t turn to their family for support because of the situation.

Basic Needs Unmet – Much of why these women aren’t able to come reliably is because they have to work to meet their basic needs for food, water, and shelter.

PROBLEM DEFINTION

How might we provide a reliable way of communication between patient and provider?

We chose communication because it's fits most directly with digital experiences. Much of what makes up digital experiences nowadays is social interaction and we wanted to hone in on that for the recovery process.

Ideation

IDEAS

From the problem spaces we identified, we came up with some intial ideas that were broad and disconnected.

#1

GENERAL APP

Idea – a phone app that holds relevant resources for women to use.

#2

WEB FORUM

Idea – an online forum for patients to meet other patients

#3

ARTIFICAL INTELLIGENCE

Idea – an AI that provides support and check-ins for patients in recovery.

#4

WEARABLE

Idea – a wearable that collects patient data on their moods and mental health.

We went further and distilled these ideas into a cohesive solution taking the best parts of each and making note of each limitation.

Solution:

A wearable with a suite of tailored features for patients and a website that connects with the wearable for providers to manage patients better.

FEATURES

Wearable Features

For the wearable, we imagined four main features to address the needs of patients and providers we had identified in our research.

MESSAGES

Since our problem was about communication, we wanted the wearable to receive messages from providers. These messages for patients could be encouraging affirmations or logistical reminders for appointments.

CONVERSATIONAL SCREENING

We focused on creating a weekly depression screening with "Kai" as a persona in order to emulate a conversation, but not replace it. The questions asked are based on the Edinburgh Postnatal Depression Screening, which tests for postpartum depression.

CALENDAR

One of the biggest challenges was appointment accountability. By incorporating a calendar that has a weekly and daily schedule with reminders of upcoming health obligations, we hoped to have these moms come to get the help they needed more regularly.

RESOURCES

Many moms weren't getting the basic necessities in life and were lacking in awareness of which resources to seek out. We wanted to incorporate directories with contact information about the things that were most important: Personal (Family), Support (Providers), Community (Support Groups), Food, and Housing.

Website Features

The website has features that translate over from the wearable and a few more for better management and care of patients.

DASHBOARD

Providers wanted to have a dashboard that would have broad, but actionable information about the wearable and their patients. Some of these items that providers noted were good to have included attendance, EPDS scores, and the day's obligations.

CALENDAR

This was a mirrored feature from the wearable, but tailored specifically to the provider.

PATIENT DIRECTORY

A directory of patients along with personal profiles for more specific action. Included into the directory is a filter system, triage system, and messaging system. Things that providers could do on profiles include sending messages, looking at past appointment notes, and looking at wearable data.

RESOURCES

Providers are able to update the different categories of resources in the wearable, Personal (Family), Support (Providers), Community (Support Groups), Food, and Housing

The flow and relationship between each feature across platforms.

Design

WEARABLE

Initial Sketches

Messages Feature

Final Renderings

Conversational Screening Feature

Final Renderings

Calendar Feature

Final Renderings

Resources Feature

Final Renderings

All Wearable Interactions

Messages

Conversational Screening

Calendar

Resources

Square Screen vs Round Screen

Our intial idea for a wearable was something similar to the standard smartwatch with a rectangular screen.

However, after playing around and testing the amount of interactions one would have to make with a rectangular screen, we opted for a round watchface because it allowed for an easier time of navigating and interacting through the wearable interface.

For example, with a traditional rectangular watchface, one would have to constantly tap and swipe to get around, but with a round circular watchface - navigation via a bezel makes the process smoother.

Interactions & Wayfinding

Some of our intial iterations for wayfinding tried incorporating additional gestures like pinch-zooms, but we got rid of those to be consistent with a bezel navigation and easily recongizable gestures like swipes up and down and taps.

Experimenting with interactions and gestures for wayfinding.

We ultimately decided on having two-finger" bezel turns as a means of navigating through features and "one-finger" drags on the bezel were ways to scroll or respond to things within a feature. In the following figures each arrow represents a finger.

One-touch Navigation

Two-touch Navigation

On the left side, the two-finger bezel turn is going through from feature to feature. On the right side, the one-finger drag is scrolling within a feature.

Obstacles with Round Screen

A large challenge that we ran into when designing with a round screen was this idea of hidden overflow. It was difficult to visually represent when there was an opportunity for someone to continue scrolling for more information or to swipe for more messsages. This was made worse by the fact that circles typically suggest completion by having no straight line segments to be counted as edges.

The following are ways we tried to address that issue:

Opacity

State and Directional Helpers

Relational Gradient

Color and Typography

The palette was chosen because of its high contrast and readability. Earlier iterations were much brigther and softer, but we realized that we had to design for glanceability. Users aren't going to spend more than a couple of seconds looking at the screen, so having colors that were bright against a dark backdrop made the most sense.

#4A90E2

#50E3C2

#BD10E0

#D0021B

#FFFFFF

#000000

We chose Avenir as the primary type to use because of its modern feel and the symbolic meaning behind it. Being inspired by Futura, Adrian Frutiger made Avenir, which means "Future" in French. With our wearable, we wanted these moms to look to and improve their futures.

Other aspects to Avenir that made us choose it were its moderate x-height and legibility. Again, we wanted people to clearly see what was on the screen. As a sans-serif, its easy to read while giving off a modern feel.

WEBSITE

Initial Sketches

Final Sitemap

Website Renderings

Dashboard
Calendar
Directory
Messages
Patient Profile
Resources

Website Interactions

Directory Flow
Resources Flow
Dropdown
Profile Notes Hover
Resource Header
Filter Element States

Website Components

Buttons

Profile Tabs

Icons

Page Frame

Directory Filters

Dropdown

Color and Typography

We tried to make the website color palette consistent with the wearable, but we had to include variations of the original color palette to be more suited for a larger screen and longer screentime use.

#50E3C2

#E34769

#47B7E4

#4A90E2

#7347E3

#000000

The type for the website was also Avenir.

Layout

The website is designed with the most common browser size in mind, 1366px x 768px.

Additionally, we used an 8px grid system for baseline consistency. We opted to use a page-frame with a sidebar instead of a traditional top-header navbar because it fit the needs for the user to navigate across pages quicker.

Feedback

Reflection

CONSTRAINTS

Scope and Feasibility

The project was framed to be without engineering constraints. While this was intiially exciting, the lack of consideration when it came to feasibility made it difficult to narrow down the scope of the solution. To account for this, we homed in on ideas and solutions that already had a solid base of existing similar technology - so VR and AR were not given much weight.

Overall, we did the best we could in terms of balancing realism and conceptualism. Kai is at a good starting point for further refinement to meet engineering needs.

Primary User Testing

The biggest challenge throughout the process was designing without access to one of the core user groups that we were designing for. We did not have access to the pregnant mothers. While we did our best to adjust to that by making our wearable accessible and open for other people to use, we often worried whether our designs had validity. We did our best to account for this by testing and interviewing people that were tangentially related to them such as a family member and the providers who took care of them.

In the future, getting access to these moms would be amazing to test Kai out. However, we definitely understood why user testing our project was not a priority.

TAKEAWAYS

It was a lot of fun experimenting with the idea of a wearable. I gained a lot of practical experience in designing for nontraditional screens and accounting for edge cases and context use (i.e. glanceability).

It was also a great learning experience in better understanding how design systems work and how to be more consistent across a wearable and a website.

In the future, I'd like to try out more opportunities for designing across different mediums.

Overall, I'm very happy with how Kai turned out. I had a great team to work with and a problem that was interesting and important! Thanks to everyone involved in the project!

Feel free to ask me any questions about the project and thanks for taking the time to read this!