What’s missing from your design system? Content guidance

A design system is typically a library of reusable design elements. These are pre-styled to reflect your visual identity and have been developed to be usable.

For example:

• A name input field wide enough for long surnames
• Drop-downs where users can select their option correctly
• Button large enough to be clicked on easily

A great reference is the GOV.UK design system:

• Its styles, components and patterns have been researched with a wide range of users with different characteristics, abilities and skills.
• Text, for example instructions or field labels, is concise and in clear language: demonstrating optimal content design.
• There’s advice on spacing and typography.
• It details the brand colour palette.
• Has reusable patterns like error messages and payment card details.

I’m sure you recognise how helpful pre-made, reusable elements can be when you are creating a new product user journey – and want to build a prototype with reliable parts that meet your branding!

Instead of reinventing the wheel, you can take an off-the-shelf, yet brand-bespoke, component, and have more time to focus on presenting unique features of your product journey. Additionally, using a design system increases consistency across your site. And consistency builds customer trust.

Of course, there is a little more to consider too when reusing design system parts, which we will look at later on in this article.

But before we go further, let’s look at how the typical design system could be expanded to help make creating products and assets for your start-up even more efficient.

To save designers from looking in multiple different places, a great design system could bring everything together, to include:

1. Design principles.
2. Content-specific principles.
3. Visual style guidance, including logo.
4. Content style guidance, including tone of voice.
5. Interactive patterns library.
6. Content patterns library.
7. External references for design and content usability and style.

By doing this, you make it easier for visual designers, interaction designers and developers to access and learn content guidance – and for content designers, UX writers and web editors to access and learn visual design advice.

And let’s admit it, at a start-up many of us may be covering multiple roles, with more strengths in one area than another. This can be true whatever age and size your company is.

So, have a holistic, all-encompassing design system. Otherwise you risk creating a sprawling network. And some users might not find or discover all of it. What’s more, having everything in one place means it can be created, presented and styled consistently.

Example: Shelter, a homelessness charity, is in the process of bringing all their digital advice into one system. For inspiration, have a look at their Digital Framework.

Although most of us can type, it is wrong to assume that all designers and developers can write useful content. Principles for high quality content would cover:

• optimising information presentation for users
• doing language research
• creating content that’s accessible for all

Example: 18F.gov content principles

How to create digital content

Usability-evidenced advice for writing readable content, and creating accessible content in other formats, for example:

• clear language
• short, simple sentences
• alt text for images, captions for video content
• avoiding jargon
• avoiding block capitals and italics (which are more difficult to read)

Example: Readability Guidelines wiki

A to Z brand style

Include as a section, or link to, an indexed, quick-reference content A to Z brand style guide. This would alphabetically list:

• geographically correct spelling and grammar choices
• if various usages may be correct, brand-specific choices for spelling and grammar (as an example, at Humbleteam we write it “startup”)

Example: NHS Digital A to Z of written style

Tone of voice

For any brand, there’s likely to be a range of tones for different circumstances. You might have a default tone which is upbeat and informative, or fun and helpful. Some brands, like Innocent (a healthy smoothies company) and Oatly (an oat milk brand), are purposefully a bit silly, almost absurdist, in tone.

But, when you are talking to someone about a problem they’re having with your product or service, you may need a more serious tone.

Including tone of voice, with examples of when to dial different tones of voice up or down, will make your design system more useful.

Example: Mailchimp voice and tone guidance

A content pattern is any piece of content that’s performed well in usability testing and can be reused elsewhere. Any large scale project needs reusable content items, for speed and consistency, and these can be stored in your design system.

Content patterns promote content formations that work well: clear, usable, accessible wording and presentation. Your content pattern library could include:

• small elements: like how to write date ranges
• presentation styles: like how to present quotes or style bulleted lists
• reusable text: like a few sentences giving your organisation’s view on an issue, for example climate change

If you have multiple content items of the same type, like product listings, content patterns can highlight the unique content – allowing easy comparison.

No content pattern

These content items do not follow a content pattern:

• 12 June 2022, 15:00
• 9th October ’22, 6pm
• 01 Feb 22, 11 o’clock
• 27/08/22, 10:00

With a content pattern

This is how that could look using a content pattern:

• 12 June 2022, 3pm
• 9 October 2022, 3pm
• 1 February 2022, 11pm
• 27 August 2022, 10pm

Example: GOV.UK design system content patterns

1. Work together. Design alongside content.

• Sit everyone together in the same area of the same building, or book out the largest meeting room you have and work on it there.
• If space is an issue, hold a series of the same meeting or workshop, with the same proportion of different types of designer, then share outcomes.
• Invite marketing to give input at joint workshops and to attend and give feedback at regular progress presentations.
• Give marketing teams design training and vice versa.

2. And involve all the other teams too!

• Hold a cross-organisational quiz on the style guide.
• Make sure everyone understands the logic behind the design recommendations, then they’re more likely to put them into practice.

Design systems should perhaps come with a warning. Something like:

“Caution: you still need to do usability testing! You need user researchers, service and content designers, and developers, to solve unique user problems.”

Good design is about communicating and collecting information clearly. Every piece of information is different. Every design situation is different.

Having a design system isn’t a replacement for testing your prototype with users and iterating it, with input from content designers. What works in one context might not work in another. This is heavily emphasised by Tim Paul, Head of Interaction Design for GOV.UK – whose design system we looked at right at the start of this article.

• Support a design system with everything in one place.
• Design, content and marketing working together.
• Test your designs.

• Readability Guidelines wiki
• ‘Creating a content style guide’, Robert Mills
• ‘Building a brilliant brand tone of voice’, Lauren Pope
• ‘Designing with content: how using content patterns can help’, Lizzie Bruce
• ‘Why your design system should include content’, Rachel McConnell
• ‘Good Services’, a book by Lou Downe

Also, subscribe to hear about legendary business pivots on our CTRL SHIFT podcast.