AdvancedMD EHR mock UI design

Sample UI redesign of the AdvancedMD EHR application

Breaking Down the Original UI

Medical applications are notorious for their horrible UI and complicated UX views. I set out to design a mock UI with the assumption that the architecture requirements would remain the same. I first started by breaking down the interface into sections and starting tackling each section at a time.

advmd-ehr-mockui-original
advmd-ehr-mockui-breakdown

Program bar

Designed to be a global navigation element across multiple applications.

advmd-ehr-mockui-programbar

Patient information panel

This section of the UI is dedicated to showing the patient information. I cleaned up the readability issues, included a hover-able patient photo and brought in the use of color as a visual aide for patient gender.

advmd-ehr-mockui-infopanel

Chart pane

The original chart pane has a confusing UX pattern for adding new chart items. Clicks labelled 1 & 2 are disjointed and don't really seem related. In the redesign beyond improving the visual look of the tabs and the chart bar, I redesigned the UX pattern of adding new chart items into a cohesive workflow. A user hovers over the plus button in the tab bar, they are presented with tab types, once a selection is made a new tab is created.

advmd-ehr-mockui-orig-chart
advmd-ehr-mockui-new-chart
advmd-ehr-mockui-featured
advmd-ehr-mockui-featured-2