Why your design system should include content

The role of content experts in a business (content strategists, UX writers or content designers), is to ensure that all customer-facing content and copy feels like it’s from the same brand. This includes the tone of voice, but also the words and language used throughout the user journey.

Setting out a content design system is one way to achieve this.

A missed opportunity

A design system is an established way to collate replicable elements, patterns, tools and guidelines, to make sure anyone designing for a brand does so consistently. These are becoming common for visual design, but the missing and vital part is often content and copy and how it’s used within the elements, which really is a missed opportunity.

Instead of content design systems and visual design systems existing in isolation, the ideal is one design system that accommodates everything, marrying the content and design together in the way it will actually be used and experienced.

There are many good reasons to do this, not least because the two disciplines will never be used separately.

Combining them ensures that design components are based on realistic content, avoiding constraints later on.

When there’s a limited number of UX writers on a team (the content:design ratio is often at least 1:2), having copy guidance built into a design system also means UI designers can make educated content decisions and work more efficiently.

Design systems which have successfully incorporated content:

Polaris by Shopify is probably one of the most comprehensive guidelines I’ve seen. It includes everything from voice and tone, how to name things, and even how to create alt text. Within the visual component library there are also content guidelines on how to write the microcopy that sits within each component. This is no lightweight design system. In fact, it’s epic.

Bulb’s design system Solar is much more lightweight. It includes some good UX writing principles and some specific labelling guidance for CTAs. And it’s a good example of how including some basic content frameworks can empower designers to make better design decisions.

The NHS service manual incorporates a whole section for content, which includes accessibility guidelines, vocabulary, and general writing principles. It doesn’t quite go as far as including actual UI copy guidance on the design component pages, but it feels like this could be their next step – it is still in beta after all.

Google’s material design manual features a section dedicated to communication, and how to create UI copy for the components. It’s a really comprehensive guide to using content and copy in design, even if it does sit slightly aside from the component sections themselves. It’s also worth noting they have separate guidelines for conversational design.

So, where to begin?

The best way to start is by thinking about who already uses your design system, and how it’s used. If your company has a small team and works across just one or two products, then a lightweight version such as Bulb’s would probably be a good starting point.

If you have a bigger company and multiple product teams then serious planning might be required. It’s a lot of work to create a large, comprehensive resource, and even once it’s live it will need to evolve and grow alongside your design maturity. Some companies have design ops or content ops teams who are solely responsible for building and maintaining design systems.

To create your system, your UX writers or content strategists should start by documenting the current ‘best practice’ frameworks and the guidelines they work to (even if they’re currently ‘informal’ guidelines – because remember, a design system is about formalising these).

They’ll also need to document how the brand tone of voice adapts to UX writing. It’s often the case that ‘tone of voice guidelines’ are created by brand or marketing teams with marketing copy in mind, and not for elements such as button labels or error messages.

Integration is key

The next step is to see how these frameworks overlap with the design components, and decide where content guidelines can and should be added into your existing system.

If there is no existing system, then creating one will rely heavily on your content strategists and designers working in tandem. And instead of tackling everything at once, perhaps just work through one small section at a time.

Then you’ll need to stress-test your guidelines with non-writers. The idea of a design system is that it’s easy to use and adapts for almost every scenario. If a UI designer can easily use the content guidelines for the component they’re using and produce the expected output then you’re doing great.

And finally, you’ll need to plan how you share the system and ensure it’s used across teams. A successful design system is one that’s used to speed up the UI design process, and leave your design teams with more time to solve the bigger problems!