Designing a design system

An example of the design system in action

Overview
I led the creation and collaboration around Solv’s design system, Jigsaw. It holds 150+ shared components and styles across Figma and Storybook. The initiative improved the product org’s speed, quality, impact, and organizational design maturity.

Problem
The quality, speed, and impact of the product was suffering without shared design components across design and engineering.

Inconsistent styles & usage

Too much variation

Scattered, inaccessible colors

Creating design principles
I led workshops with my design teammate and head of product to make high-level principles to guide future decisions.

I worked with our design advisor to transition from Sketch to Figma to improve our workflow and component sharing capabilities.

When the company wanted to expand into another vertical, I convinced the team that this would be a good opportunity to lay the groundwork for a design system. As a startup, we’d need to build it in parallel to product work.

First foundations
We started with typography, colors, spacing, and buttons. I audited and refined our colors to ensure they would be functional, warm, and accessible. I changed our primary brand color to meet minimum contrast guidelines and selected a dark gray for increased contrast optimized for body text.

In addition to the primary color palette, we added specific colors for success, alert, and error states.

To align with our design principles, I adjusted button color and radius to increase warmth, and improved accessibility standards in inputs so they became more obvious. I ran multiple feedback sessions with the other designer, and presented early concepts to the broader engineering team.

Complex components & collaboration
Next, I combined foundational elements into more complex components. We added navigation, choice cards, check boxes, and tables when working on a paperwork product.

I delegated icons and illustrations to design teammates to add them into compound components like form fields, choice cards, or eventually, modals.

I held separate syncs with the engineering lead and the design team on a biweekly basis to review progress and share feedback.

Phase 4: Embedding into the product process
I made a final push to create any components we hadn’t incorporated yet, like modals, switches, special text fields, and time slot buttons.

Eventually, we embedded component creation to share engineering efforts across the team.

I workshopped the design system process flow with my engineering partner to document the lifecycle of a new design system component.

Outcome
Jigsaw helped the product org ship better products, faster. It also significantly improved our design maturity by unlocking designers’ time to collaborate with teammates and serve as strategic, proactive partners.

📝 2-3x
Paperwork completion rate from just swapping components

🧑‍💻 +75%
of front-end engineers said speed, quality, workflow improved

Back to work