tl;dr
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. Internal interviews revealed design was so busy reacting to product requests and pixel-pushing that there was little time for more strategic processes, like cross-functional collaboration or user testing. I believed a design system would require a bit more effort upfront, but improve the product in the long-run.

Phase 1: Setting the stage
I led workshops with the designer and head of product to determine high-level design principles that could guide decisions moving forward.

With the help of our design advisor, I encouraged us to transition from Sketch to Figma to improve our capacity to collaborate and share components across team files.

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 our product work, implementing components and documentation on an as-needed basis.

Phase 2: First foundations
We started with foundational elements of 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.

To align with our design principles, I adjusted the color and corner radius of our buttons to increase “warmth” and improved accessibility standards within form fields so they became more “obvious.” I ran multiple feedback sessions with the other designer, and presented early concepts to the broader engineering team to solicit questions, feedback, and participation interest.

Phase 3: Complex components & collaboration
With the basics were ironed out, we began combining foundational elements into complex components. When we shipped a paperwork overhaul, we added a navigation component, choice cards and check boxes, and tables.

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

As I wrapped up Figma components, it became unsustainable for our engineering partner to ship all the Storybook components solo. We gained buy-in from EPD leads to share the efforts across the engineering team by embedding component creation into our product development process.

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.
- Over 75% of front-end engineers said the team’s speed, product quality, cross-functional collaboration, and ease of workflow was “better” or “much better” because of the design system
- Product, sales, and marketing colleagues used styles in presentations, branding, emails, and promotional materials
- Increased paperwork completion rates ~200% from simply swapping out UI components (below)