Rivet

About the project

Rivet is a home-grown design system built by and for Lessen product teams through an open-source attribution policy. The system contains 140+ custom coded components with usage rules, variables, and 1:1 Figma component counterparts: every component had a Figma component, Zeplin component, StoryBook story, and coded counterpart.

I've always been a strong proponent of design systems. As one of the founding design members at Lessen, I was able to advocate for and evangelize this design-driven decision from the start.

From atoms to architecture

Rivet started as a simple Figma component library. Engineers were still rewriting buttons and modals from scratch, leading to a frankenstein of inconsistent UI. After getting CTO sign-off on rolling our own design system, I worked with design ops counterpart Bryan Swagerty to take a small repository of reusable components used by one team into a large, semantic library used by every product team at the company.

Rivet: Figma usage sheets

As the design team grew from 2 to 9 designers (plus design ops engineers, a director, and VP), a quick and nimble update process was no longer tenable. I was tasked with creating a structured, open contribution process, one that encouraged designers to propose changes while safeguarding the system's consistency across 3 user verticals with different device experiences.

Open, structured, scalable

• Decide: Upgrade an existing component, or create a new one? Can we adapt what exists so the change benefits everyone?
• Propose: Sketch the idea in broad strokes for stakeholder feedback before investing in full design
• Design: Build it properly in Figma in a new branch that anyone can find and review
• Refine: Gather additional feedback and continue refining for the highest quality outcome
• Merge: Merge the Figma branch so all designers can benefit, then prepare for implementation
• Support: Work with the design system team to ensure proper implementation and resolve ambiguity
• Release: Ship it; the component is ready for use across all products

Component refinement process

Component in Storybook

What we built

Measurable impact

One of my proudest achievements

Rivet is to this day one of the things I'm most proud of. It solved a real business need, fixed design consistency issues, and meaningfully improved collaboration across cross-functional teams. At the time I left Lessen, Rivet had 140+ components in active use across all product teams, with 70% reuse across the board.