Platform UX content patterns
Reusable UX content patterns tied to common UI components, grounded in real usage and supported by enablement.
Reusable UX content patterns tied to common UI components, grounded in real usage and supported by enablement.
Role
Sr. Content Designer
Goal
Create reusable UX content patterns tied to common UI components, grounded in real usage and supported by enablement.
Stakeholders
Design system team (Prism), Content design team, Localization, Accessibility, Engineering (for string reviews and implementation)
This project was a direct continuation of the content guidelines and component-specific guidelines work. As those systems matured, a new gap became increasingly clear: while teams had access to components and language rules, many still struggled to apply language patterns consistently across real-world product experiences. Designers and writers were making reasonable decisions in isolation, but without shared UX language patterns, those decisions often led to inconsistency, duplicated effort, and uncertainty about best practices.
As we audited product surfaces and partnered with design systems, we saw recurring issues:
This wasn't a tooling issue. It was a pattern literacy issue. Teams needed clear, example-driven guidance for how language should work inside common UX moments.
While writing error messages with engineers for a product launch, we realized we needed a framework and formulas for how we address errors. Across products, errors were overly technical or vague, structured differently, or missing clear recovery paths.
A standardized framework in FigJam with required elements: problem + cause + resolution. Plus tone and clarity principles.
Error messages are critical for accessibility. They need to be clear, actionable, and screen-reader friendly. We aligned our structure with WCAG 2.1: clear recovery paths, avoid jargon, and ensure the full message is exposed to assistive tech.
Outcome: Shared structure (problem + cause + resolution) that designers and engineers could apply consistently.
Design system documentation (right) was the only guidance designers had. When they pulled the pattern into a design, only the box and title were visible by default. Body copy, CTAs, and other elements were collapsed or hidden, and many designers didn't know they existed.
That led to misaligned headers and body copy, buttons used inconsistently or omitted, and the same default image reused everywhere.
Step one: partner with design systems to unhide key elements. Remove barriers so designers could expand and use the elements that were already there, instead of working with a collapsed state they didn't know how to change.
Box and title only
Full pattern with body and CTA
In addition to the design system work, I partnered with the design team to create patterns for the most common scenarios. These helped designers apply consistent structure and copy across empty states.
Outcome: Clear patterns teams could apply directly from the system. That was the first step toward better adoption and momentum to expand.
Presented patterns in Design All Hands. Shared ready-to-adopt templates tied directly to Figma components. Goal: turn documentation into a shared language teams could apply without guesswork.
Outcome: Set precedence and created a path to secure time for more patterns.
With error states and empty states successfully adopted, we expanded the system to cover the most frequently used components. Each pattern focused on clear structural guidance, consistent intent and hierarchy, and reusable language frameworks. By the end: 67 reusable UX content patterns, grounded in real product usage.
Added to the product terminology guide: formulas and examples per component. Sentiment, variant, templated copy, and real-world examples so teams could see exactly what copy went into toasts, modals, and other high-traffic UI.
We provided guidelines for designers and engineers on how to handle content consistently for each pattern. Below is the example for toasts that went with the Figma documentation. Learn more about how we created component guidelines.
Do
Don't
Outcome: Designers and engineers moved faster with less guesswork. A shared playbook reduced time spent on copy decisions, cut inconsistency across touchpoints, and scaled through people, not just documentation.
Cross-team alignment was critical. From design to engineering to accessibility, every change had to be intentional and sustainable.
Error and empty state patterns needed to be clear, actionable, and screen-reader friendly. That pushed us to align structure with WCAG principles and design system components.
Even small inconsistencies in label structure can slow users down. Workshopping these patterns with other content designers and design leaders sharpened my skills in both persuasion and precision.
Putting patterns in Figma and tying them to components made them discoverable in context. Documentation stopped being a separate lookup and became part of the design workflow.
Scalable content system
67 reusable UX patterns that scale across toasts, modals, empty states, and more.
Reduced ambiguity
Clearer language and structure across high-traffic touchpoints.
Accessibility & scanability
Patterns aligned with WCAG principles and screen-reader friendly structure.
Consistent decisions
Designers and PMs can make content decisions without reinventing patterns.
Systems thinking
Content patterns showed how language, design, and tools could work together, not as separate disciplines but as one system.
Content patterns built on the content guidelines and component-specific guidelines work.
Platform content standards →