How to avoid 5 of the most common design system mistakes

Ever wish you could get a do-over — or at least learn about the most common mistakes before trying your hand at something new?

When it comes to charting new territory — which is usually the case in establishing a design system — you’ll often hear that you’ve just gotta start somewhere. This was the common sentiment we heard from design leaders at Microsoft, Pinterest, Alaska Airlines, Prodigy Education, Clearleft, and Barclays Corporate Bank when we asked, “What do you wish you knew about design systems before you started?” Thankfully, they laid their honesty on the table and share nuggets of wisdom ranging from aligning on goals upfront to the importance of working side by side with developers.

Mistake 1: Not clearly defining the value of a design system

Andy Budd

Co-founder of Clearleft

Clearleft created its first design system for WWF International way back in 2008. We did it not because the client asked for a design system, but because it was the only logical way to address the brief — to help 40+ international offices create their own localized websites while maintaining brand consistency. 

Back then, the only other organization that had done something like this was the BBC with its GEL system, so it very much felt like uncharted territory. Rather than this being a problem, it actually provided a huge amount of freedom. We were literally inventing the process as we went along, so there were no wrong answers. 

We were literally inventing the process as we went along, so there were no wrong answers.

Jump forward a dozen years, and design systems have become de rigueur. Every design team of a certain size either has one or is making the case for having one. This is the challenge most people face with their first design system. How do you effectively communicate the value that a design system will bring, when the resources involved could be spent shipping the next thing on the product backlog? In reality, businesses find it hard to understand why they would need a design system in the first place, so a clear articulation of the value it will bring (such as gains in efficiency and consistency) is the most important aspect.

Once you’ve gotten the green light, the challenge moves to one of implementation and adoption. Design systems haven’t been around long enough for teams to have built up institutional knowledge. Most teams starting out in this journey will be doing it for the first time, and will struggle with the Rumsfeldism of not knowing what they don’t know.

There are a ton of common pitfalls we see repeat themselves time and time again, so working alongside an expert can help you avoid a whole world of unnecessary pain, and ensure your design systems gets adopted and starts delivering the value you promised it would.

Mistake 2: Lack of purpose

Lindsie Canton

Design Operations Lead at Prodigy Education & Chief Design Officer at Bridge School

Get aligned on team purpose first. Work together to create your design system product experience vision, experience principles, and human values to guide you every step of the way.

Spending time aligning upfront helps especially if you're starting your design system as a side project like we did.

It sounds obvious, but it makes a big impact in two key ways: focusing your team on the end goal, and helping you get buy-in from stakeholders. Spending that time aligning upfront helps especially if you're starting your design system as a side project like we did. Having a shared purpose early on is key to ensure your team is using time effectively. And, of course, the purpose and vision you create helps ensure stakeholders understand both the value of the team and the design system as a product.

Mistake 3: Taking a free-for-all approach

P.J. Onori

Design Manager, Pinterest

Complexity is the rope you’ll hang yourself on. It's so easy to bias towards adding components, colors, and options to a system. It feels like you're adding value by doing so. But the minute you add something to the system, you introduce a fleck of complexity to it. Each new component, attribute, and variation needs to have an understood relationship with other components in the system. That complexity creates downstream maintenance, bugs, regressions, confusion, misinterpretation, and general headaches. This downstream effect, in my experience, takes off exponentially and its impact is often noticed far after those initial decisions are made.

It’s always easier to add in the future than to remove.

It's difficult to maintain a restrictive approach. "No" isn't fun to say or hear. However, in my experience, bias towards restraint in systems thinking leads to the best long-term outcomes for all parties. I recommend putting considerable thought into what you add to your system, especially in its infancy. It’s always easier to add in the future than to remove.

Mistake 4: Ignoring how elements and components interact

Corey O'Brien

Senior Interaction Designer, Alaska Airlines

Design systems are complex creatures. It’s impossible to look into a crystal ball to see what your design system will look like two years from now. It’s always changing, growing, and becoming smarter as your team continues to build it.

Beginning a new design system takes a lot of care and constant feedback. Something I wish I had known when first starting out is the mindset of systemization of foundations such as color, typography, or spacing.

Having a systemized mindset is understanding the ways that your colors, typography, spacing, or components will interact with each other within the design system. For example, how will the background of a page affect the accessibility of typography or iconography? How can we ensure that the spacing between components is consistent to create uniformity throughout?

It’s important to understand how a piece within your design system communicates with the other pieces.

Just like we connect and communicate with people, it’s important to understand how a piece within your design system communicates with the other pieces. Systemizing your foundations makes it easier to build guidance and do’s and don’ts for designers and developers later on.

Mistake 5: Avoiding collaboration with developers and engineers

Joe Woodward

Senior Product Designer, Microsoft

Looking back, I wish I’d known the importance of teaching colleagues how to use a design system. It’s essential that designers and engineers not only understand how a system works, but also how to use it.

At Microsoft we're creating a system that tells a consistent story across a multitude of products and on different platforms, which poses a significant challenge. We try to keep the design system as user-friendly as possible. If we all understand the pieces of how our product is built, it enables us to use the existing components to imagine new scenarios, or creative ways to adapt them.

Matteo Gratton

VP Experience Designer, Barclays Corporate Bank

The first time I started building a design system, I didn’t know what a design system was. This was in 2016, for another company. I found it massively important to put in place something that could help my design team as well as the developers’ team and our internal stakeholders to organize, share, and reuse what we were creating.

The product required creating a new graphics engine from scratch. We needed a new way to create interfaces as well: In order to interact with the graphical user interface, we had to create and maintain a cohesive system both for we the designers and for the developers. Eventually, we developed a system able to create entire views by writing some XML. The goals and result of it were that we designers were empowered to prototype, review, and create the actual interface.

It’s massively important to organize a design system not only as creatives but as engineers.

During this massive project, which took four years to develop, my knowledge of design systems, adaptability, maintainability, DevOps, and so-on developed a lot. I wish I knew right at the beginning of the project the amount of effort we had to put into such a creation: I never, ever would have created something so big with so few resources.

Finally, I believe it’s massively important to think and organize a design system not only as creatives but as engineers. A design team responsible for a design system is the most closed team to an engineering team that the creative world has. I believe that if I knew in advance how important it would be to work side by side with the developers — not only with other designers — the final result would have been smoother and the time spent to create the entire system would have been shorter.

‍