Mobile-First Style Guide

After acquiring a series smaller healthcare technology firms, our company needed to unify our application architecture across our existing, acquired and upcoming applications. We needed a new style guide to establish:

1. Responsive design across mobile and desktop form factors

2. Adherence to ADA accessible design requirements

3. A common brand identity

We based our style guide on Google's Material Design guidelines. This allowed us to hit the ground running with a well researched, well designed framework that already felt at home simultaneously on desktop and mobile form factors.  Our task was to document our deviations from baseline Material Design in order to promote our own brand and to address the unique needs of our end users.

Typography

Goals

• Google fonts for universal access

• Open characters for readability

• Readable at small scales

• Holds up when reversed on dark backgrounds

• Emotes desired Tone and Attributes: optimistic, confident, helpful, inviting, caring, sophisticated

• Clear hierarchy through limited scale and weights

• Similar characters and glyphs should be distinct. For example, the number one, upper case “I”, lower case “L” and the vertical bar should not appear identical. In medical applications, it is critical that information be read correctly.

Colors

Goals

• Define a set of complementary primary and secondary colors for the GPS App.

• Avoid colors that may be mistaken for status colors such as red and green

• The colors must be AA contrast compliant.

Example documentation

Our team prepared documentation with our developers foremost in mind.  I collaborated regularly with software engineers and product owners to ensure that our documentation would provide developers with exactly what they needed to design functional, reusable widgets.  We created a set of fully functional, high fidelity UX prototypes for our online style guide. Each member of the team was given responsibility for different UI elements  Below is an example of the work I produced for our button styles.

Specs and Redlines

As much as possible, our team strove to provide our front end developers with as little ambiguity as possible regarding colors, styles and reusable patterns. In the example below for dropdown menus, I added detailed measurements for minimum and maximum dimensions, as well as for “invisible” styles, such as padding and spacing.

Legacy Application Transition

Developers were provided with clear documentation focused on simplifying the transition from legacy styles to our new patterns.

Interactive prototypes were also developed demonstrating the layout and functionality of the redesigned pages, as pictured below.

Outcome

The new style guide gave our company a more pleasing, modern and unified visual identity. It provided a strategy for bringing mobile functionality to our legacy products, while also ensuring compliance with ADA requirements. The common styles were also an important part of our ongoing efforts to simplify our overall user experience. Most importantly. workflows that once took users across separate systems now provide a seamless experience.