Purpose

The purpose of this version 1 design is to replicate functionality found in the existing OpenMRS API and reference application.

The designs for each summary card will be redone with time.

Files

Figma: Patient Chart vs 1.0.0

Tables that link the UX elements to the OpenMRS Database

Interactive Files

Mobile

Images may be out of date. Please see Figma - and in particular Figma Master / Figma for Developers file for official version.

Mobile

Tablet

Desktop

Responsive Design

As the user expands the Workspace on the right (e.g. hidden, 1/4, 1/2, 3/4, full screen) the panels automatically reshuffle themselves to accommodate the remaining space.

Outline for Patient chart user testing: projects:Patient Chart vs 2

Note: the mockups show the order of History, Documentation, Profile. When coding the system, please place Documentation first, and History as second.

Top left "Home" returns the user to the home section where they are able to access further parts of the app (such as the patients, lists, reports, etc)
Top right displays the user's ID login name with a dropdown arrow. Here the user can log-out.
Middle displays the OpenMRS logo. In future, perhaps can be configured so that this is the Organization's Logo
On mobile and tablet scroll this bar hides
Note how the height of this bar is different ono desktop

The patient banner on mobile just has the patient name
On tablet / desktop it includes other values.
The number of values included in the banner depends on how wide it is, if it doesn't fit, I gets cut off (e.g. on tablet)
There is 32 px spacing between each item in the patient banner
Note how the height of this bar is different ono desktop