Modernizing an Emergency EHR Interface

  • The Project

    UX Redesign

  • My Role

    Sole UX Designer, Brand Designer

  • Timeline

    May - June 2022

  • Tools

    Moqups, Figma

A UX Design Emergency

Like many EHRs, Better Day Health emergency EHR was very out of date. With dozens of interaction flaws and unintuitive design, physicians and nurses using the interface were frustrated in carrying out their daily workflows.

There were three key goals of this redesign:

  1. Discover and apply UX patterns

  2. Solve major usability and interaction errors

  3. Create a UX “vocab guide” for consistent design and a pleasant, modern experience

Before and After

Style Guide

I created a style guide for a consistent and simplistic visual brand, typography and iconography for a text and interaction-heavy interface.

Design Pattern

As per stakeholder requests, I created a UX “vocab guide” by scanning through the current system at a high level, spotting major design flaws, and presenting a glossary with UX best practices and rationale based on common UX patterns. This helped to make the design process more efficient and consistent.

Calendar Clean Up

Usability issues:
complicated filter system with conflicting selections, calendar split by provider and partner views, too many indistinguishable buttons, unclear command hierarchy

New Features and Solutions

  • collapsible sidebars containing filters and quick actions

  • full calendar view by default to fit on one screen

  • appropriate and clear use of buttons, icons and tabs

Calendar Appointment Scheduling

We decided to add a new feature to enable users to quickly schedule an appointment directly on the calendar view, alongside using filters to view other clinics and providers.

Smarter Filters

The previous filter system was confusing, lacking hierarchy, and often led to missing information depending on the users’ order of selection.

Because filters appear in the calendar, appointment check in, patient search, and several other important screens, it was imperative to fix these pain points.

New Features and Solutions

  • filter box containing selected filter tags with easy removal

  • an option to load and save filters for shortcuts

  • filter hierarchy with an intuitive narrowing selection

  • filters divided by either appointment or status types

Appointment Search with New Filters

By placing the filters on the left hand side, there is more real estate for the patient lists and the user is able to easily change filters while scrolling through the patient search.

List UI Pattern

EHRs contain complex layers of information that healthcare staff interact with on a daily basis. Physicians need to access each patient's medical history and symptoms, containing medications, allergies, previous diagnoses and more, before each appointment.

Usability issues:

  • large interactions open pop-ups

  • nested pop-ups without their own URL leading to
    more clicks and getting lost

  • redundant action buttons

New Features and Solutions

  • add, remove and edit: drop down sections with tabs to make changes directly within list

  • Law of Locality: a new entry will appear where the user entered it

  • no redundancy of action buttons that appear across all lists

Patient Info with List UI

Due to HIPAA constraints, only the “minimum necessary” information is shown to certain users like healthcare admin, while physicians are allowed to access full patient histories. With this in mind, I designed the patient screen that would contain the most information, moving in order of decreasingly complex design.


Designing this page for physicians, I needed to make it as easy as possible for them to glance through symptoms, medications and other patient history. In the redesign, I was able to fit much more information and make it easier to make changes to info within each category with the new list UI.

Appointment Scheduling

Lengthy forms are a tedious but necessary daily task for healthcare workers. This is a major part of the EHR portal that needs to be as seamless as possible.

The EMR previously had an excessively long appointment scheduling page with poor UX. For example, data validation was too specific and there were too many unnecessary input fields that were hard to distinguish from required ones.

Users often abandon long forms, due to mental load and anticipating too much information to enter. To make a long form more user-friendly, I researched and applied some best practices:‍

  • single-column entry box layout

  • placeholder text, proper labels, input validation and
    error feedback

  • broke down lengthy form into 3 pages

  • progress bar at top to indicate form page

Impact

The project was handed back to stakeholders for feedback and iterations before development. The UX vocab guide I created proved to be useful for internal use on designing other screens. Several practices then adopted the tool and reported improved clinical workflows.


Testimonials

Check out my other projects!