MHS STYLE GUIDE

Mobile App Style Guide

MHS STYLE GUIDE

Mobile App Style Guide
The MHS (Military Health System) Mobile App Style Guide serves as a collection of best practices for the development of mobile apps by the healthcare branch of the Department of Defense. I conceived of the guide as a series of blueprints that would allow future designers to maintain consistency in the design language and design elements. My recommendations were based on the brand identity already established through the MHS web site and Google’s Material design language.
BACKGROUND
I was asked to develop a mobile application style guide for the newly organized Military Health System (MHS). The Military Health System is responsible for overseeing health care services to America’s military service branches. MHS had established a rudimentary visual identity through its website, however implementation was inconsistent. For example, visual elements were not uniformly constructed and the visual intent was unclear.
DESIGN CONCEPT
Since the primary function of the MHS website and existing apps was on MHS news and information I decided to focus on the ‘press release’ component of the existing website and develop it as the visual theme for new apps. This would have several benefits: it would leverage existing branding efforts, emphasize the public relations mission of MHS, and it would make use of Google’s Material Design physical metaphor, which would provide an established framework and user patterns for app developers to work with.
PROCESS
I began by seeking visual documentation of existing assets. When none was forthcoming, I tried deconstructing elements from the existing website but this was limited to small PNG files. Using Adobe Illustrator, I created the desired visual elements using gradient overlays over the MHS color palette. This had the benefit of limiting the number of color swatches required while producing a wide variety of effects that are reproducible on a variety of platforms.
The method, swatches, and size (using Material Design specs) of each element was documented in the style guide. The use of larger page elements were then documented using the smaller elements. The result is a recipe future designers and developers can use to create consistent visual effects.
In addition to visual elements, I also created guidelines for general branding, units & measures, typography, use of the MHS seal and logo text, and best practices for app naming and file management.