TIMELINE

Spring → Summer 2024

USERS

For us, by us

Myself, mid-level

Randi, mid-level

Claudia, lead

Julia, senior

+ Ani, UX design system lead

CONTENT DESIGN TEAM

An integrated library and design system, for all designers.

Searching for content guidance — quickly — is time-consuming. We struggle with:

An inefficient and unscalable workflow

→ from wasting time digging through Figma files, content standards, or Slacking for answers;
we need patterns and strings at the component level

A confusing design language

→ from reinventing the wheel all the time; we can’t automatic simple tasks, which

increases cognitive load, user effort

decreases navigation, product stickiness, usage

No central repository for product strings

→ resulting in inefficient processes and copy variations across the product

GOALS
Less context switching

No more scouring standards or apps for that one microcopy

Greater consistency

Reusable language → reduce cognitive load and improve usage

Improved scalability

Even product areas without content support can be scaled

And we needed to integrate content standards into CueDS (UX design system) components, so we could:

Align content patterns

Into CueDS Figma docs, descriptions, and content

Unify content + UX design

To support pattern and component discoverability

Track components easily

To implement changes at scale

PERSONA

The designer.

Whether they design with wireframes or words, they’re excited to try this new solution.

Our org only has six content designers, and none are on my team. I admit I’m not the best writer... and ever since they ended their office hours, I feel like the content is not up to par in my designs.

If I can find guidance for error messages just by searching in the Assets panel, it’ll make my workload so much lighter.

“

Principles that separate UI elements from copy.

Building the library in such a way will bring consistency and reusable language into the design process.

ATOMIC DESIGN

e.g. In a banner, we’d switch strings via the properties panel.

Archive product strings across a master Coda doc, the Content Design String Library

Experiment with Coda for Figma plug-ins, variants, and component properties to bring content into Figma

  • Variants for common content patterns, so designers can add pre-approved copy

  • Component properties to swap text properties via instance swaps

THE PLAN

Ultimately, our content standards (in Coda) and the UX design system (in Figma) would become one integrated library.

TAXONOMY

We defined our content taxonomy via patterns and tones, leading to two organizational schemas: A and B.

Organizational schema_A

Organized by component.

Banners (Errors, generic, change mgmt)

Buttons (Backward, forward)

Coachmarks (FRE, onboarding, change mgmt)

Empty states (First time use, no results, error)

Modals (Growth, help, confirmation)

Pills (Suggestion text)

Popovers (Generic, AI explainability)

Tooltips (Generic)

Organizational schema_B

Organized by use case.

Feature intro (FRe, onboarding, multi-step tour)
Tone: Helpful, supportive

Legal/CYA (Local explainability, change mgmt)
Tone: Informational

Navigation/System (Success, empty state, buttons)
Tone: Informational

Resolution (Loading, error, save/rename)
Tone: Educational

  • Collected strings from our product units (mostly errors + loading states)

  • Updated UX writing best practices

  • Decided on organizing structure with CueDS

  • Aligned on discussions for common patterns

  • Workshopped with the CueDS lead and usability
tested 3 integration solutions

WHAT WE DID
CUEDS — INTEGRATION SOLUTIONS
TEST #1
TEST #2

  • Content integration shows improved accuracy

  • Experienced users rely on memory

  • Mixed feedback on combo solution, while attached and detached solutions were well-received

Test insights

  • Varied application of guidelines

  • (UXD) Preference toward specialization support with content designer

  • Learning curve and need for guidance

Final solution: Detached component-agnostic “sticky note,” which we wrote content for.

RESULTS
CODA — String library

As a bonus, I designed color schemes and named them after seasonal drinks — current theme: bewitching witches brew. 🍷

FIGMA — String library
CUEDS — Sticky notes

These sticky notes contain guidance for 10 states and 3 components.

On June 28, we launched and enabled the library with our design partners. We’re currently maintaining it for future template requests.