Design systems: the secret to efficient, accessible digital design

Design systems are becoming more commonplace as organisations strive to create usable, accessible digital service interfaces more efficiently. Here, Emily Lawes, UX Designer at Civica, explains what a design system is, and the value it brings to digital service development.

Any organisation that develops digital services will find that many components are used over and over again on its web pages and software front-ends. Think of buttons, alerts, menu displays and navigation bars, for example.

So that designers and developers don't have to build all those elements from scratch every time, it makes sense to compile them into some sort of asset library. That way, they're available for reuse on other digital projects.

What's usually missing from these libraries, however, is written guidance on how to use and assemble all those elements. Without that guidance, there's a limit to how effectively and appropriately they can be combined. (Think big box of Lego bricks with no instructions for model building.)

Despite best efforts, the upshot can be inconsistent design across the organisation's digital services, as well as a poor user interface (UI). Both can have a negative impact on brand integrity and the overall user experience (UX).

What's different about a design system?

What sets a formalised design system apart is that the components are accompanied by a set of guiding standards that describe when, why and how to use them. Those standards should, ideally, also include guidance on more abstract aspects, such as brand values, teamworking values, and shared goals and beliefs.

Using the recommendations and best-practice guidelines provided, designers and developers can use the components to create beautiful, brand-compliant and accessible interfaces much more efficiently.

Ultimately, an organisation's design system becomes the single source of truth which:

• Brings together all the elements and guidance for designing and developing digital services
• Allows designers and developers to work quickly and confidently, boosting productivity through reusability
• Aligns your digital services to ensure a consistent, enjoyable UX across channels, platforms and devices

For the design system to remain the single source of truth, it needs to be treated as a living thing. So if a new element gets created as part of a new service, it needs to be added to the design system (and documented) so that it's available to future digital projects. Broader changes — to the organisation's brand colours or values, or to accessibility requirements, for instance — will also mean updates to the design system.

The benefits of using a design system

With a robust design system in place, an organisation will find that digital service design and development advances more swiftly. This change of pace is one of the key benefits we're experiencing at Civica since establishing a design system for our digital services.

Our teams can work more quickly than if they had to design and code everything from scratch. As a result, they have more scope to refine user journeys, and can move more quickly to prototype development and working system build. Just one example: by relying on our design system, we cut the redesign time for a 10-screen service by almost 75%.

As well as ensuring our digital services have a common look and feel and reflect our brand values, our design system helps us make services responsive across multiple devices. It also means we're working with components and guidelines that ensure our services comply with Web Content Accessibility Guidelines (WCAG 2.1 level AA).

Having experienced the benefits of using a design system ourselves, we've developed a 'white label' version of it for customers that can form part of a UX or design-as-a-service consultancy engagement, or can be used to accelerate customer-specific digital service development projects.

If you'd like to find out more about our UX and design consultancy, or about how a design system can speed digital service development, please get in touch.

Download