Writing for our design system

As a small (and mighty) UX writing team, we have to be particularly intentional about the projects we work on. Sometimes, that means prioritising quick tasks that ensure the company adheres to changes in legislation. Other times, it’s working on long-term projects, like a brand spanking new design system that will have a lot of eyes on it across the business. These are often the projects that pay a perpetuity.

Our design system houses all our design documentation and guidance in one place, which helps us improve consistency across our platforms. Content is indispensable to this mission.

We began our work on the new design system by compiling our ‘Foundations’ and ‘Components’ guidance.

We’ve taken a two-pronged approach to producing content for our design system:

1. Incorporate UX writing principles
2. Create a content system

Let’s explore these approaches in more detail.

Incorporate UX writing principles

Our previous design system housed documentation that’s either outdated or doesn’t align with the brand’s current direction. What that means is, along with writing guidance for new components and foundations, we had a bank of content that needed a bit of love.

I work alongside UX and UI designers in our Design System team to write and update guidance, ensuring that it follows UX writing best practices. Fundamentally, design systems should be accessible to everyone, not just designers and developers. We want our guidance to be:

• Informative
• Clear
• Direct
• Simple
• Friendly

No one wants to read hundreds of pages flooded with design jargon. Or, worse still, hundreds of pages flooded with design jargon written in the passive voice *shudders*.

My priority is writing great copy, not copy that’s great for a design system. Staying laser-focused on that ensures our content is useful to everyone, no matter their level of experience.

Creating meaningful images

Showing meaningful text in image assets provides another layer of guidance. Say bye-bye to lorem ipsum!

An opportunity that’s sometimes overlooked is the chance to bake UX copy into images.

Our design system contains hundreds of image assets used to visually represent guidance. These assets would typically house placeholder copy, like lorem ipsum. Product, UI and UX folk are no strangers to the proverbial battle against lorem ipsum in designs. The same consideration applies in our design system.

We use realistic copy wherever possible because it’s a great opportunity to show best practice. It’s also an in-action demonstration of how components and copy go hand-in-hand.

Create a content system

Writing documentation is a multidisciplinary effort. I’d love to have the capacity to write every letter of guidance, but unfortunately, I can’t. Instead, I’ve prioritised working with designers in the team to democratise the writing process, by sharing and creating tools in a content system.

Here are a few methods we’ve used:

Documentation templates

Creating copy templates is a tall task. It requires sifting through existing documentation and pulling out important (and repeatable) sections. Then, writing guidelines on what each section should include. But these templates save a lot of time in the long run by standardising content requirements. They also give designers more confidence when writing copy.

Copy strings

Strings are standardised chunks of copy that can be reused across pages and platforms. Within our templates, we included headings, CTAs and other reusable microcopy to speed up the writing process and improve consistency.

Strings, like our signpost about contributing components to the design system, help us keep copy consistent across our pages.

Tone of voice guidelines

John Lewis has a distinct tone of voice, which is the benchmark of all the content we produce. That said, documentation is very different from marketing copy. We’ve included a tone of voice statement that’s specific to our design system at the top of our templates. It outlines the objectives I touched on earlier to help frame the writing process.

Self-serve writing support

We have a detailed UX Writing Style Guide that we regularly update to answer common copywriting questions. We can’t address every query in our templates. So, we direct stakeholders to this self-serve guide which offers support with everything from how to write error messages, to when to use parenthetical plurals (hint: never).

Design systems are a constant work in progress

Our new design system is still in its infancy, but the reality is it will never truly be finished. Industry standards, user needs and our brand’s direction may change. But one thing that won’t change is our goal to create a consistent, human-centred experience for everyone using our design system.

I look forward to updating you all in a few months with our learnings and progress.