Portfolio > Web, Mobile UX/UI > Pain Assessment App

Pain Assessment App: Design Exercise

Tablet-based application for patient onboarding and pain assessment

Portfolio > Web, Mobile UX/UI > Pain Assessment App

Pain Assessment App: Design Exercise

Tablet-based application for patient onboarding and pain assessment

UX Process

UI Design

Prototyping

The Overview

Pain is prevalent (and costly).

The National Academy of Sciences estimated in 2010 that more than 100 million American individuals experienced chronic unrelieved pain.

The estimated cost was $560 billion to $635 billion per year, composed of direct health care costs ($261 billion to $300 billion), days of work missed ($11.6 billion to $12.7 billion), hours of work missed ($95.2 billion to $96.5 billion), and lower wages ($190.6 billion to $226.3 billion.)

The cost of pain was more than that of heart disease and cancer treatments.

What if there was a way to better quantify a patient's pain, and — in the process — reduce administrative costs and chance for error during onboarding and assessment?

Project Details

Duration: 2 weeks

Capabilities
  • Information Architecture
  • Process Flow
  • Wireframing
  • Visual System
  • High Fidelity Mockups
  • Prototyping
Tools Used
  • Omnigraffle
  • Adobe Photoshop
  • Adobe Illustrator
  • Sketch

Disclaimer: All product names, trademarks and registered trademarks are property of their respective owners. All company, product and service names are only for identification purposes.


The Goal

Easily onboard new patients, facilitate changes for follow-up visits, provide a visual tool to quantify patient's pain, reduce administrative error and cost.

I am a patient of pain. If you've ever experienced chronic pain, it can be difficult to express (or quantify) exactly what you're feeling, where, how often, how bad, etc., to a practicing physician and/or pain specialist.

Because of the body's innate protective mechanisms, a patient can experience pain in one or more locations adjacent to the source, and experience what is called "referring pain," where the source is actually a different part of the body.

This makes it even more difficult to pinpoint the source of pain. In addition, expressing pain by verbal means or long forms often doesn't translate to the source of the condition.

Visualizing the pain can help better assess the source, and provide the patient a means to more effectively communicate to the practitioner what the patient is feeling and quantify their pain.

The Research

Below is a list of cited materials that were used in the design of this interactive pain assessment:

Institute of Medicine. Relieving Pain in America: A Blueprint for Transforming Prevention, Care, Education, and Research. Washington, DC: National Academies Press; 2011.



Universal Pain Assessment Tool. © National Center for Biotechnology Information.
UCLA Health System Questionnaire



Expressive Painimation. © University of Pittsburgh Innovation Institute.
Painimation, University of Pittsburgh



Patient Health Questionnaire. © UCLA Health System.
UCLA Health System Questionnaire
UCLA Health System Questionnaire
UCLA Health System Questionnaire
UCLA Health System Questionnaire
UCLA Health System Questionnaire



Chronic Pain Assessment Questionnaire. Breakthrough Pain Semi-Structured Questionnaire (BTP/SSQ) Copyright ©2010 Albert Einstein College of Medicine and Montefiore Medical Center, and Asante Communications, LLC.
UCLA Health System Questionnaire
UCLA Health System Questionnaire



Essential Anatomy 5.
© 3D4Medical.com
Essential Anatomy 5
The Typical Visit
Typical patient onboarding process and pain assessment

Of course, medications are not the only modality to address symptoms of pain.

However without a more thorough assessment of the source of pain, medication is often the "go-to" for practitioners looking to provide their patients with quick relief.

Unfortunately, many pain specialists will express that the continued use of opioid medications can actually build up tolerance, and — in the case of a chronic condition followed by continued use of medications — the patient can even become more sensitive to pain, which can then cause dependence, as well as more serious health issues.

Key Insights and Design Directions
  • Patients are frustrated by having to quantify their pain using a long list of adjectives and archaic legends before being considered for treatment.
  • Providers want to help patients better communicate their pain but form-based tools often miss the mark in expressing the type, location, duration, intensity, and specific conditions in which the patient most feels pain.
  • Context: Provide pain expression with the ability to visually quantify dimensions of pain assessment.
  • Provision: Extract and visualize clinical measures from the patient's input to provide practitioner/specialist a more precise medical care and treatment specifically to affected pain areas.
Application Mapping, Wireframing and Prototyping

In the Application Mapping phase, I wanted to include interactions for both first-time patients and patients in a follow-up visit.

Obviously for first-time patients, it's important to capture general and health information as part of the initial onboarding. However, administrative time is also taken up in additions, corrections, etc., during follow-up visits. This system would provide a means to allow for those changes to made without the need to re-enter it through the main account system terminal.

For the follow-up patient, after an initial sign-in process, they can navigate directly to the pain assessment portion, or add/edit/correct general and health information.

Pain Assessment Information Architecture

After mapping the overall flow of the app, I created the wireframes.

If this was pitched as a real-world application, certain process flows would need to be added such as sign-in error checking, and password verification.

Pain Assessment App Wireframes

With the wireframing done, I moved onto putting together a functional prototype in Sketch.

After adding all the form elements, the interactive pain assessment tool took on a look of its own based on the black background of the 3D anatomy application it was overlayed on.

The interactive panel was changed to a semi-transparent (10%) white so the user could still view the anatomy portion. Headings were changed to white.

Although reverse type can be more difficult to read, the overall look is more pleasing to the eyes, and feels more finished. "Art is a controlled accident".

Pain Assessment App Sketch Prototyping
Atoms, Molecules, Organisms

Based on Brad Frost's "Atomic Design" principles, the basic building blocks of input were created and then applied to generate the onboarding forms, health information, and pain assessment tool.

The Painimation app design was incorporated into the visualization tool as a guide for producing interactions during the pain assessment. Additional elements were added to better quantify duration, intensity, and time of day the patient is most affected by pain.

Portfolio Pain Assessment Tool Atomic Design Elements, Atoms, Molecules, Organisms

Color Swatches

Buttons, Selectors, Backgrounds
HEX: #295da0
RGB: 41,93,180

Select, Add, Subtract Items

HEX: #f47f57
RGB: 244,127,87

Selected Item, Confirmation

HEX: #c8d9f5
RGB: 200,217,245

Selected Field Item, Selected Dropdown Item

HEX: #b8c5d3
RGB: 184,197,211

Field, Dropdown Border

HEX: #f1f5f9
RGB: 241,245,249

Field, Dropdown Background

Text, Separators
HEX: #000000
RGB: 0,0,0

Headings, Subheadings

HEX: #444444
RGB: 68,68,68

Body Text

HEX: #a5a5a5
RGB: 165,165,165

Field, Dropdown Descriptors

HEX: #ffffff
RGB: 255,255,255

Reset/Cancel
Pain model titles
Page
Body

Pain Intensity Meter
HEX: #4f8039
RGB: 79,128,57
HEX: #a4d088
RGB: 164,208,136
HEX: #8ab8b9
RGB: 138,184,185
HEX: #8a8fff
RGB: 138,143,255
HEX: #7c76ff
RGB: 124,118,255
HEX: #a28aa3
RGB: 162,138,163
HEX: #c29999
RGB: 194,153,153
HEX: #ff7900
RGB: 255,121,0
HEX: #d74403
RGB: 138,184,185
HEX: #d70300
RGB: 215,3,0

Typography

Fira Sans(Google font)

Regular 400

Bold 700

font-family: 'Fira Sans', sans-serif;

H1 heading

H3 heading

H5 heading

Bold, Italic

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Roboto (Google font)

Regular 400

Bold 700

font-family: 'Roboto', sans-serif;

H1 heading

H3 heading

H5 heading

Bold, Italic

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Roboto Medium(Google font)

Regular 400

Bold 700

font-family: 'Roboto Medium', sans-serif;

H1 heading

H3 heading

H5 heading

Bold, Italic

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Conclusion / Reflection

A work in progress

With a bit more time (and funding?), I would flesh out all the aspects of the app to test it as a viable alternative to the endless paperwork and frustration patients, practitioners and administrators face in the treatment of generalized, localized, referring and/or chronic pain.

To be continued...