Rocket Lawyer's first design system, shipping marketing pages 14× faster
It starts with six designers and no shared library
When I joined Rocket Lawyer in 2021, the company had spent years on hypergrowth. Revenue doubled from $50M to $100M in two years, and the money went to acquisition and marketing, while the foundations underneath waited.
The design team grew from two designers to six in twelve months. There was no design system and no shared Figma library, so each of us drew every button, input and tooltip from scratch.
- designers in twelve months, with nothing shared between them
- 2 → 6
I audited the product and kept finding the same job drawn differently
“Make document” was orange on one screen and red on the next. Engineers rebuilt each version by hand and skipped focus, loading and disabled states whenever nobody had drawn them. Customers met a slightly different product depending on where they were, and the brand blurred the deeper they went.
One product, many buttons
I asked for a design system team, and the CDO asked me to prove it first
I pitched Courtney O'Connell, our Chief Design Officer, on a dedicated team. Courtney's answer was honest: a formal team would take years to approve, and I shouldn't wait for one. Build the system, show what it changes, then use the data to make the case.
So the six of us in design would be the proving ground, and the team would be earned afterward.
So the question became
How might I prove a design system pays for itself before anyone funds a team for it?
I started with the smallest pieces and built up
I studied Material, Polaris and Lightning for how they were structured and governed. Courtney reviewed the work in weekly crits, engineers saw it monthly, and I published each Figma library the day it was ready.
Atoms
Five foundations: color, typography, iconography, illustration and elevation. Each one became a set of , so design and engineering pulled from one source.
Colors
1 of 5Typography
2 of 5Iconography
3 of 5Illustrations
4 of 5Elevation
5 of 5Molecules
Six components built from those atoms: buttons and links, inputs, radios, checkboxes, tooltips and banners. Each one had every state engineers used to skip.
Buttons
1 of 9Links
2 of 9Text inputs
3 of 9Text areas
4 of 9Selects
5 of 9Radio buttons
6 of 9Checkboxes
7 of 9Tooltips
8 of 9Banners
9 of 9Then I gave marketing a way to build pages without us
The biggest win came one level up, in forms and CMS components. I gave them flexible slots, so one component could take many layouts instead of being copied and changed. Marketing could stack them into a new page that reflowed across breakpoints, without waiting on design or engineering.
Building a form
1 of 4One component, many layouts
2 of 4Reflowing across breakpoints
3 of 4Stacking a page together
4 of 4Here's what changed for the design team
By January, all six designers were building with the library every day, and it had replaced one-off mocks. New marketing pages and assets shipped fourteen times faster. Shawn, our Brand Design Manager, put it more simply.
- faster delivery of new marketing pages and assets
- 14×
- designers building with the system daily
- 6/6
- first design system, built without a dedicated team
- 0 → 1
Earlier what used to take us 2 weeks to complete, now can be done in a day.
Then engineering started building it
An engineer was wiring the same components into Storybook, and a proof of concept was scheduled with executives to make the case for a dedicated, cross-product team.
The same button, in Storybook
The biggest thing I learned was to just get started
When I began, I assumed a project this size needed a dedicated team before it could happen. It didn't. A Figma library built only for designers was enough to prove the value, and it made all six of us faster. Then those designers talked to their engineers, and engineering bought in and started building it too.
So if I see a similar problem somewhere else, I won't start by asking for a team. A small proof of concept can go a long way.