Deliveroo Design
Published in

Deliveroo Design

Me explaining to my colleagues what I mean by a “Content design system”

Content, design systems need you!

Cover page in Figma: got to start somewhere…

First things first, what is a content design system (CDS)?

Our tools design system in Figma
A sneak-peek at our component library

How is a CDS different to a design system?

  • Use this checkbox when you need a subtitle
  • Use this checkbox when you need a link
  • Use this file input if you can upload multiple files at once
  • Use this save modal when the user tries to leave an unfinished form
  • Use this error message when an input is incomplete
  • Use this error message when the input is too long

An example from our CDS

✅ Usage and example

  • The noun label is unambiguous and static to avoid confusion whether the thing is on vs moving the toggle to turn it on
  • Describing the state helps the user understand what’s currently happening

❌ What not to do

  • The verb-led label makes it difficult to understand what you’re turning on/off
  • The subcopy tries to influence behaviour and doesn’t describe what’s happening
  • The label changes based on state

So what’s the end goal?

Some example backend errors from our CDS

What’s our strategy for the CDS?

Establish use cases, purpose and acceptance criteria

  • accessible
    This is a given
  • repeatable
    Is there more than one use-case for this context?
  • optimal
    We don’t add anything that we wouldn’t want to become a standard pattern — no workarounds
  • possible to localise
    Avoid anything we know that makes life difficult for translators

Validate early and often

Collate, debate, integrate

  1. Add as many modals as possible
  2. Go through as a team to decide on what we would/wouldn’t change
  3. Achieve consensus

To wrap up

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store