The Challenge

The module is very text heavy and the client requested the patients portrait be incorporated in the design to offer a sense of humanity. The module would also have to be adjustable and responsive because sentences in some fields could vary in length.

My Approach

  • - Focus on hierarchy and establish a font style guide.
  • - Create sections to make information easier to detect.
  • - Give space for future patient profiles.

Establishing The Font Style Guide

I was advise to create a font style guide for both desktop and mobile because the module was text heavy. Once I created the guides I was able to be consistent and keep the hierarchy. I was able to adjust in area's I needed.

Mid-Fi Wireframes

I created a total of 26 mid-fi wireframes (desktop and mobile* version) each was presented to the product design team at Designory. By writing down my colleagues feedback while discussing design discussions, I was able to implement changes that led to my final design.

*Mobile version not shown in slideshow.

Final Designs

For my final design, on desktop I designed a left vertical navigation with a highlight and green vertical bar to act as an active state. The space under the left navigation gives space for future addition. The sections for each category expands downward to give room for addition text as well. Using a darker color for the information brings the information forward so users can retain the information first. Having the categories outside of the content boxes also draws attention and enables quick readability.

Click either the Desktop or Mobile version to view the final prototype.

Desktop Version

Mobile Version