Shoflo's Polymer design system

Prior to implementation of Polymer, Shoflo had no real set of unified visual identity. As the sole designer, the blame admittedly fell solely on me. Rather than sticking to a set of guidelines, many product design decisions were made "in the moment." Over four years, these small inconsistencies had created numerous problems, such as:

10+ modal patterns. Some had buttons on the right, some on the left, some on the left and right

20+ shades of gray

2 different font families

8 different button sizes

Increased development time to make custom components

Failing WCAG accessibility guidelines

Increased effort for customer support to document different patterns

In early 2019, I set a goal to fix these problems and implement our first design system to support an upcoming product redesign. Armed with Figma and the internet, over the next several months I designed and helped to implement Polymer.

I personally set a few core tenets of Polymer:

Above all else, it had to meet WCAG AA guidelines for accessibility.

It had to simultaneously be flexible and rigid.

It had to be predominantly on an 8px grid (with exceptions made for 4px.)

Every component has documentation for developers.

As the only designer at Shoflo, my role on Polymer was pretty much everything:

Setting up the Figma project and component naming structure

Keeping up to date with Figma and making sure components used the latest Figma features

Writing documentation for components

Helping implement with the development team

Fixing "bugs" with components (such as improper constraints, instance swapping not preserving overrides, auto layout issues and so on)

Below is a list of components such as buttons, inputs, typography, and colors. Note: some of these components are being currently updated in Polymer as we make changes to the visual identity.

GIF showcasing quick swapping between Variant properties in Figma