Rivet

Summary

Rivet is a home-grown design system built by and for Lessen product teams through an open-source attribution policy. The system contains over 140+ custom coded components with usage rules, variables, as well as a 1:1 Figma component counterparts. Rivet seeks to bridge gaps in understanding between design and engineering while following established patterns and aesthetics.

Check it out at rivet.lessen.com*

* Site may not be live or publicly accessible anymore

Rivet

Answering critical questions about design, before they’re asked.

About the Project

Rivet was one of my passion projects at Lessen. I have always been a huge proponent of design systems, and being one of the founding design members of Lessen, I was able to advocate for and evangelize this design-driven decision.

Initially started as a Figma component library, Rivet was at its roots, very simple. What essentially existed was some atoms and molecules that made up the bulk of designs at Lessen But, we were still seeing engineers rewrite buttons, modals, etc. and this kept leading to a frankenstein of an app. Eventually we got sign off from our CTO to roll our own design system, as he saw the reduced overhead it could lead to and the constant UI issues that were coming up during implementation. So, along with my new design ops counterpart, Bryan Swagerty, we were able to take a small repository of reusable components that was used by a single product team, to a large library of reusable and semantic components that saw use by every single product team within the company.

With that, we started to invest a bit more into our components, and after the creation of Lessen Pro we had a pretty solid foundation of reusable components, and cut a new repo to use as a base for Rivet. After that, it was about identifying components that were missing, removing redundant components, and cleaning up existing components, along with general usage rules to guide designers and engineers alike in their usage.

Every component within Rivet had a Figma component, Zeplin component, StoryBook story, and coded counterpart.

Process

Lessen initially had a team of 2 designers and 1 director, leading to a quick and nimble process for updating a design system, since we only had to check in with each other. At one point though our design team grew to 9 designers, 3 design ops engineers, 1 director, and 1 vp.

That’s much less tenable for quick updates, thus a new process for component and Rivet updates had to be created. I was tasked with heading this process and making sure it was an open, straightforward process. The last thing we want to do is discourage designers from making changes to the system, but at the same time, we need to have guardrails that really safeguard the system from random additions. After all, Rivet was being used across 3 different user verticals with different device experiences, and we want to make sure what gets in, makes sense contextually for everyone utilizing Rivet.

1. Decide: Upgrade or New?

Decide whether a component can be “leveled up” or if you need to create a new one entirely. Can we adapt and use an existing component where this change would benefit everyone? No? Then we probably need a new component.

2. Make a proposal

Sketch out your idea in broad strokes so that stakeholders can provide feedback and help determine whether the proposed approach is the right one.

3. Start designing the component

Make it a real thing in Figma so that other product designers can profit from the hard work you’ve put in. Always start in a new branch that someone can easily find.

4. Refine

Gather additional feedback and continue to refine your branch for the highest quality component.

5. Make it Official

Marge your Figma branch so that other designers can profit from your changes. Prepare for implementation.

6. Provide support during coding

Work with Design system team to ensure proper implementation and clarify ambiguity.

7. Release it

When the coding is done, the component is ready for use in implementation! Celebrate 🎉

Reflection

Rivet is to this day one of my proudest achievements. It helped solve business need, designs issues, and increased collaboration amongst cross functional team exceptionally. At the time I left Lessen, Rivet had over 140 components and was being used across all product teams. With a general usage sitting at 45% across the board of reusable components. I loved being able to drive consistency in a scalable way and it really makes you appreciate the people who build the thing that people use to build their things. I hope you’ll check out rivet.lessen.com and see all of the hard work that went into it*.

---

* Site may no longer be publicly accessible, screenshots below.