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](/images/_colWidth360/advmd-ehr-mockui-original.png)
![advmd-ehr-mockui-breakdown](/images/_colWidth360/advmd-ehr-mockui-breakdown.png)
Program bar
Designed to be a global navigation element across multiple applications.
![advmd-ehr-mockui-programbar](/images/_colWidth750/advmd-ehr-mockui-programbar.png)
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](/images/_colWidth750/advmd-ehr-mockui-infopanel.png)
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](/images/_colWidth750/advmd-ehr-mockui-orig-chart.png)
![advmd-ehr-mockui-new-chart](/images/_colWidth750/advmd-ehr-mockui-new-chart.png)
![advmd-ehr-mockui-featured](/images/advmd-ehr-mockui-featured.png)
![advmd-ehr-mockui-featured-2](/images/advmd-ehr-mockui-featured-2.png)