Guardrails or handcuffs? Building creative and sustainable design systems

The holy grail for design systems is akin to designing a game like chess or football: Create a system with simple, understandable and communicable rules that empower creative freedom and expression with limitless possibility.

Modern digital design systems take a different path: create modular, reusable components so we can quickly build on-brand products at scale.

The latter is always sold with the promise of the former.

In this talk, Mark will outline his approach to building design system products and teams that acknowledge the tensions that exist between the need to scale and the need to differentiate.

Guardrails or handcuffs? Building creative and sustainable design systems

Mark Boulton – Design Director, writer and speaker.

Keywords: zeitgeist, thingness, design systems, Olympics, branding, fractal grids, design elements, Manchester, consistency, deviation.

TL;DR: Mark introduces the concept of ‘thingness’ as a way to reconceptualize how we think of the goals of design systems relative to the culture and time they exist within. He proposes that design systems which create a thingness – a described system connecting products, content, and services – will help us move away from the prescriptive, constrictive sameness in our systems toward a more human approach. He extrapolates the concept from the zeitgeist of Manchester in the 1980s and walks us through examples where thingness was created from a range of design systems across a diverse set of industries. Through this process of explication, he demonstrates that the reality of our design systems lies outside pre-defined rigid patterns and that thingness, acknowledging deviations from these patterns is a way to create sustainable systems.

Mark is here to talk about design systems. There’s a lovely German word: Zeitgeist, which means the spirit of the time. Design systems have been happening in the zeitgeist for a while now in modern product design, but today Mark would like to talk about how we move away from the prescriptive, constrictive sameness in our design systems and towards a more creative, potentially human approach.

Let’s start by talking about Manchester! Mark grew up in Manchester. He hasn’t lived there for a long time, but it’s typically dreary and grey. However, it is the home of great music and is renowned for this.

Mark is a child of the eighties, and in 1989 there was a music and cultural scene dubbed Madchester. There was a lot of drug use that went on as part of this scene and one person was fairly central to the Madchester culture. He was a local reporter turned entrepreneur and was pervasive in what he produced and worked on. His name was Tony Wilson.

Tony Wilson founded Factory Records which even if you haven’t heard of it you would have seen and heard their output (ex: Happy Mondays, New Order). Factory Records hired local freelance designers to produce the cover art. The label was so prolific not just in terms of albums but in stickers on lamp posts, mail flyers, etc. As a design student in Manchester in the early 90s Mark was taught by some of these designers and their work was widely emulated. It became almost part of the DNA of the city. There was a hyperlocal sense of what it was to be in and of Manchester.

This was the zeitgeist of the time, but Mark likes to call it something else: Thingness. There was a thingness about Manchester that wasn’t a single thing, it was lots of little things that made up the feel of Manchester. Why is Mark telling us this? Because for him, the goal of a design system is to create a thingness. A design system is a connectedness between products, content, and services. It’s a described system.

Last year, Mark was giving a talk about design systems, and posed the question on Twitter: If I was a senior manager being asked to fund a five year design systems project, what would be the answer to these two questions:

  1. What are the benefits of a design system?
  2. What are the pitfalls, risks and difficulties?

As you might expect, he received many replies. Many positive replies around sustainability, use of scale and code, time saving, shared resources etc. Many benefits articulated. Equally, there were negative comments: Potential for being obsolete, ongoing commitment, considerable time and $ investment and no clear ROI. What came through most loudly on the positives was the idea of consistency. Design systems solve the consistency problem and they enable scale, reach, and shared vocabulary between people and teams, They enable conversations around standards. They surface organizational issues and can be a driving force for change within an organization.

But there are challenges. Ethan Marcotte recently gave a great talk for SydCSS which resonated strongly with Mark. He talked about a scenario he’s seen within design system teams a lot in the past decade.

Mark will walk through what Ethan said and see if it resonates. We have a design system at the core of our organization and around it are product teams. These are the consumers of the system who take the components and rules of the system and apply it for customers and users; the products and people served by this system.

Ex: Let’s assume a centrally produced component like an accordion. Every team takes and uses this accordion. This works, and this is what a lot of the positive benefits mentioned earlier were highlighting. However, as time goes by, one team (Team a) realizes they need the accordion to do something slightly different.

So they go to the design systems team (Team b) and say: We need you to do something different. The design systems team says: Fine, but we need to go through a process of collaboration in order to make another accordion, as it has to be available for everyone else. So can we find scope within the current design pattern to adjust or tweak the accordion we already have? The product team (Team a) are not satisfied with this solution as they need something more differentiated, so they fork it and create their own pattern because it’s a faster and easier solution. This choice is often also informed by the pressure of shipping and the pressure of the bottom line. When these are prevalent, the design system team’s needs take lower priority over getting the product out the door.

So another team (Team C) have yet another slightly different accordion need, and they do the same thing, fork it and make their own version. We are now in a position where we have a design system with three different accordions. As Ethan said: This is normal and natural. Don’t panic! This is why collaboration is important and why the process of collaboration around design systems is importantto smooth the way for exceptions and additions to those centrally provided patterns.

Consistency. With consistency being the issue and the driving motivation behind design systems, you have two product teams on either side while the design system sits in the middle trying to strike a balance between the two team’s needs, with a compromised, best fit solution. But the proliferation of forked components will continue.

So how can we provide this consistency whilst the process of forking is happening? By controlling the usage of the system? Policing it? Coming down on those who deviate? OR: Document what people are doing with it, and paving the cowpaths that way?

Jeremy Keith talks about this: as a system that is prescriptive. One that is defined, centralized, and controlled, where patterns and rules and uses like language are tightly defined and controlled centrally. Another type is a descriptive design system: One that is emergent, created, and built over time – ‘paving those cowpaths’ as components are forked and the design systems team build on top of them.

There is an alternative: An enabling system. One that is looser, empowers teams, and allows for creativity (which is a natural human process). An enabling system creates a thingness; a sense of connectedness between elements in a design system.

The good news is that this has been done before. Mark will go through two examples both drawn from the Olympics. Why use examples outside the digital field? Because we have a duty as designers to look beyond our own fields and draw inspiration and learnings from other design disciplines. The Olympics are almost on parallel in terms of scale of application: consumer focused, B2B focused, and cover everything from print and identity design to architecture to signage to fashion to iconography and typography– the whole gamut.

Ex 1) 2012 London Olympics. The design system of the Olympics was incredibly divisive. In the UK they call this ‘a Marmite system’, you either loved it or hated it. But, the system was far-reaching and ambitious, and derived centrally from the logo and spread out across all material. The logo was designed by Wolff Olins, and the overall branding was by FutureBrand.

Central to this system was the fractal grid. It was the starting point for almost all things within the system. It was derived from the logo, and the grid became a tool to make design decisions with. It was overlaid onto seating charts, informed the structure of wayfinding signage, entry tickets, and iconography. The fractal grid created a sense of thingness.

Ex 2) 1972 Munich Olympic Games. The design system created for the 1972 Olympics was hung on the central idea that this is a cheerful, joyful games. Otl Aicher was the designer and the German Olympic Committee wanted to portray Germany as a vibrant, democratic modern country. The system was a celebration of this.. The design team were called Department 11 and comprised a team of approximately eighty multidisciplinary members. Holistic design reigned, from postcards to icons to programmes and tickets to souvenirs like Waldi the dog mascot, which you can still buy on ebay.

The system for the London Games went all the way down to the architecture and landscaping. The Munich system included volunteer outfits and souvenir design. Aicher conceived his design system as Strictly designed grammar allowing for free, playful expression. Mark loves that there are strictly designed rules, but enough freedom within those rules to allow for that deviation and human expression whilst keeping a connectedness between all produced elements. Mark extracts this as having Simple, easily communicable rules allowing for human expression. How do we allow for that human expression within our digital design systems today?

Articulate the design space In type design, typefaces are designed within a design space. Ex: Boldness, slant, and width axes can be extracted into a cube-like form which is a useful model within which design decisions can happen. This is how type designers work: they conceptualize and produce their typefaces through instances and subsequent interpolations within this space.

For the 2012 Games, they did this within the design space of the fractal grid. This helps with one critical question that comes up when you want to deviate from a system that is prescriptive. What does this look like? Anything outside the system not operating in a design space is a challenge because those decisions are subjective. Designers, stakeholders and clients have to do the justification dance instead of relying on the system.

A few years ago, Mark did some work with CERN.They wanted a new website, so Mark tried to articulate this design space: What does it mean to the different audiences of CERN how they and their content is perceived and understood? Many compare CERN to NASA; NASA explores outer space, CERN explores inner space. NASA have images from space. CERN have visualizations of the collisions that happen within the Large Hadron Collider. So a critical moment in the articulation of what their design system might look like was asking: What is wondrous about the work that CERN do?

They began by looking at the CERN website audience, who would all have different levels of comprehension about the material they were viewing. The general public may have a low understanding of particle physics, whereas scientists would have a high comprehension. By overlaying an axis of wonder over the notion of comprehension you can capture the needs and wants of both segments. Mark’s team plotted various points of the website to correspond with the scale from low to high re: comprehension and wonder as metrics reflecting user emotion. Ex: they used large, high res images on the homepage to appeal high on the ‘wonder’ scale. The inverse to this was ‘the CERN directory’, one of the first webpages that was made for CERN which was purely functional and comprised mostly links to various department and experiment pages.

Prior to CERN, Mark worked at the European Molecular Biology Lab. He tried a similar approach in this project. They tried a range of models and ways of articulating the design space but none would stick. The digital teams and some broader teams that would use the design system understood what the concept was, but too many key stakeholders did not. In the end, it came down to the idea of a volume knob. ( Spinal tap ref! The numbers all go to eleven.)The idea was that they could tune up or down several axes – specifically colour, imagery, and layering. They could go through a product/website/service application and score it on a scale of 1-5. This gave a ranking system to determine the feeling of system components which could be used to inform the corresponding design approach.

Ex: Homepage was visually splashy with collages and images, while page communicating data from the annual report is more text heavy but still includes infographics for easy digestion. These were designed to cater to specific audiences. This was important for research groups within EMBL who had their own websites. For them to adopt them Mark’s team had to provide various sliders and options in order to allow them creativity and express their work and identity. Some research groups were more active in the process than others.

The broader concept here is around: articulating the design space and providing guardrails or edges of where you can deviate to. You can provide that through examples, which many branding systems do. Ex: Olympics producing sets of rules around strict grammar; type, colour, iconography, devices [e.g. fractal grid] which they provide a number of application examples. This creates a toolkit that other professions can interpret and express natively via their own preferred media (for ex: This can be done digitally.) The other method is bake the variants into components. Ex: Accordion with four, five, eight variations. Many design systems currently use this method to accommodate the volume range. Or you can change variables at the component level through the use of design tokens; being able to change background colours, typography, icons etc.

Final thoughts. Mark loves Bruce Lee, who in his prime broke his back. In hospital he began thinking about his own unique style of martial arts. He had been trained in a particular system but it did not work with the realities of combat. He devised his own system based on flexibility and adaptability. Quote from Bruce Lee: My followers in Jeet Kune Do know this: All fixed set patterns are incapable of adaptability or pliability. The truth lies outside of fixed patterns. The thingness, acknowledging deviations from a pre-defined system is a way to create sustainable systems. The reality of our design systems lies outside pre-defined rigid patterns.

Thankyou very much!