Design

Making design systems work for you

Experience Design Director

Making design systems work for you

Foreword

Working with multi-national businesses on long term digital engagements, we’ve experienced first-hand the births, continual evolution and challenges of design systems.

Design systems have been pretty hyped up in recent years in the same way the term ‘design thinking’ was a few years back. And there is a valid reason behind that hype, as they can bring several commercial and productivity benefits to a business. 

They can however also have the opposite effect — if they are not carefully planned, managed and distributed. So, if you are looking to implement a design system at scale, this article will offer you some of our key observations and ideas, that will hopefully help make your system work for you and not the other way around. 

Although we will be covering several distinct subject areas, there is a common theme that runs through all of them: The importance of effective communication and collaboration — which play a critical role in how design systems are received, adopted and eventually owned by their intended audience.

Find the ‘one’

Things get complicated from the start because there isn’t a single definition of a design system. And the reason for that is because the term ‘design’ can paradoxically be both loaded and, at the same time, very narrow: 

On one hand, it’s loaded because ‘design’ can mean very different things to different people. There is visual design, interaction design, experience design, service design, business design just to name a few.

On the other hand, it’s very narrow because most people define design only by a single – or very narrow – set of the different interpretations above.

One could argue we are dealing with semantics here, but in this case semantics matter as they have a direct impact on scope, model and structure of the system.

So what’s right and what’s wrong? Well, as it’s a paradox, all definitions can be right and wrong at the same time…

Sometimes, the right design system can just be a visual toolkit for designers. Other times, what’s needed is a comprehensive set of rules, workflows and processes that can guide multiple teams in a business through the different processes of a product’s lifecycle.

For us, the right definition has to be adapted on a client-by-client basis. To make the system work for them, we need to tailor it to their needs, objectives and structure of the business.

And we always start by asking our clients a few simple questions:

  • “Why do you think you need a design system?”
  • “Who is going to be using it?”
  • “What do you think can get in the way?”

Design systems

Streamline your ways of working

Keep workflows simple

At ELSE we tend to treat design systems more like a product or a programme, as opposed to a project or deliverable. 

That’s because design systems are not just made out of components, tokens and rules, they also involve people, teams and workflows. An effective design system should allow you to streamline these workflows and create efficiencies within and between teams.

At a very high level, there are three key areas that – if optimised – have the potential to speed up work and delivery:

Choose tools that enable collaboration

Today, there is no shortage of design tools to choose from, but some do certain things better than others. Depending on the demands of the programme, some tools might be better suited than others.

For example on our most recent programme, we needed a solution that would allow us to piece together a system, run collaborative sessions between multiple remote teams, document standards and present work to different stakeholders. The obvious choice for us was Figma as it allowed us to do all that. 

Speaking as a designer, Figma and the new breed of design tools have transformed how we think of, plan and run design system programs. Concepts (like variables and tokens) that have previously been only available to developers, are now accessible to us and allow us to iterate more effectively.

But in our opinion, the game-changing feature has been multiplayer functionality, which allows multiple teams to view and work on the same file, remotely and live. 

Beyond the obvious production related gains that come with that, there are also some intangible benefits that are invaluable for design system programmes. Working out in the open creates an inclusive and transparent process, which is essential when it comes to building trust between teams.

We know that change can sometimes be daunting, but if you are still using legacy tools in your organisation, it’s definitely worth considering making the jump to the new kids on the block.

FIGMA allows multiple users to work and collaborate in one file simultaneously which is ideal for remote teams (illustration taken from figma.com)

Keep processes lean

We are big advocates of well thought-through processes, but we also appreciate the value of keeping things lean and not letting unnecessary processes get in the way.

Obviously, you have to have the basic processes nailed — such as prioritising, planning, running and delivering sprints. But beyond that, we recommend adding new processes only when necessary.

Introducing certain processes later and only when needed, not only allows teams to move faster in the initial stages, but it also gives everyone the time to understand overall group dynamics and design the processes around the organisation.

For example, when we first start working on a design system with one of our clients, design delivery was handled by a small core team. So, it was easy to manage and work in a more agile and lean fashion. As the design system model opened up to enable contributions from other business units, more processes needed to be put in place, documented and broadcasted.

By the time we needed to formalise how contributions were made by other teams, we had already established a good working relationship between business units, knew the challenges they were facing and how to work around them.

 

Processes for complex scenarios should be introduced in the programme only when needed

Make ceremonies purposeful

As with processes, too many meetings can hinder productivity and cadence, too few and you risk having an ill-informed design process. It is however more common to fall in the trap of having too many meetings and ceremonies than the other way round. 

When we started our most recent design system program, our calendar was packed with workshops, stand ups, feasibility study sessions with tech partners, legal and compliance check-ins, brand consultation meetings, just to name a few… Overtime, as the programme matured, we found some ceremonies were more effective than others, some needed to occur more frequently, others less, some weren’t needed at all and new ones needed to be introduced.

But most importantly, limiting the volume is not enough. The quality of the time spent in these meetings is also important. By doing simple things such as having clarity of ownership, an outlined agenda and well-defined objectives, it can drastically reduce the time spent in unnecessary meetings and give you time back to focus on the work.

Design systems

Communicate rules with clarity

Beyond atomic design

When starting a design system programme it’s important to take the time to think and plan how the different system parts will work together to deliver a cohesive framework with consistent results.

Understanding how the system will be put together will give you insight on how to create a framework that is flexible, easier to update and scale.

In the most recent years, atomic design methodology has revolutionised the way we structure and organise the visible elements of design systems, by giving us a structural concept for creating artefacts in digital design. 

But systems are not just about design artefacts — they also contain the rules that govern it. And because rules are not immediately apparent, they are much harder to communicate, keep consistent and update when needed.

In the following section we are going to touch on a couple of key concepts and ideas that have helped us create systems in which the governing rules of design are structured in a way to make them easier to communicate and handle.

Build system modularity for more flexibility

Before going deeper in this topic, we should perhaps clarify what we mean by design system modularity and disambiguate the term from modular design.

As a high level definition, modular design is simply the partitioning of design artefacts into discrete sets of reusable components that can be arranged in different configurations.

By design system modularity, we mean that we can now create systems that also allow us to structure the rules as independent blocks — And that gives us a lot of flexibility because in this model, each part of the system can be encapsulated. 

Maybe a simpler way of putting this is that a design system is not really a system in itself. It is rather a set that contains smaller systems. This concept is unashamedly borrowed from the world of object-oriented programming which is by nature a coding model that is easy to troubleshoot, upgrade and scale.

Firstly, the reason why this way of thinking about design systems works great, is because it encourages designers to think about system rules at a higher level, which results in systems with more robust design logic and patterns.

Secondly, because the rules are compartmentalised into smaller systems, it simplifies the maintenance of the design system — making it easier to locate, understand, and adapt the governing rules of design as they are not buried down deep at a component level.

The breakpoint framework class of rules allows us to create a more robust global logic for certain spacing variables used in layouts and components

Finally, this methodology is very effective because it allows us to create system modalities – when needed –  by simply changing targeted blocks of rules. 

For instance, we could have two products within the same ecosystem that fulfill different purposes and address different audiences, yet they still need to share similar DNA as they are part of the same brand. 

Let’s say the first product is a desktop tool presenting high density information and the other is a website fulfilling general marketing purposes. Because they have very different objectives and requirements, one typographic system might not be able to be fit for purpose for both. By using system modes, we could potentially define two different typography systems optimised for each product and achieve a very nuanced result while still maintaining consistency of all the other governing rules.

Add structure to the invisible layer

There is a saying that says 99% of design is invisible. While we can’t really prove that, what we do know is, most of the time, inconsistencies arise because negative space between visible elements is poorly defined and open to interpretation. The lack of structure in these areas has always been a time sink for both designers and developers, and an area very prone to errors.

A well thought-through design system not only specifies how content behaves, but also how the space around it is structured, and the rules that govern it. By treating negative space as a design element in its own respect, it makes design more robust, less ambiguous and easier to iterate on.

In the example illustrated below, you can see how by providing structural blueprints for components it becomes much easier to understand how overall space works. Visualising invisible structures helps us achieve two things: It enables us to think of negative space as a design pattern and help us make more considered decisions when change needs to happen in design and code.

Structural blueprints can show hidden structures and make design rules more obvious

Design systems

Build stronger relationships

Build a culture of communication & collaboration

One of the biggest challenges, when setting up a design system for multiple product teams, is orchestrating design effort across business units. Because each team has their own objectives, priorities and pressures, it is very common for them to default to a heads-down mode to get things done. 

Although this behaviour might appear to deliver fast results at a unit level, at an enterprise level it creates an unwanted scenario where units are operating in isolation — which leads to experience inconsistencies, duplication of work and eventually a higher cost associated with having to consolidate design across the estate.

Build relationships by getting together

To break down silo barriers between teams, it’s important to create get-together moments — to build relationships, improve communication and instil a collective sense of ownership and purpose. 

Three of the most effective ways of achieving this are:

  • Using work-share sessions where teams can see what’s going on elsewhere in the business.
  • Designing co-working sessions where they get the chance to collaborate and look at solutions from different perspectives.
  • And creating safe spaces for dialogue, where teams can share ideas and challenges they are facing in the design process.

Make it easy to see all the great work that’s going on

In large organisations, it can be challenging to keep track of what’s going on. There are just too many streams of work and conversations happening at the same time.

In addition to the ‘get-together’ moments that are designed for active collaboration, we also promote the creation of passive forms of communication that allow people to keep up-to-date with current design activities in their own time.

A few ideas that have worked well in the past for our clients are:

  • Creating an organised shared digital space (a gallery) where teams have can drop their latest work — whether in a final or draft state.
  • Writing bite-sized sprint and phase summaries for reporting work updates.
  • And allowing private access to in-progress design system files so that other teams can monitor progress, contribute ideas, leave comments and ask questions.

Final thoughts….

When talking about design systems it can get very technical very quickly. And although it’s important to have a solid grasp of the technical aspects of design to run a programme successfully, it’s also important to remember they involve people and teams with complex group dynamics.

A design system can’t be just a set of rules you set up and expect everyone to adhere to overnight. It’s a conversation, and its success will be determined by how the whole experience will be perceived by its audience.

The choices we make in how we run design system programmes, need to demonstrate that we understand the nuanced needs of the organisation and the teams within it — the end users. Doing that successfully, builds confidence in the programme and eventually trust. 

If you win the people involved in it, then your programme stands a chance of surviving and even succeeding in the long run.