My Design Approach for the Health Design Challenge – Part II

This is the continuation to my first post on how I tackled the Blue Button Medical Record Redesign Challenge

After I’ve grouped and prioritized the required information on the report, I started examining different ways for displaying them in a clear and concise manner. I was recently reading Show Me the Numbers: Designing Tables and Graphs to Enlighten by Stephen Few.

He is a proponent of Edward Tufte’s principles for data design:

  • Keep the design simple… “Above all else show the data”
  • Help the reader understand the data… Organize & highlight what’s important
  • “Ink is precious…” remove superfluous components

Based on these principles, I’ve created a minimalistic medical record, where patients, caregivers and health professionals can quickly & easily understand the data.

On to the Details

Tables for look-up

Examining each section, I discovered all, except for Lab Results, are for “information look-up”. The reader needs to know the specifics of each item. Tables are great for this. Most of the table values are also easy to comprehend without the label. So the table headers are kept small so the data will stand out.

Color used only for highlighting

Some items, like allergies, have relative importance associated to them. I used colors to highlight these items. e.g. red for severe, orange for moderate and yellow for mild allergies.

Large text with sufficient contrast to facilitate reading

This was one of the requirements identified for patients who are often elderly and have difficulties reading small print. Therefore I used larger font sizes for information that are important to a patient.

Designed for color-blindness

Approximately 10% of males have some form of color blindness. Deuteranopia, or red-green color blindness is the most common. Since red and green are used in the design to denote “out-of-range” and “in range” lab results, I paid special attention in select shades of color that will still standout for a color blind individual.

Single-column vertical layout for quick referencing

I decided to use a single-column design even on the large screen to help readers quickly find what they need. Eye-tracking studies on screen reading has shown that most readers use a F-shaped scan pattern to quickly find what they need. A layout with two or more columns can slow down the reader because they now need to divide their attention between the columns. The always-present navigation bar at the top of the screen also help the reader to quickly get to the section they are interested in.

Mobile Navigation

The use of this report on a mobile device has been identified to be important for caregivers and health professionals. Both user groups reported that they are often pressed for time and need to access patient information quickly on-the-go. I choose to use a select box for navigation as oppose to a slide-out menu because this is a native browser UI element. We can expect quick and smooth operation of the iOS picker wheel, the Android select list and the Blackberry scroll wheel list without needing to create OS specific apps. Users are familiar with the interface on their own devices and thus can quickly select a section.

Also since we have limited screen real estate on a mobile device, I opt to use “back to top” links at the bottom of each section as oppose to having a sticky-ed persistent title and navigation control at the top to maximize data display.

Strip plot for lab results

When I showed a rough draft of the design to people, a physician brought up a good point that just because a lab result is “in range”, it does not mean  that it does not require attention. If a patient’s normal fasting blood glucose is at 75 mg/dL and it suddenly jumps to 95 mg/dL, the patient may be showing early symptoms of diabetes and should be monitored. Similarly, a sudden “out-of-range” result requires more attention than one that is known from the past. Therefore a quick comparison between the current and past lab results would be super helpful for health professionals.

Compare the latest result with a distribution of previous lab results

Compare the latest result with a distribution of previous lab results

So a secondary “strip plot” view was designed, where past result values are super imposed with the latest result. This allows a physician to quickly view the general distribution of the past results and compare it to the latest result. Since this is something specifically designed for health professionals, it is only accessible by mouse hover or tap and not available on the print version to reduce clutter for the patient.


At my work place, iQmetrix, whenever a project or iteration cycle ends, we have a retrospective to discuss what went well and what could have been done better. Considering this was my first data design project, I think I’ve done reasonably well. There were a few things I wished I’ve included after I’ve submitted my design…

Here my “Darn it! I should have…” list

  • Addresses should be mapped
    • On the desktop and mobile version, I should have included a link to a Google Map for the address.
    • This will allow people to figure out the location and possibly use the navigation feature to travel to that location
  • Include contact phone numbers for Plan of Care activities
    • Most check-ups and hospital/clinic visits requires the patient to confirm appointments beforehand.
    • It would be nice to have this available for the patient or caregiver so they do not need to look this up elsewhere.
  • Make the “Print Layout” pages in the document larger
    • I didn’t realize until a co-worker pointed out to me that the my annotation section looked like content on the right-sided page of a book. Oops!
    • I should have added padding around the gray outline indicating the boundaries of the printed page
    • This will make the difference between the page and annotations more obvious