Case Study · Microsoft
A content system for Microsoft's design-system docs
Microsoft's CxD studio, the teams behind Teams, OneDrive, and SharePoint, had its design guidance scattered across hundreds of places. I turned it into one content system, modelling every page as a field-level spec an engineer could build the docs from without interpretation.
Role
Staff Content Designer, led content strategy for the CMS
Timeline
Jan to July 2025
Team
Me (content strategy and architecture), an engineer, a visual designer, and my manager
The CxD documentation site: one home for design-system guidance across Microsoft 365
Challenge
CxD's products are built on Fluent 2, Microsoft's enterprise design system, and consume its global tokens. But Fluent 2 serves all of Microsoft, so on its own it's too general to guide CxD's teams. They needed their own documentation, specialized for how Teams, OneDrive, and SharePoint actually use it.
The scale when I joined
That guidance had almost no clear ownership, and people had stopped trusting that what they found was current. The expectation was an audit: gather the scattered guidelines and consolidate them into the new doc site. I made the case for something more durable. A consolidated doc would be stale the day it shipped, so the real job was a content system: an IA, a content model for every page type, and a CMS schema precise enough to build without interpretation. I led the team there.
Done had one bar: if it isn't there, it doesn't exist.
Discovery
This was a content-first project from beginning to end, and it started with investigation on two fronts: the people who would use the docs, and the medium they would live in.
I started with the people, because a doc site nobody trusts is just more noise. The CxD designers told me the same thing in different words: they couldn't find what they needed, and when they did, they couldn't tell if it was still true. Then I turned to the artifacts, auditing every foundation token by token across three products and four platforms, to see how deep the drift really ran. Color made it concrete:

Part of the foundations audit: color tokens traced across products and platforms, each flagged for gaps and contradictions
By the end of the investigation, three findings had reframed the whole project:
The drift wasn't only in the docs. The products themselves sat on Fluent 2 unevenly, which is exactly why "audit and consolidate" was never going to hold:
That was the turning point. The ask was to audit and consolidate, but the evidence said consolidation alone would never stay current. We didn't need better documentation, we needed a system that produced it, and I made that case to the team. The brief became clear: a content system for the CMS that serves everyone who touches the docs, the designers, content designers, and engineers who read them, and the authors who keep them current.
My approach
The clearest way to show the system is to follow one foundation, Color, all the way through: from the CMS it would be built on, to the content model, to the build, to a live page, then how the same process scaled to every other page type. I inherited a draft IA; everything else was mine to investigate and lead, with an engineer, a visual designer, and my manager.
Foundations, end to end
01 · Understand the CMS
Before modelling any content, I went deep on Statamic, the flat-file CMS we would build on. It defines every content type as a Blueprint assembled from typed fields, so learning it told me both what was buildable and how. That shaped the whole approach: I would model content as typed fields from the start, so the content model and the CMS schema were one artifact, not a document thrown over a wall to engineering.
Understanding the field types gave the model its vocabulary. A Text field is a label, a Replicator is a repeatable section that lets content set its own depth, an Entries field is a governed cross-link. Knowing this up front meant I could design a system that fit the tool exactly, and met the needs of everyone who would use it.

Inside Statamic: every content type is a Blueprint of typed fields
Across every page type, the content models lean on eight Statamic field types:
02 · Model the content
With Statamic understood and the users' needs from discovery in hand, I drafted the content model. A foundation became a clear hierarchy: an Overview with its principles, a Usage section built from a Replicator of guidelines (each a best practice with a Do and an optional Don't example), Accessibility, and Tokens. The depth is set by content, not by a template, and every field carries its type and the prompt copy that guides the author, so the model reads as a spec, not a suggestion.

The Color content model: the content hierarchy on the left, the CMS guidelines and field types on the right, mapping to the live page

The Guideline block as a field-level spec: each field names its Statamic type and the prompt copy that guides the author, reused across Foundations, Components, and Patterns
03 · Build it in Statamic, with the engineer
With the model drafted, the engineer and I built it directly into Statamic, turning each field into a typed Blueprint field. Because the model was already written in Statamic's terms, the schema handed over had no ambiguous slots: the engineer built the Blueprints from it without asking what I meant. This is where the content model became a real, working CMS.

The content model realized as a Statamic Blueprint, built with the engineer: each field typed, with its authoring prompt
04 · Build the design system, with the visual designer
A doc site needs its own design system too. With the schema in place, I worked with a visual designer to create the reader-facing component library: the page structure, cards, navigation, typography, and content blocks that render every page. The content model and the component library were designed to fit, so every content block had a component to render it.

Content model to components: each modelled field maps to a component that renders it, so the spec and the UI stay in lockstep

The CxD Doc Site visual system, built with a visual designer: page structure, cards, and typography
05 · Author and ship the page
With the Blueprints and components mapped in, the CMS produces the page directly, and I authored the Color page through it. The authoring form surfaces the model: definition and purpose are separate fields, because what something is and why it matters are different cognitive tasks, and every future author is prompted to answer both.
The result: the live Color page, produced from the content model. Click to view full.
Then every other page type
06 · The same process, across the site
With the foundation pattern proven, I modelled the same way across every page type the site needed: Components, Design patterns, Onboarding, Landing, News, Accessibility, and the product and platform pages. Each got its own content hierarchy, CMS guidelines, and page IA, all rendered through the same component library and held in one taxonomy. I audited and authored the content for every foundation and the rest of the launch site, with platform-specific copy written distinctly per track rather than duplicated: Segoe UI on Web, Segoe UI Variable on Windows.

The five-level IA that holds every page type, with the platform split at L3 (Web, Mobile, Desktop)
A component page: Accordion
A news article page
An onboarding page
The same system, different page types; click any to view the full page.
What I set up to carry forward
I rolled off before launch, but the system was built to keep growing. Four frameworks were scoped and shaped, each ready for the team to take further.
Token architecture
A six-level structure, from raw values up to platform modes, with a per-foundation strategy for which levels to surface.
Notification framework
A pattern that separates the message from its components, choosing the right one by urgency and behaviour.
Design system principles
The "why" beneath every guideline, the standard the system holds itself to:
Governance workflow
The content models plug into a contribution workflow, so a guideline moves from idea to published page on one defined path instead of an ad-hoc request.

The contribution workflow: author, review, ship, on one defined path
Outcome
The system, not any single page, is the deliverable.
By the time I rolled off, the system was real end to end: an IA across the product ecosystem, a content model for every page type with a complete Statamic Blueprint schema, a component library for the reader-facing site built with a visual designer, and the site itself producing pages from the CMS. I had audited all the foundations and authored the content for the launch site.
An engineer built the Blueprints straight from that schema, no interpretation required. I handed off the forward frameworks with their shape defined: the token architecture, the notification framework, the design-system principles, and the governance workflow. The system was built to cut a support burden measured in hundreds of hours a month and to make "if it isn't there, it doesn't exist" actually true.
Reflections and learnings
I was hired to consolidate documentation. The most valuable thing I did was reframe the job: a consolidated doc would have been obsolete on arrival, so I made the case for a system and brought everyone with me. That is the work, the judgment about what to build, not just the building.
Most documentation work stops at Phase one: write the page. Phase two builds a template: define the sections and give contributors a guide. This needed Phase three, a field-level Blueprint where every slot named its data type, its prompt copy, and the editorial rule behind it. An engineer built the CMS from that spec without asking what I meant.
A content model an engineer can implement directly is a different standard than documentation written for humans to read.
That is the same pattern I carried into TurboTax Canada: designing the system that determines how content gets made, not just making the content. The through-line isn't the tools or the domain. It's the altitude, working on "what is the system through which this work happens" rather than "what should this one thing say."
Kyle led content strategy for our new CMS. One of his most impactful contributions was a robust content framework and system, with a clear content hierarchy and comprehensive CMS guidelines. This brought structure and consistency to our documentation, making it easier to manage content at scale. His ability to think holistically across user journeys, processes, and flows elevated the entire design system experience.
Drieli, Product Designer, Microsoft