01 · The problem
Every collab launch started from zero.
Through 2021, every brand collaboration Ruggable launched was a custom build.
Marvel, Star Wars Mandalorian, and the other licensed launches that year had me
designing each landing page from scratch: research, wireframes, several rounds
of module iterations, then sending the file to engineering to build from
custom code. The pages were good, but the path to get there was expensive.
Every collab was a small wholesale rebuild.
The photo team was running mostly for social back then, not for web. We'd get
a handful of wide shots that worked for a hero banner and made the rest fit
with what we had. Engineering rebuilt similar-but-not-quite-the-same modules
for each launch. Stakeholders re-reviewed the same kinds of decisions on every
page. The pattern was clear before the system was: we were going to keep
shipping collabs, and the next one shouldn't cost what the last one did.
02 · The atomic system
Components first. Naming, variants, and a Contentful bridge.
The work I did across Marvel and Star Wars left me with a pile of components
that almost-but-didn't-quite belong to a system. In 2022, I made the system
deliberate. I established an atomic component library in Figma: naming
conventions, UI variants, and a shape for each module that matched how our
CMS, Contentful, actually expected content to come in. Components designed to
be assembled, not just admired.
The bridge to Contentful is the part that earned the framework its place. The
component types in Figma matched the content types in Contentful one-to-one.
A designer or marketer could compose a page in Figma, configure the same
modules in Contentful, drop the right assets in, and ship without an
engineering ticket.
From my 2022 end-of-year review
"I was responsible for establishing the foundation and leading the atomic
system from beginning to end. I contributed to the team's cohesiveness by
helping to clarify and unify the naming conventions, UI, UI variants, and
functionality of our component types with our CMS (Contentful). As a result
of all of this, in just a few hours we are able to quickly build pages in
Figma, set them up in Contentful, and upload assets without the need of any
dev for a great-looking page."
Edwin Rodriguez · '22 EOY self-review · Lattice, Dec 2022
What the system included
▢▢
Atomic components
A library of reusable modules with consistent naming, variants, and behavior. Built to be assembled, not customized.
↔
One-to-one with the CMS
Each Figma component matched a Contentful content type exactly. No translation layer between design and production.
⊞
Photo dimensions
Standardized image specs baked into the components so the photo team could pre-plan shoots instead of briefing each launch ad hoc.
That last piece changed how the photo team worked with us, too. Once they had
specs to plan against — module aspect ratios, the kinds of shots each LP would
call for, what patterns would need to be photographed differently — collab
shoots became coordinated work, not leftovers from the social shoot. The
system extended past Figma.
03 · The template
A fixed top. A swappable middle.
The component library let us build pages fast. The next step was making the
pages themselves predictable. In 2023 I worked closely with my manager to
shape a page template: a fixed top structure that every collaboration would
share, and a middle and bottom that could be composed from the component
library to fit each brand. The constraint became the frame; the brand
expression lived inside it.
The three launches below trace the arc: two custom builds where the patterns
emerged, then the first one composed from the template itself.
ruggable.com / Star Wars Mandalorian
Hover to scroll · click to expand
ruggable.com / Marvel
Hover to scroll · click to expand
ruggable.com / Morris & Co.
Hover to scroll · click to expand
Every collab since has run on the same template, and the design team's hands-on
involvement has gotten a little lighter with each launch as the system did more
of the work.
04 · The handoff
The system was supposed to outlive us.
The frame the framework gives the team is the part I'm most proud of. From
the start, the goal wasn't to make myself the indispensable designer for every
collab. It was the opposite: every component, every Contentful integration,
every photo spec we standardized was a small bet that the next launch
shouldn't need a designer or a developer to ship.
By 2024 that bet was paying out. New collab launches were running on the
template, often without me. My manager confirmed the broader pattern in the
2023 mid-year review: "taken the lead on developing our Design System within
Figma." The same template-and-handoff pattern we'd built for brand LPs got
picked up later for our DSM-to-Contentful documentation, which I built using
the same approach: a solid template, modules tested in the destination tool,
a resource other teams could run with.
The success metric I cared about
Not number of pages shipped, or hours saved per launch, though both went the
right direction. The metric I cared about was whether the next collab could
launch without me in the room. Each launch, that got more true. The framework
was doing its job.
05 · Reflection
What the framework taught me.
What worked
Build two, then templatize.
The system emerged from doing the work, not from sitting down to "design a system." Marvel and Star Wars were custom builds that produced the components. Only after using them on real launches did the template become obvious. Build-it-then-name-it tends to ship more durable systems than name-it-then-design-it does.
What I'd change
Bring CMS in earlier.
The Figma-to-Contentful bridge was the framework's most useful feature, and it came late. If I were doing it again, I'd treat the CMS shape as a design constraint from the first component, not a translation step at the end. The team that builds the design system should be in the same room as the team that builds the CMS schema from week one.
Open question
How much should a framework constrain a brand?
The strongest brand expressions in our collab work pushed against the template. The frame existed to enforce consistency, but every great launch wanted to feel a little not-quite-Ruggable. That tension is the productive part of the work. How much give the system has — and where — is still being figured out.
What's next
The handoff is the win.
The success of a design system isn't how good its first launch looks. It's whether the fifth, tenth, and twentieth launch can happen without the designer who built it. Each collab after Morris pulled a little further away from design's hands, which is the proof I'd ask of every system I build going forward.
