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

Google, Apple, Uber, Audi – the most successful and cohesive brands out there right now all understand the value of a well-organised design system. But it’s not just major players that can reap rewards from building a single source of design truth. The benefits of a design system are far reaching, and for brands big or small, the ROI can be both significant and immediate.

“A design system leverages technology to lighten the load on your resources,” explains Tom Lancaster, Head of UI and Content at VML Commerce. “It’s the most efficient way to consistently express a brand identity across various channels, and creates a leanness in rollout, thanks to less time spent on governance, plus automated coded elements that shave weeks off the design to build process.”

Essentially, adds Lancaster, “a design system helps to deliver design at scale more efficiently and across lots of different platforms, while reducing the risk of errors and inconsistencies that can impact the experience of your customers and damage brand perception.”

“If you've got that single source of truth, you avoid people recreating something that exists already; you can regulate accessibility elements like type legibility and colour contrast; it helps you to manage your brand, and there’s that opportunity to evolve both design and language elements then easily cascade them throughout the entire customer experience.”

While analysing their own design system data, Figma found that a well-maintained design system increased team output by 34% – an equivalent of resourcing more than three extra designers per week for some organisations.

With benefits including increased speed and quality of design work output, improved management of brand assets, faster time to market for new launches, plus experience-enhancing accessibility standards baked-in as standard, the question for business leaders who are serious about growth becomes this; can you really afford not to invest in a design system?

Before we share our expert tips on how to build an effective design system for your brand, let’s break down exactly what a design system is.

What is 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.”

11 things to consider when building your design system

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.

How VML Commerce can help

Have questions about how a design system would help your business enable consistency, speed, efficiency and scale across multiple markets and channels? Get in touch with us and see if you qualify for a design system review.