Electronic Health Records System

laptop image.png
Home Page after-no top warning.png

This Electronic Health Records (EHR) system is an enterprise-level, modular application that allows the customization of features to fit each contract's requirements. This application is primarily used to coordinate care for individuals with behavioral and/or mental health needs and to help manage the costs associated with that care by providing numerous features supporting case management, reporting, grant availability, and program monitoring. My task was to redesign this robust product that had an antiquated visual interface and cumbersome workflows.

*In consideration of a non-disclosure agreement, information on the project may be omitted, obfuscated, or changes in this case study. The information in this case study is my own and does not reflect any views of my employer and clients.

My Role: Lead UX/UI Designer, Researcher, and Analyst

Team: Consisted of Product Owner, Business Analysts, Developers, and Director of Product Design

The Challenge

A 15 year-old flagship product needed a visual overhaul

As the first and largest product in the company's portfolio, it was identified that this EHR platform needed a visual facelift in order to compete with newer and more modern products in the marketplace in which we were bidding against for contracts. Since this product was already adopted by more than thirty states and counties, it couldn't be completely revamped as we needed to keep some consistency for current users for retention and training resource reasons. Areas that were needed to be addressed included:

  • System need modernization from the outdated look and feel

  • Conformance with new corporate Design System

  • Smoother transition from features built in an older architecture to a newer architecture

My Role

UX/UI Design Lead, Researcher and Analyst

I was assigned to lead the effort of redesigning this product. Working closely with the Product Owner and Business Analysts, as well as the Director of Product Design, I was the point person to communicate the problems discovered and the recommendations to improve the overall user experience as well as to make the user interface more modern. I also developed the final style guide in which developers would use to make updates to the system.

UI and UX Review

Research - Product Demonstration & Collecting Feedback

With such a large and robust product, a walk-through was needed in order to understand the various user roles and potential workflows each of those roles needs to perform in order to complete certain tasks. As this product is an enterprise-level product, many features are role-specific, meaning certain log-in credentials reveal specific modules and features. I also met and interviewed the Product Owner and various BAs who were able to provide specific complaints their clients had while navigating the system. 

Old UI:

old-home-page-blurred.png
form-blurred.png

Heuristics Analysis

A thorough heuristics analysis was performed to ‘score’ the current product’s design and functionality. Incorporating standards developed by the Neilsen Norman Group for usability for user interface design as well as criteria we use to design products, we created three high-level benchmarks to evaluate the product against. 

General Application of UI Best Practices

User Interface Component Usage

User Purpose
and Intent

Example pages of Heuristics Analysis documentation

48 pages that included an overall summary of experience and key highlights 

WITS_Heuristics_Analysis_0919_Page_10.jpg
WITS_Heuristics_Analysis_0919_Page_19.jpg
WITS_Heuristics_Analysis_0919_Page_16.jpg

Working through the analysis enabled me to point out where improvements needed to be made and gave me an opportunity to research best practices and provide guidance and examples to follow for the redesign effort. Additionally, more topics were discovered that needed improvement outside of the UI. 

Some of the discoveries from this analysis were:

  • The system needed to be designed with visual/interaction consistency

  • 508 and accessibility needed to be improved;

  • Best practices for UI component usage needed to be followed

  • The workflow effort is too great and should be designed with the end-user in mind; needs an improved user experience

  • There are areas to increase patient safety

Approach

Align Expectations and Goals

After the UI review and heuristics analysis was completed, clarification of redesign expectations and goals were needed. While there was an agreement among executives and other stakeholders that the UI needed to be modernized, many additional workflow and functionality problems were identified during the research of the product. Knowing that this was a launched product, we had to be sensitive to the current system users in not making too many drastic changes that would cause roadblocks such as training issues. After presenting the findings, I was able to develop a final design plan based on aligned goals with resource considerations in mind.  

Evaluating scope of the project with an Affinity Map

Affinity-Map.png
UI Design

Redesign - Best Practices and Patient Safety in the Forefront

Many times the most challenging part of a project is getting the buy-in for the design decisions made. Since many clients were already using this product, having to constantly provide the 'why' to new design patterns was critical in moving this project forward and trying to align it with others in our product suite. 

Another challenge and constraint I had to work with was the architecture. The original part of the product was built in a .NET framework but the newer modules and features have been built in Angular JS. This proved to be challenging in providing consistency in the visualizations of the UI as there were limitations to each. 

Dashboards

Dashboards are very important in this system since there is so much data to intake, such as when new patients are assigned, scheduling, provider group announcements, etc. This system has different user roles and therefore different needs and workflows. A couple of different dashboards were designed to accommodate these needs.

Original Dashboard:

old-home-page-blurred.png
  • Loaded with data tables, even when empty

  • Nothing stands out

  • Outdated design

Redesigned Dashboard:

Home Page after-no top warning.png
  • Cleaner, brighter and modern design

  • Elements stand out that need to

  • Warmer welcome to the user with greeting

  • Use of color and icons make areas easier to skim

dashboard.png

Additional Redesigned Dashboard:

Forms

This system is mostly used for screeners and assessments to establish the proper care for patients and to provide continuous care to reach positive outcomes. The forms were an eyesore and were difficult to navigate both visually and functionally; tabbing through the form was confusing and not consistent always with the user's mental model. 

Examples of Original Forms:

form-blurred.png
  • Required fields, while standout, are hard on the eyes

  • The fields stagger throughout the screen

  • Buttons are placed oddly

  • Inconsistent label placement

encounter form old.png

Example of a Redesigned Form:

form-redesigned.png
  • Required fields use an orange bar for indication

  • The fields are more aligned and do not stagger

  • Buttons are now placed to the left on every page

  • Labels are placed above input fields, providing easier scannability

  • The user of more spacing and groupings of elements make the form cleaner and easier to read

  • Form has a better and more consistent flow from left to right and down.

Screen Shot 2022-01-09 at 3.27.38 PM.png

Example of a Redesigned List:

  • Having the last name first and all capital letters improves patient safety - helping the user to select the right patient before making updates to their record.

  • Use of initials or photos next to a client improves visual distinction of the patient, furthering improving patient safety

  • Incorporating more color to emphasize important pieces of data helps the user to skim and complete their task faster.

Examples of Profile Ribbons:

profile ribbon2.png
profile ribbon.png

Branding: A Refreshed look

Color Palette

It was important for us to tie this product into our product suite. I developed a new color palette that would still utilize the blue that the current customers were familiar with but have secondary and tertiary colors that would tie into our other products. Using Leonardocolor.io, I developed a range of colors that provided contrast ranges that would pass WCAG standards.  

The new color palette was brighter and more refreshing than the old product's colors. 

colors.png

Buttons

Buttons were updated that were clean and consistent.

form-blurred.png

Before

After

buttons.png

Navigation

The left-hand navigation was redesigned to follow the design system standards and how the left-hand nav looks in the other products. 

Before

form-blurred.png

After

left-nav.png

Style Guide

Many other components and patterns were updated and I provided a comprehensive style guide to help the business analyst to create backlog items and for the developers to understand what css needs to be applied to have visual consistency. 

Screen Shot 2022-01-09 at 4.05.03 PM.png
Screen Shot 2022-01-09 at 4.05.47 PM.png
Screen Shot 2022-01-09 at 4.04.41 PM.png
Screen Shot 2022-01-09 at 4.05.30 PM.png

Accessibility

Most of our applications are used by government contracts so adhering to Section 508 is a requirement. Our products must be in compliance with the latest WCAG standards and related accessibility requirements. I used the WAVE accessibility tool to test where this product was in regard to accessibility. There were several issues that were addressed in the redesign effort. 

2019-09-11_11-30-35.png

Some of the areas I focused on to improve accessibility were:

  • Color contrast

  • Suggested improved language for easier understanding

  • Provided guidance for various rollover and tab-focus states

  • Provided easy-to-understand icons for universally known tasks

Takeaways

Challenges

The redesign of this product was quite a challenge on several fronts;

  • Working with two different architectural frameworks made it difficult to have complete 1-1 consistency at the component level

  • Updating the system to gain new clients while not disrupting the experience of current users caused pushback from some stakeholders  

  • Working with the development team and understanding the limitations forced me to become even more flexible and iterative with the design process

Communication

This project showed the various teams; UX, BAs, and the development team, the importance of having a detailed style guide that not only identifies the look and feel of components but also helps to identify the correct interaction of components and correct usage of patterns. Being the lead designer on this project, I had to be flexible to make changes to the design and be available for developers while they are working on the project. I was in constant communication with the BAs in helping to write backlog items to get the project completed based on approved recommendations. 

Final Design Response and Feedback

The response was overwhelmingly positive. The executive team thought it was a huge improvement to the product and the sales team thought it would be easier to present and sell. The marketing and product teams saw how integrating this platform with other products would be a more seamless experience now that the components and certain patterns were the same. 

login.png
ea-screen.png
notes page.png