If you’re already working on a design system for your company, you know the benefits one can bring. You know a design system promotes consistency across the user experience and speeds up workflows. You also know design systems hinge on moving design and development closer together.
But what about the content?
Maybe you have a dedicated content designer, content strategist, or writer on your design system team. Maybe you get to borrow one from time to time. Or maybe you’ve just got to improvise. Regardless of how you’re working or who you’re working with, building and maintaining a design system means working with content. There’s technical documentation. Design guidelines. Training materials. A fancy website. Information architecture. Governance. Let us count the ways.
As people who have worked with “the content stuff” in design systems, we’ve seen it play a critical role. Taking content seriously helps at every stage, from creating the system to documenting it and promoting its use. After many conversations with designers, managers, and product managers, we’ve also seen how important it is to be crystal clear about the distinct kinds of content work involved. A design system comes with many content challenges, each calling for different approaches. Ignoring these challenges, or lumping them together, just doesn’t work.
To untangle this knot, we’ve identified some of the most important ways content experts can contribute to design system work. We hope this helps teams better understand the many beneficial roles content can play in their projects.
Elevating the content in the system
First let’s talk about the content in the design system. There’s an information architecture that keeps everything in order. There’s the documentation that designers and developers rely on when using the system. Content designers, strategists, and writers can make these things better.
Creating a content strategy for the design system site
Your design system most likely lives on a site that serves as the go-to reference for anyone working on your products. Content experts can improve the site’s web content design and information architecture. The design system’s content must serve multiple audiences with different needs. Each of them should find the site clear, comprehensive, and easy to navigate. Like anything else online, it must make sense to busy readers who might be skimming or distracted.
Content strategists with a background in content migration, management, and governance can keep your system organized. They can keep documentation up to date with new use cases and recommendations. If you encourage contributions from the rest of your company, they can help integrate those. Design systems call for living documentation; content specialists can take charge of the proper care and feeding.
Writing easy-to-read system documentation
This is where content gets technical. Let the copy crew help. No one wants to spend their time scratching their head over bad documentation. A sharp writer can make guidelines and component documentation more meaningful. Good writing makes it possible to communicate design nuance, like the subtle distinction between your bar chart component and your histogram. Well-crafted documentation can make the difference between a system that works and one that falls apart. It’ll save the team down the line when there are far fewer clarifying questions to answer.
Developing content standards for the system
This is the part where content expertise takes center stage — and goes a little meta. We’re talking about the part of the design system that’s about how to use content. Creating it involves crafting guidelines for crafting content. It may even mean developing a full copy system, or what we’re calling a content system.
Lots of people put words in front of your users — designers, product managers, marketing folks, contractors, lawyers, and sometimes even professional writers. Like a trusty editorial style guide, the design system can keep all that copy aligned. It helps scale the expertise of a small team of content experts across the entire product experience.
Building a content system
Design systems usually include foundational guidelines for elements like color, spacing, and typography. They provide reusable UI components like buttons, tables, and forms. They’re typically built by and for teams of designers partnering closely with developers. And, typically, content is not part of it.
From a recent survey of design system sites, we know that there’s a content gap in design systems. Only a handful of leading design systems go to the trouble of including things like voice and tone guidance, editorial style rules, and reusable content patterns. And they benefit for it. Including content supports a design system’s top goals:
- Consistency. Defining rules for system-wide use of color, type, or iconography help a product feel more cohesive and trustworthy. The same goes for system-wide rules about tone, naming, and punctuation. Digital products should sound as good as they look, so language should be as consistent as any other UI element.
- Differentiation. Like a well-defined visual style, a well-defined voice and verbal style can help distinguish a product from other experiences.
- Usability. Consistent UI patterns make a digital product easier to use. When a site behaves in predictable ways, the experience tends to feel more intuitive and inviting. Vetted content standards for accessibility, inclusivity, legal clearance, and translation-friendliness support consistency across a product ecosystem.
- Velocity. Including content in the design system helps teams move faster. Do you capitalize items in a dropdown? Do you use contractions? Once made, these decisions apply everywhere, and no one has to waste time debating or testing them. Done well, content patterns speed up design, development, research, localization, legal vetting, and checks for accessibility and inclusion.
What a content system might include
Here are a few of the fundamentals for this part of the design system. Each of these help put content to work in support of the design system’s goals, building a product experience that is cohesive, on-brand, and easy to use — and building it more efficiently.
- Brand voice and tone guidelines. Define how copy should sound. What are the elements of brand voice that stay the same across marketing channels and throughout the product experience? What are the dimensions of tone that modulate to support the ups and downs of the user’s journey?
- Names of products, features, and services. The definitive vocabulary list, documenting how everything in your product ecosystem is referenced. Which terms are treated as branded proper nouns? Is it “home page” or “homepage”? “Settings” or “Preferences”?
- Content patterns. A repository of important terms, phrases, calls-to-action, and more that are ready to be used over and over. These phrases should be tested, approved, and on-brand. If you can, bring in localization experts as you build this list; using consistent text strings that have established translations can make it easier to adapt features for global audiences later on.
- Component-level content guidelines. Many of the components in the design system have unique content considerations. If you’re defining what a button looks like, it’s a good idea to define what that button can say. Is there a recommended character count for image alt text? Do different types of modals — pop-ups and toasts and alerts — convey different types of messages? Content people bring a sensitivity for language issues like these. As we document components, we can also consider their content implications.
- Editorial style and copy conventions. Rules about punctuation, capitalization, pronouns. Do you put spaces around your em dashes? Do you call your users “you”? Any debates over Oxford commas end here.
- Standards for clear writing and effective UX copy. If you’ve defined company-wide recommended practices that aren’t hard rules, this is the place to document them.
A few organizations have led the way on developing content systems. There’s lots of inspiration to be found in content-savvy design systems like Shopify’s Polaris and robust digital style guides like those from 18F and Mailchimp. (See more examples in this list of content style guides from UX Writing Hub.)
Telling the story of the system
Now let’s look at the content about the design system. The rationale. The case studies. The training materials. This is where your content folks serve as educators and advocates.
Crafting compelling landing page copy
Your design system site must be a useful tool with clear documentation. But there’s also a bit of selling to do. When a designer or developer first lands on the site, they should find copy that clearly shows the benefits of the system. This will get new users started and help returning visitors find what they want. It will help anyone else who might stop by — a colleague in the marketing department, your CEO — understand what this thing is and why the company invests time and money in it.
Communicating the rationale and design philosophy
There’s a lot of brilliant, big-picture thinking behind your design system. The system might mean a new look and feel for what you build. It probably also means new workflows, collaborations, testing methods, and compliance standards. In short: lots of change. You’ve got to talk about that. Telling the story of the system, including the rationale for building it and the design principles that guide it, will help your partners use it thoughtfully and enthusiastically. And it will help everyone stay aligned with the big vision. If there’s someone in your organization who can help with communication, messaging, and storytelling, bring them in.
Sharing the design system
Content folks with expertise in messaging and communication can help with the hard work of getting people on board. Our design systems teams have turned to writers and content designers to develop training sessions, blog posts, release notes, case studies, and more.
Moving forward with content and design systems
It’s still early days for design systems and content design and strategy. Practitioners in both areas can learn from and support one another. Together they can improve stakeholder alignment, workflow planning, and system adoption — and magnify the impact of their respective work. When system-wide design and system-wide content support each other, a design system can be more effective, teams can work more efficiently, and most crucially, users can have a better experience.
Michael Haggerty-Villa coauthored this article.
