Content strategy Design systems Design Lead

Carbon Design System
site redesign

How I transformed IBM's design system documentation from static pages into tutorial-style learning and shaped the 2026 Carbon site relaunch.

450k+Monthly Carbon visitors
13.9kComponent inserts/week
640k+GitHub repos using Carbon
324IBM teams on Carbon

Context

Great patterns. Painful documentation. Teams were skipping the guidance entirely.

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.

Before static docs
Carbon before
After tutorial learning
Carbon after

Research

Talking to the people the docs weren't working for.

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 developers

Design process

From long docs to short steps evolving how Carbon teaches.

1

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.

2

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.

3

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.

4

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 redesigned guidance experience

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.

carbondesignsystem.com/...
Carbon tutorial page

โ†• Scroll inside to explore

The new tutorial anatomy

A short video showing the experience in action
3 5 clear steps breaking down the flow
Figma pattern link for designers
Component code for developers
Related patterns and next steps

Outcomes

Guidance that scales to hundreds of thousands of people.

450k+

Monthly visitors

The Carbon site reaches 450k+ monthly visitors all of whom now benefit from the tutorial-first guidance format.

13.9k

Component inserts per week

Weekly Figma component usage across IBM teams, supported by clearer guidance that teams can act on immediately.

640k+

GitHub repositories

Carbon is used across 640k+ GitHub repositories globally the tutorial format makes it easier to implement correctly.

2026

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

Researcher, content strategist, and experience architect.

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.

Next case study

IBM Content Services legacy to SaaS

How I led design modernization of a complex legacy enterprise platform and delivered within one year.

View case study โ†’
Screen 2

carbon-screen2.png

PLG Onboarding All work Content Services