Can your business really afford not to have a design system?

At VML Commerce, here’s how we define it; a design system is a living and evolving document that helps you deliver design at scale. It’s where all your distinctive brand assets, styles and components are collated, ready to be used across lots of different platforms.

It approaches design as a brand language rather than simply as layouts, and comprises ready-styled components that can be implemented across a network of experiences, both internal and customer facing.

“The act of building a design system is fun,” explains Lancaster. “You're gathering and refining all your brand fundamentals in one place, generally in Figma for most of our clients, and once you’ve done all the legwork, every single component in that design system will be anchored to the correct brand colours, typography, image aspect ratios, spacing, button styling, the radii of corners etc. You can even start to bring in tone of voice elements, such as the wording used on buttons and error states, for a fully joined up experience.”

While the most common use of a design system is across websites, mobile sites and email suites, Lancaster notes the limits are boundless. “We often see it being used across apps, in-store digital displays, adverts and social ads too. Almost anything that a customer sees digitally - there's no reason you can't use the one design system to populate them all.”

We’ve set out the benefits and business case for a holistic design system, but how do you go about building one that’s going to be effective? To help you get started, design system experts Tom Lancaster and David Chan share some of the most important things to consider.

1. What is your design system for?

Before you start building your design system, think about what it’ll be used for. Will it mainly be for web and email, dashboards, or native apps and EPOS (Electronic Point of Sale)? Defining this at the start will help you determine what components you’ll need to include.

2. Audit your brand assets

Take a thorough inventory of what your brand already has in terms of brand guidelines, type styles, specific online colours, language style guides. These should inform the overall tonal direction used throughout the design system.

3. Where will you build it?

It’s important that the design system can be easily accessed business-wide, so consider which design tool you want to use, factoring in things like collaboration and inspection capabilities. At VML Commerce, we prefer to use Figma but may also use Sketch or XD.

4. Build your foundations

Start with the framework that the rest of your design elements will be built on. Build the foundations of your system first by deciding on layout grids and spacing methods, such as a 4px or 5px baseline grid.

5. Define your brand handwriting

Here comes the fun part; define your brand styles for things like colours, type, shadows, and the overall feel of the UI. E.g. rounded corners for a softer look.

6. Ensure accessibility

Design systems present the opportunity to regulate how accessibility standards are met across every customer-facing design element. Determine the level of visual accessibility you want to achieve, including the colour contrast, type legibility, touch target or tappable areas, plus hover and focus states which help screen reader users identify where they are on a page.

7. What level of documentation will you need?

It’s vital to consider the various users of the design system, and the level of documentation your organisation will need to ensure the system is easy to implement. For instance, will you need to document the behaviours of certain components?

8. Make it easy to evolve

As your brand grows or customer demands change, new components may need to be added. It’s important to think about how you’ll help designers understand the handwriting of the system by clearly communicating things like sizing, spacing, and stroke width when creating new components or symbols.

9. Consider industry patterns

Don’t forget to include common patterns your business category or industry may need. For example, if you’re in the hospitality sector think about booking patterns, if you’re a retailer then product cards and delivery options are vital.

10. Spend some time on your workflow

Consider how designers and developers will use the design system alongside full-page designs, and how design tokens might be utilised to streamline the process.

11. Remember that it’s a living system

Just like other areas of your operation, the design system will need to be well maintained and should evolve over time to effectively meet the needs of your teams. Be sure to involve designers and developers in this process, from discovery to updating and improving the system.