Skip to main content

What is a design system and why do we need one for planning?

19th July 2021

A design system is a toolkit of reusable components which together make up the overall interface that users will interact with – this short article explores the process of creating such a system and the benefits it will deliver.

A design system is a toolkit of reusable components - for example:

  • buttons
  • headers
  • form input
  • navigation, and more.

Basically, everything that together makes up the overall interface users will interact with - which can be deployed in different combinations to build products and services.

A design system explains how element interactions work. For example, what happens when you focus on a button, what error messages look and act like and how the page responsively reacts to varying window or device sizes.

Developing a design system for planning early in our transformation programme will enable us to create services and products more easily, with greater consistency and will allow us to have others such as private sector suppliers develop parts of the planning ecosystem that meet our design standards.

Example of components used in the Design System for Planning

Prior to the launch of the Digital Strategy for Planning we were designing concept prototypes without a strict component library which allowed us to get ideas out there quickly however this lacked the consistency and scalability required for effective service design.

Our aim is for new services to be a consistent, quality and familiar experience for people. This will ensure people feel confident they are engaging with a trustworthy, end-to-end system.

The Design System for Planning will be modular by nature and create an environment that allows our product teams to focus more on the problems they are trying to solve rather than worrying about the visual aspect of it.

Our teams responsible for developing the future digital planning system will be able to use our design system’s library of components to build the product they are working on and when they identify the need for a new element we will design one, test it and incorporate it into the wider design system allowing the product teams to use it.

Prioritisation of components creation will be driven by our focused delivery roadmap.

The design system is a living document

We are closely aligned to the Scottish Government’s Design System and because much of the heavy lifting has been done for us here it allows us to start with a strong foundation and to act quickly for future developments. This alignment is also great news as it will create further consistency and familiarity across government while also giving us flexibility to apply our own styles or branding.

Our design system will be an open, living document which, as the programme progresses, will be constantly added to and updated.

We are using a collaborative interface design tool called Figma to create, manage and share the Design System.

A screenshot of the interface of Figma, the design tool we are using.

You can check out our progress in creating the Design System for Planning.

The Design System for Planning will enable us and our partners to build the products and services set out in the Digital Strategy for Planning with consistency, efficiency and scalability.

Follow us on Twitter @DigiPlanningSG for updates on our activities as we progress with work on the Design System for Planning.