Graphic Design, UX/UI Design

Role

Tools

Figma, Adobe Color

48 hours; September 19-21, 2022

Timeline

Project Overview

Context

The University of Michigan Hospital utilizes a special patient status tracking system where there are cards displayed with the patients’ unique IDs and their statuses represented in different colors. However, the current color solution and composition elements used in the cards require improvements as they are not clear enough for efficient communication.

Role

The new card designs offer a proper color solution that reflects the status of a patient semantically correctly. Also, they support accessibility in terms of contrast so that people can clearly access them regardless of the different screen sizes used at the hospital.

Problem

The color solution lacks coordination with the patient’s actual status and some composition elements require changes to improve accessibility.

  • Which color solution would represent each of the statuses semantically correctly?

  • Which color solution would be clear enough in terms of contrast, supporting the selected typography?

Previous Patient Status Cards

  • Typography is not clear enough for effective communication (font size, font weight)

  • The status bar at the bottom does not identify the patient’s current situation and should be more noticeable

  • The patient’s ID number is not clear enough

Previous Status Color Solution

In Prep

In Procedure

Recovery - Phase I

Recovery - Phase II

Discharged

The color solution used for previous cards failed to clearly reflect patients’ statuses and communicate its purpose.

EX) While people expect green colors for recovery stages, a shade of orange was used for Recovery - Phase II. This can often deliver different meanings to the patient’s family, leading to misinterpretations. Also, this status has to show some relevance to the previous stage but was not obvious to the users in this case.

Goals

  1. Think of a color solution that would lead to clear communication with the patient’s family.

  2. The designs should clearly indicate the patient’s current status from the list of In Prep, In Procedure, Recovery I & II, and Discharged.

Solution

New Card Design

  • Typeface Inter is used as it maintains great readability whether used at large or small sizes

  • The status bar is now filled with colors and updated accordingly

  • The patient’s ID number is large enough for communication and different screen sizes

Color Solution

In Prep

1st Try

In Procedure

Recovery - Phase I

Recovery - Phase II

Discharged

In Prep

Final

In Procedure

Recovery - Phase I

Recovery - Phase II

Discharged

Rationale

Orange or red = “serious situation, urgency”

Green = “safe, relax, healing”

Purple = “power”

I used orange+red colors for the first two stages to reflect the urgent situation and green colors for the recovery stages to relax the patient’s family and let them know that the patient’s in a relatively safe status. Purple was used for the Discharged status as the color usually signifies power.

However, after designing the cards with the first color selection, I received feedback concerning how red colors could communicate negative meanings to the patient’s family. It could mean “danger” to some people, causing unexpected anxiety.

So I switched the colors of two statuses, In Prep and In Procedure, and chose a different monochromatic color of orange to represent the final In Prep status.

Final Patient Status Cards

Display Mockup

Before

After

*The patient’s ID number will be different for each card in real situation

Reflection & Plans

I think I’ve always found the system for tracking a patient’s status not clear enough for the family when checking screens in hospitals. The text is often too small or the meanings of the features are not clear enough for us to understand. And the crowded environment of hospitals can make it especially difficult for family members to keep asking for a patient’s status while anxiety continues. By ideating and designing these patient status cards, I think I’ve truly learned how UX Design could enable important communications.