Services > Web & Mobile > Pain Assessment App

Pain Assessment App: Design Exercise

Tablet-based application for patient onboarding and pain assessment

Services > Web & Mobile > Pain Assessment App

Pain Assessment App: Design Exercise

Tablet-based application for patient onboarding and pain assessment

UX Process

UI Design

Prototyping

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

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.
Universal Pain Assessment Tool



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

This may be a typical process but, of course, medications are not the only modality to address symptoms of pain.

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

Unfortunately, pain specialists have expressed that continued use of opioid medications not only builds up tolerance, but the patient can become even 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, we 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, we 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, a functional prototype was put together 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.

Let's build your dream.

We're ready to bring your message to life. Contact us now for a free consultation.