developing a design system

Design within our organization was more of a utilitarian function that provided support to the product team. That in itself isn’t an issue but we found ourselves receiving similar requests over and over from product groups and through developer hand-offs. We were in a sense repeating work, duplicating code, and rarely had a chance to create a consistent deliverable across the company. We decided a design system could help make us more efficient, consistent, and confident in our design output.

role: design team lead + principal designer

we worked with 

This was an internal goal that would empower the designers, developers, and product teams to produce better experiences for our users quickly, consistently, and across all the products.

At some point, we worked with just about everyone. Marketing, Product, Development, Architecture, Sales, HR, everyone.

we used tools

Figma > Storybook > React and VUE

We started by migrating our various assets and comps into Figma as a team. We used our existing asset libraries, styles, and aesthetics that were already in production.

From there we started to organize and compile this ‘stuff’ into re-usable components. We solidified a single source of truth for styling and began to connect the dots using Figma’s API to create a component stack. This allowed a seamless handoff from the designer’s desk all the way through development.

Discovery

First, we interviewed the product folks, developers, and designers asking them what their processes were, what the pain points were, and where they thought we could improve. We distilled that, presented a problem and a solution that seemed to mesh well with our existing processes. We researched other systems deeply, understood what pieces applied to our needs, and gained the necessary confidence.

the strategy

BUY IN - Evangelized the problem, revealed the inefficiencies, imagined solutions.

RESEARCH - Studied other systems to find the best execution for our company.

BUILD - Created the thing and solidified the first iteration.

SHARE - Created a showcase site, a place where it can be seen and used. This visualized the single source of truth.

USE - Allowed for wide-spread contribution, connected the system to the real thing.

The final outcome

Knowing we might not get it right initially, we decided that if we took persistent small steps over time we could pull it off. From day one to our first system-powered component was about 18 months.

Our mindset was ‘use what you have, start where you are, and do what you can’. Our small but mighty team of 3 designers created a system in our spare time, that allowed a sales-driven tech company, with 11 businesses, to leap into design maturity.

I can say that our team collaboration is more healthy and the understanding of best practices is more widespread. The system is maturing but we could stand to prioritize its value.