The Design System

While consulting for the world’s leading type 1 diabetes research foundation, my main assignment was the creation of the following design system. Its purpose is to bring consistency to our dozens of web properties, and millions of users. It was built during a period of twelve weeks (6 sprints), which began in the spring of 2018. See it live.

The Problem

Having recently undergone a branding refresh, we needed a source of truth for designers, vendors and other content creators to abide by and enforce brand guidelines, while rapidly creating layouts.

The Process

We started with a pattern audit to help us identify our most widely used components. Following the audit, we narrowed our list down to a dozen of our most-used components. Those components were then laid out as element collages, and re-skinned according to our new branding styles.

Element Collage 1
Element Collage 2
Element Collage 3
Element Collage 4
Element Collage 5
Element Collage 6
Element Collage 7
Element Collage 8
Element Collage 9

The Library and Doc Site

My role, during this process, was to lead the design and UX efforts (including: pattern audit, digital rebranding, component library creation, design handoff, speccing and documentation).

Library 1

Before and After

By using our design system’s styles and components, we now offer anyone on our team the ability to quickly and easily generate brand-consistent layouts.

Before 1
After 1
Before 2
After 2
Before 3
After 3

The Aftermath

Since its internal release, my focus shifted to maintaining our design system, while identifying potential components and patterns for future updates. Take a look.

If you like what you see, and could use some help with your design system, drop me a line: