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:
Responsive design across mobile and desktop form factors
Adherence to ADA accessible design requirements
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.
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.
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.
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.
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.