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.


Program bar

Designed to be a global navigation element across multiple applications.


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.


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.