Our challenge

We need to be able to design and build content and services that are:

  • accessible, clear and easy to use
  • recognisable and trusted by our users
  • easy to adjust and grow with our charity

And we need to be able to do that quickly.

Our solution

Barnardo's design system screenshot

We built the design system: an open-source website to help us create products that work for our users – particularly vulnerable children and young people. It includes:

  • guidance on typography, how to create forms, and how to write content
  • examples in code for solutions to common problems such as creating standardised content features
  • live examples in code that can be copied straight into a product

Developing the design system

Barnardo's designers presenting the design system

The design system is the product of designers and web developers working together.

They created a common language that both teams could communicate with. This ensures clarity and speeds up development. It seems simple, but we’d never seen it done before, which was exciting.

We researched our users’ needs and made sure all the examples are easy to use for those with hearing and/or visual impairments. So all our products are inclusive from the beginning.

Then we created a set of example code templates, plus some ready-coded items, and stored them in a single place where all our teams can access them. When changes are made to ready-coded items, they are automatically updated in our products and services.

Using the design system

Screenshot of design system brand colours

All our developers and designers have access to the design system. When we all work from the same guidelines we ensure that:

  • our products are accessible and consistent
  • developing future products is cost and time efficient

Next steps

The design system is a living product. We’ll continue to iterate and improve it based on the feedback we get – particularly from children and young people – and share our progress.

Find out more

Learn more about how we built the design system.

If you're a designer or developer at Barnardo's and think the design system needs to cover common patterns that you're working on, get in touch.