Product Design System

Striving for a consistent, elegant, usable, and accessible experience within a product portfolio.

Overview

The company’s collection of products could barely be considered a portfolio. The visual design, user flows, even references to specific terminology all varied between products. Even worse: few web apps were responsive to device size (despite most users accessing from tablets) and no consideration had been given to accessibility.

As there often is, there were two choices: grow or die. So it was time to get to work.

Services

Project leadership & sponsor/champion
Design system research
Visual design
Accessibility & inclusive design research
HTML, CSS, & JavaScript

The project

A design system isn’t always the answer. But it made sense here.

A fractured product portfolio. Little consistency between any aspect of the user experiences. How could we modernize the landscape without having to completely overhaul every single product? Not to mention—we didn’t have the budget.

A design system seemed like a good fit. We’d only need to design visual components once. Once everyone was familiar with the look and feel, it could really start to snowball and gain traction.

But budget was limited. So we made two intentional choices that proved pivotal to our ability to succeed:

We designed and evolved the design system in tandem with a product redesign
We gave ourselves a big head start. We built the design system on top of an existing framework

Design System Analysis

Once we decided to consider pursuing a design system, it made sense to evaluate the current landscape. We researched Google’s Material Design, the Airbnb Design System, Shopify’s Polaris system, and most consequently: IBM’s Carbon Design System.

These mature, evolved systems inspired us. But they also kept us realistic about the size and scale we could expect from our project.

The start of the build

The grand scale and sense of completeness also had a serendipitous effect: instead of overwhelming us into defeat, we felt energized. There had to be a way to construct a great set of blueprints given our time and budget.

Enter Bootstrap

If ever there were a “why reinvent the wheel?” moment—this was it. We decided that, if we wanted to deliver a quality design system, we simply couldn’t build from scratch. And there was no reason to.

In fact: we conducted informal research from those already familiar with Bootstrap. In the end, it seemed to boil down to two complaints:

Everything “looks and feels” like Bootstrap
Code bloat

Addressing the first concern felt easy. We had Bootstrap coding experience that gave us confidence we could leverage their SASS model and API to allow us to tame and shape the framework to suit our needs.

We were careful when it came to the size of the code base. We disabled lots of components and areas of the code we weren’t using. We shipped the system with a version of Bootstrap included—which not only guaranteed that the code was slimmer, but gave us an opportunity to test our design system code to ensure compatibility as Bootstrap released subsequent versions.

How we built and evolved

This ended up being fairly straightforward. Since we coupled the design system evolution with a product redesign, we let that product’s needs determine the component strategy and timeline of the design system.

If a product requirement called for a new (or slightly modified) component, we built it as part of the product team and then incorporated it into the design system.

Sometimes ideas for other design system components arose and those were incorporated as well, but we tried not to stray too far from the product’s needs.

What did we deliver?

We built and delivered the design system in three components:

The design toolkit
This included an Adobe XD file that served as the Design System library and an example product page
The development toolkit
This included the code necessary to get up and running
A website
The site served as the front door, a means to access the other toolkits, and most importantly: the governance

How did we evaluate?

We measured our success in numerous ways:

Did we feel the design system was easy to maintain? Was it flexible enough to grow as needs evolved?
Stakeholder feedback
Not only did the product stakeholders need to feel as though the design system represented the direction in which we wanted to go, but designers and developers needed to buy in as well. Their feedback was critical.