As UI/UX designers, we are tasked to find meaningful solutions to problems for our users. To achieve this goal, we use design systems as a structured framework to build off. But how much of our thinking is constrained by the dos and don’ts of a design system? Let us explore some ways to work around the challenges so we can cater for some creative exploration. 

Written by Sofiah Ridwan & Clement Aiden

A brief introduction to design systems 

Every leading brand or technology company has a design system up their sleeves, so much so that specialised roles have been created based on them. These roles include system designers, developers, accessibility, and content specialists.  

They are best described as an evolution of a brand guideline, analogous to an extensive design bible that includes: branding, typography, a design repository, and its associated documentation. Just like the Yahoo User Interface Library, CCS System, Pattern Portfolio, and Bootstrap, the design system serves the same purpose; it’s a tool/framework used to help improve customer experience, drive home the concept of reusability of components and create accessibility for designers.

Do we need a design system for everything? 

The answer is no. Look at Google and their expansive online presence. Each product has its own website, and each website extends deeper into the backend with various platforms where one can use their Gmail to access. These are notable examples of how a design system can help to save time and effort on UI and product exploration, as well as component consistency across platforms. It helps the developers implement components when they derive from the same framework.  

But if your only concern is online presence that leads to conversion, then a simple brand guideline and style sheet would suffice. An all-encompassing design system would only be severely underused. 

Design systems are a great tool 

It has been a decade and we cannot remember a single point in time where design systems did not make the design process quick and efficient, especially for companies with a huge array of products, platforms, and brands. So, what is it that we like about design systems?

1. To align everyone on the same page - Not every project has to have a design system, but if you have a large company with many products that requires some sort of common ground, it’s useful. 

2. For managing consistency at scale - Giving a large group of designers unrestricted creative freedom tends to lead to hundreds of interpretations of the same brand - a design nightmare. 

3. To increase efficiency - Design systems reduce the time required for grunt work and pixel pushing. Preparation time is instead focused on setting up designs, templates, and components.

4. So your team can plug and play - A library of components allows both designers and developers to cherry-pick from already existing designs/code without too much thought. 

5. For documentation - Everything is documented and accounted for from text styles to interaction behaviours; designers and developers would be able to quickly understand and replicate a component's intended use. 

Challenges when working with design systems 

Design systems are too rigid and not flexible enough to accommodate innovative solutions. 

Take Shopify for example. The Shopify team built an internal dashboard to measure the usage of their design system: Polaris. Although Christos Kastritis recommends UI components to follow 80% of an existing design system, Shopify found that only 49% of Polaris had been utilised. 

This is because even something as visually simple as a page that has 2 sections of a different number of columns requires a custom component to be built. For a well-established player like Shopify to be well under 80% utilisation goes to show how challenging it is to create design systems that are completely future-proof.   

When working with a design system, design tends to become less about artistry and more about policy design and governance. 

The bigger the design system becomes, the more it takes to govern and manage it. This is because it takes a lot of effort to make changes to the system, especially when it is already backed by code. The organisational complexity of an enterprise can also make it a gruelling process for a designer to get the approval for changes they have suggested. With all the red tape and complexity, the designer may resort to just using existing components to solution without challenging the status quo. 

We also recognise that it would be challenging for system guardians to manage changes as they come if there is no solid change management process in place. Hence, they would rather stick to the books to not risk breaking the system.

Design systems devalue design and undermine the skills of designers. 

Craft should not take the backseat in designing a solution and teams should not expect a design system to do the job of a designer. According to Pascal Berry, the goal of a design system is to atomise and codify a designer’s process in a way that makes it understandable and actionable by anyone regardless of their skill level. Think of it as an Ikea manual, where anyone can follow the instructions and use the components to create design solutions. 

But as Christian Beck notes, it shouldn't only be about efficiency. Design systems should also focus on giving designers more ability and power to experiment. It is through the process of pushing pixels that we as designers get to understand the problem from a unique perspective. Sometimes, better solutions are discovered from the process of experimentation and exploration. Take Ikea hacks for example, where unique pieces are created from basic parts. 

How can designers leverage design systems to spark, rather than to limit creativity? 

Create guiding principles that influence the design system narrative, drawn from perspectives across the entire organisation. 

Come together as a team to establish your own set of design principles. Use these principles as a guide to work towards your creative north star for the design system. According to Jamie Myrold, Adobe has created a set of principles that would inform every decision about how Spectrum, the Adobe design system, should evolve. 

These principles bring into focus an experience-centric approach to design that can be lost when there are business demands to be met. 

Open the design system for feedback, input, and exploration within a playground.

Once the principles have been established, encourage teams to question whether the components are working or not. Kick-start a collaborative culture – invite every designer, developer, or copywriter to challenge the status quo. This could potentially lead to better components and a sense of shared ownership of the system. 

Wart Burggraaf, the founder of govern.design, has created a step-by-step approach when taking on a change suggestion. The goal was to create a straightforward workflow that encourages teams or individuals to initiate change. To this end, Burggraaf suggests a weekly open forum for anyone to illustrate a recommendation (using the figma playground file) to the broader design system team. Anyone can join in the discussion, regardless of their discipline. Once the idea has been refined, together with a developer’s input, it becomes the new status quo. 

The collaborative process between disciplines in this workflow helps create mutual understanding and trust within the teams. Organisations can take this as an example, but ultimately should create their own workflow that reflects the core principles of their design system. For Burggraaf, his example mirrors their design system values: collaboration, clarity, and trust. 

It’s ok to "bend" the rules if you are governing it with intent and coherence. 

As designers, we want to explore diverse ways to arrive at a solution. If the problem calls for an extremely specific solution, we cannot let a design system hold us back from reaching it. That said, it is also important for designers to understand the boundaries of the system first, before proposing solutions that may go well beyond them. Ultimately, the proposed design should be coherent with the broader design system.  

Ideally, an inclusive design system would have taken into consideration some leeway for contextual deviations and greater experimentation, leaving the definition of where and how that coherence is achieved to the designer’s judgment.  

Developing a coherent system requires some level of flexibility to iterate as often and quickly as needed. For instance, instead of trying to get everyone to use the ‘right’ button, focus on facilitating that everyone contributes to the system by enhancing or creating new buttons as needed. 

Nike, for example, creates unique landings and experimental elements that play with the brand assets. That is why you will find some variations of layouts across their different websites. If designers did not have some freedom to experiment, the brand would be constrained to the same, monotonous design across all their digital touchpoints. 

Designing with coherence requires designers to have the freedom to create something in a controlled environment, without sticking to the same templates and components for every single touchpoint. 

We can see this in action on Nike React, where the layout and navigation are unique compared to their e-commerce and brand site. Yet, all three look visually coherent with the brand, using the same base styles of buttons and icons. 

Changing our perspective on design systems

While design systems benefit bigger projects immensely with its consistency and structure, it's as effective as how much your team follows it. But that doesn't mean design systems should limit inspiration and constrain you. Ensure a collaborative culture and change processes that allow flexibility in breaking some rules. 

Let us change the approach — instead of designing with the design system, we should design for the design system. For example, if you need a component that doesn't exist, but have one with a similar function; take that, redesign it, and give it a new name and purpose. We should not force the same solutions and components into problems that don't fit their intended purpose.

As UI/UX designers, we should not let the constraints of a design system hinder us from creating innovative solutions. With the proper processes in place, the design system should enable us to experiment and push pixels according to where our creativity takes us. Let's value the unique creative skillsets each designer brings to the table, and remember: we can't expect the design system to do our job.