Senior developer Chris Kelly explains how software design systems can standardise an organisation’s assets, process and documentation.

What is a design system?

​​Within the software development world, a design system is ‘a comprehensive set of standards, documentation, and reusable components, combined with a set of rules, that guide the development of digital products within an organisation. It serves as a single source of truth for designers and developers, ensuring consistency and efficiency across projects.’ (source: Wikipedia)

If you’ve ever used a ‘style sheet’ or ‘brand kit’ to standardise an organisation’s use of words, acronyms, fonts, logos etc, then you understand the concept of re-using specific items to reduce effort while communicating consistently.

A design system is a collection of resources, typically assets, processes, and documentation. Combined, they form a system that is functional, self-documenting, and can evolve with the business over time. 

Ultimately, a design system allows teams to keep their digital products aligned visually and functionally while saving time and money by not reinventing the wheel. It's really a win-win for a business and their users. Who doesn’t like saving money while making their customers happy?

Great design systems support current and future projects - maybe a planned mobile app, a new support portal, an upcoming payment checkout. When all these touch points look and function consistently, it will build brand and product trust in your users. 

But what’s the catch? 

There is an upfront investment and expertise required to create a flexible, scalable system. 

At Symbiote we have robust, replicable processes to help clients determine what should or shouldn’t be in their design system, to ensure consistency, maximise productivity and reduce the effort involved in future improvements.

Who’d benefit from design system advice or assistance?

Design systems are part of our Solution Architecture service.

While design systems can be beneficial for single projects, we recommend design systems when your users interact with your business across multiple digital channels, such as a website, a self-service dashboard, transactional email, etc. A design system will guarantee that a single cohesive look is presented to your users.

Another excellent use case is when your offering is handled by different teams. For example, in larger organisations it’s common for different departments to look after particular sections of the public-facing site – the marketing team may handle the campaign pages, while the product team will handle release, status and documentation pages. 

In these organisations, a design system shines. It gives all teams a set of guidelines and rules to follow and building blocks to use. The last thing you want is one rogue team using the Papyrus font on a cyan gradient button because it looked ‘modern’. 

A design system addresses issues like:

• unpredictable user experiences across products and platforms

• repetitive work that can be avoided (e.g. deciding which colour or icons to use)

• inconsistency in design across products and platforms

• design and development teams on different frequencies

Read about the way a design system benefitted the Transport Victoria Sitecore implementation.

The benefits of a design system

A design system has benefits for organisations, their customers and for developers who make use of the system.

The advantages of a design system include: 

Consistency

• Unified User Experience

• Brand Cohesion

Efficiency

• Reusable Components

• Faster Development

Collaboration

• Cross-Disciplinary Alignment/Single source of truth

• Shared Vocabulary

Scalability

• Adaptability

• Maintainability

Quality

• High Standards

• Accessibility

Innovation

• Foundation for Experimentation

• Rapid Prototyping

Documentation and Education

• Knowledge Sharing

• Best Practices

Cost-Effectiveness

• Resource Optimisation

• Long-Term Savings

The anatomy of a design system

A design system can be split into three primary pillars: assets, processes and documentation.

Assets are the more tangible parts of a design system, like design tokens or the component library. However, all three pillars are critical in making a design system functional, educational and sustainable. 

Pillar 1 – Assets

Design system assets are the flexible, yet interlocking, building blocks that make up larger projects. Each building block is often supported by processes (Pillar 2) and documentation (Pillar 3) to support the implementation of the asset. 

Assets are the outputs of the design system.

Examples of assets:

• Brandmarks and logos

• Design tokens like color and font scales

• Layout systems

• Figma components

• Component library

• Code infrastructure

Pillar 2 – Processes

Processes allow the team behind the design system to deliver new assets (Pillar 1) in a reliable way. They are generally for those working on the design system, rather than consumers of the design system. 

Examples of processes:

• Governance meetings and notes

• Contributing

• Testing tooling

• Handling deprecations processes

• Releasing and versioning processes

• Onboarding guides

• Communication channels

Pillar 3 – Documentation

The third pillar enables teams to use the design system and contribute to its development over time. 

Examples of documentation:

• “How to contribute” guides

• “Getting started” guides

• Documented common patterns, standards and rules

• Content guidelines (the “voice”)

• Documentation on how to request a change

The flexibility of design systems

Design systems are not limited to development-centric environments like a greenfield NextJS application. The beauty of tokens and components is their digital “building blocks” nature, which means a well-crafted design system can be used within larger platforms such as enterprise CMSes like Sitecore. 

For the Transport Victoria project, our team used designs in Figma to build accessible components in Storybook, React, NextJS  and Sitecore, so content creators on the client side can easily grab components to build beautiful pages and entirely new sites.

Our development team built several components for Transport Victoria that integrated directly with Sitecore, enabling content authors to produce more than written content, but also insert and configure more complex visual elements like Hero components, Well components, Breadcrumbs, Feature Images and CTAs. 

Considering implementing a design system of your own?

Design systems are a great way to bring consistency to your users while cutting down long term costs associated with developing the same components over and over.

If you need a starting point, we have a fully accessible, flexible open source design system that you can use in your own projects here on Github.

You can preview the design pages here.

If you’re considering a design system for your organisation, our friendly team is always happy to talk through your needs if you’d like to contact us. We can assist from exploration and planning through to implementation and rollout. We’re passionate about bringing design systems to life.