Skip to content
Web Design + Development

Scaling design for brands with design systems

As brands evolve and scale how they interact with consumers online, it can lead to inconsistencies and challenges in design and creative campaigns – in this post, I'll cover the basics of what a design system is, and why you probably need one.

Published on:

close up of colours in a design system

The problem of design evolution for brands

First, some context: as audiences become increasingly connected, their expectations of a good user experience are higher than ever, and increasing daily. Users interact online directly with brands more than ever before, on social media, web, apps and other mediums.

It’s no secret that millennials / digital natives are quickly becoming our core audience, and with this brands are quickly pushing the boundaries of how they interact with consumers online, adopting innovative and bold online marketing strategies designed to engage consumers directly.

For many established brands, this is new territory – and it’s not without its pitfalls.

Another problem is often growing teams, and the addition of external agencies each adding their own take on the brand, and new ways to solve problems and create new campaigns.

What does good look like?

In-house, when working across different channels for brands (for example marketing, social, design and development), it’s often a struggle to define what good looks like.

Is this on brand? Can we push it further? What about a floating contact form? Can we add some icons?

As companies grow, it’s common for teams to concentrate on different campaigns, with different priorities and outcomes. This can lead to a fragmented output, with each team or designer speaking their own language. This happens when teams solve problems individually and not systematically.

This problem is even worse when external agencies are involved, with designers adding their ideas and new ways of solving problems, leading to even more inconsistency and potentially expensive and lengthy signoff processes.

But what does good actually look like? How do we define it, and agree on it?

Enter the design system.

A visual framework for collaboration

A design system is a visual framework that allows teams to easily unite around a common language. It reduces complexity and builds bridges between teams working together to bring campaigns and digital products to life.

Understanding why we do things and not just what they look like is a critical part of creating a great user experience. Having standards and following them is how teams can gain that understanding.

A design system reduces the subjectivity and ambiguity that often causes friction and confusion within teams, and helps everyone work together towards a common goal, allowing them to focus on being creative.

Key benefits

  • Protect brand integrity and consistency
  • Save time and effort, launch quicker
  • Reduced friction between teams
  • Lower external agency costs
  • Lower development costs
  • Create faster
  • Improve usability and accessibility as standard

The source of truth for marketing teams

A design system’s site is the central source of truth for marketing teams. It provides a focal point and keeps teams (design, development, marketing, content, management) aligned and working together towards the same goals with less friction and confusion.

One great example of a design system is Shopify’s Polaris – a set of principles, design guides, content guidelines and more that helps all teams across Shopify to build consistent experiences, based on solid fundamentals that have been pre-agreed by all teams.

A screenshot of Shopify's Polaris design system

Although design systems are similar to brand guidelines because they set standards and guidance to designers, they go beyond visual design. A design system will also cover content, social media, the tone of voice, principles, values, and much more.

Don’t be afraid of design systems: the myths

You can still do new things

A common concern with design systems is that they’re too limiting. This is especially true for teams who are deeply embedded in specific campaigns or areas of the business, who believe they have special requirements or qualities and end up creating isolated solutions to what are actually repeatable problems.

The reality is that “niche” projects often lead to inconsistencies and unsustainable technical debt – in reality, new solutions created for specific campaigns can be fed back into the main design system, and made available to other areas of the marketing ecosystem.

You can still be creative

Another common concern is the loss of creativity; that design systems will stop designers from exploring new ideas and pushing the boundaries.

Although designers should always have a license to explore and challenge ideas, the reality is that “hero designs” often cause huge amounts of technical debt for development teams, slowing down overall innovation and progress. Adding new creative ideas to a design system will have a powerful impact on the business, in a scalable and easily repeatable way.

Getting started with design systems

Creating a design system is a complex process, and can take considerable effort. In many cases it’s not about “starting again”, but about making sense of what’s already there, and starting to roll out components and principles across all digital channels.

Design systems can be created by external teams. However, the fact that a design system is needed often means the team is already overloaded with unsustainable design and technical debt. In these situations, an external agency can bring a fresh approach to the problem, and help make sense of it all.

Here are some of the first steps to getting started:

  • Create an inventory of everything: screenshots, annotations, lists
  • Look for inconsistencies, and identify priorities
  • Look for patterns, and combine them into components
  • Organise everything into categories
  • Design new solutions to fit categories

Stay tuned for more thoughts from our team of design systems, and how we’re working with them in more detail.

Get content like this in your inbox, weekly.