How I transformed IBM's design system documentation from static pages into tutorial-style learning and shaped the 2026 Carbon site relaunch.
Context
Carbon Design System is IBM's unified design language used by 324 teams, powering 640k+ GitHub repositories, and reaching 450k+ monthly visitors. The patterns were solid. But the way guidance was delivered wasn't working.
Teams were building onboarding experiences inconsistently not because they didn't care but because the documentation was too long, too text-heavy, and too disconnected from how designers and developers actually work. Long pages discouraged engagement. Teams wanted visuals. Developers wanted code alongside the guidance.
I was brought in to change how Carbon taught its own system and in doing so, directly shaped the 2026 Carbon site relaunch.
Research
I partnered with a researcher from the Carbon Design System team to interview five designers and five developers who actively used the Carbon site. The findings were consistent across both groups.
Teams preferred visuals over long-form text. Designers wanted to see the pattern in use, not read about it.
Developers wanted code directly alongside guidance. Opening a separate doc to find the component code caused drop-off.
Long pages reduced engagement. When teams couldn't quickly find what they needed, they skipped the docs and built from scratch.
The format was slowing adoption. The patterns were good the problem was entirely how they were being taught.
"The guidance was valuable. The format was the problem."
Key finding from user research interviews with IBM designers and developersDesign process
Defined the new tutorial format
Working from the research insights, I defined a repeatable tutorial structure that every guidance page would follow short, scannable, and actionable from the first scroll.
Designed the tutorial anatomy
Each tutorial page was built around five components: a short video showing the experience in action, three to five clear steps breaking down the flow, a Figma pattern link for designers, component code for developers, and related patterns for next steps.
Applied the format to the Interstitial pattern
I used the PLG Interstitial onboarding pattern as the first case converting its existing static documentation into the new tutorial format, validating the structure with real teams.
Shaped the 2026 Carbon site relaunch
This work directly informed the redesigned Carbon Design System site planned for launch in 2026. I owned the guidance and tutorial experience area defining how all future patterns would be documented and taught.
The result
The new tutorial format transformed how IBM teams learned to use Carbon patterns. Short steps, video walkthroughs, Figma links, and component code all in one place. Scroll to explore the live page.
โ Scroll inside to explore
The new tutorial anatomy
Outcomes
Monthly visitors
The Carbon site reaches 450k+ monthly visitors all of whom now benefit from the tutorial-first guidance format.
Component inserts per week
Weekly Figma component usage across IBM teams, supported by clearer guidance that teams can act on immediately.
GitHub repositories
Carbon is used across 640k+ GitHub repositories globally the tutorial format makes it easier to implement correctly.
Carbon site relaunch
This work directly shaped the redesigned Carbon Design System site the new standard for how IBM teaches design at scale.
My role
I co-led the research with a Carbon researcher, defined the tutorial format, designed the new guidance anatomy, and applied it to the Interstitial pattern as the first live example. I also owned the guidance and tutorial experience area for the 2026 Carbon site relaunch defining how every future pattern would be taught.
This work required understanding both sides of the audience simultaneously designers who think visually and developers who think in components and code. The tutorial format I defined serves both without compromise.
carbon-screen2.png