Creating Stable Design Systems at Scale
This post is part of an ongoing series about design at scale. Read “Driving Quality and Consistency at Scale” by Ken Skistimas, “Doing Design at Scale” by Lucinda Burtt and “Modern Design Tools” by Daniel Eden.
When I’m designing — whether in my job on Facebook’s Ads Interfaces Design team or on my own projects — I frequently look to the world outside of design and technology for inspiration. Stepping outside of design and into, say, philosophy, architecture or biology forces me to learn something new in a way that’s both uncomfortable and unfamiliar. Often, this can help me make sense of the direct design challenges I’m facing, allowing me to view and navigate the situation in a different light. Tapping concepts from other industries as a source of design inspiration is nothing new. Known as biomimicry, the practice of borrowing systems from nature to solve human problems has influenced countless advancements in design — including my own work in scaling design systems at Facebook.
There are only a few ways something can be organized but an infinite number of ways it can be disorganized.
Lately, I’ve been considering what makes design systems successful and, equally as important, what causes them to fail. The concept I’ve been looking toward to explain why systems are often at risk of becoming disjointed is rooted not in design but in physics: entropy. This theory holds that everything in the universe tends toward disorder and chaos, because there are only a few ways something can be organized but an infinite number of ways it can be disorganized.
In short, it’s easier for things to fall apart than it is for them to fit together.
Though I’ve borrowed the concept from the world of physics, it’s easy to see how the theory can be applied to product design. Many product designers would agree that it’s easier to tear designs apart and start over than try to make them work together harmoniously. But let’s take a deeper look at why this is so — and how we can embrace entropy as a natural part of growth.
From equilibrium to disorder
From a technology standpoint, the more products and platforms you build, and the more teams you support, the more opportunity there is for fragmentation (read: entropy). There’s a point at which everything is in a state of equilibrium, but eventually, as products scale and as time goes on, things start to drift into disorder.
The reasons are myriad: Sometimes it’s turnover on the team that hampers knowledge transfer. Sometimes new team members join and bring a different perspective that’s a composite of their entire career, complete with their experiences, biases and mental models. New energy within a team is something we prize in design; it represents a fresh and unique take on a problem space.
Other times, change comes about as the result of a larger shift in society. Without a doubt, the COVID-19 global pandemic we’re currently experiencing will change the way we think about design. As much as we want stability, there’s a constant force pulling us away from it.
Growing complexity and consistency
If we know that things are going to get increasingly complex over time, we should at least ensure that growing complexity is in service of the right goal.
At Facebook, we aim to build robust design systems that can account for as many product scenarios as possible so every experience can be as cohesive as possible. As a designer on one of our in-house tools—one that helps our product design and content strategy teams rapidly prototype and collaborate—I’ve watched visual patterns for selector buttons slowly drift over the past few years. They come in all shapes and sizes now: some set to grow to the full width of their container, some disguised as headers for other elements, others hidden behind icons. Each had its own justification when it was designed, but there’s no mistaking the fact that consistency needs reigning in.
Decreasing system entropy requires offsetting the disorder that’s being created. This means we need to act carefully and thoughtfully about how we measure success and work with others. It also means we must mitigate risks along the way to ensure that our design systems can remain stable even as they change over time.
Conscious choices and open communication
Many things make designing at scale challenging, but one strong signal that scale is causing entropy is when things happen that we didn’t expect and only find out about later. For example: Team A ships a feature that uses a new type of dropdown button, only to find out a month later that Team B already shipped a similar feature but solved it in a completely different way with a completely different component, and the two experiences now feel disjointed as a result.
Shipping two features that solve a similar situation in a different way could be just fine, but it must be done consciously. The more we as designers can communicate upward and outward about not just what we’re proposing, but why we’re proposing it, the more opportunity we have to align experiences across products. Open communication also helps others hold us accountable for being intentional when we create new design patterns or diverge from existing ones.
True scale can only come if we expect our designs to grow and change. To me, it’s what’s appealing about design at scale, what makes it challenging and exciting.
At Facebook, we’ve focused on creating tight feedback channels through frequent design critiques with our peers and developing in-house, browser-based design tools that let anyone see design changes as they happen. Not only does this help designers ideate using components directly from the production codebase in their prototypes, it also shortens the time it takes for people to respond to new information or correct mistakes when they happen.
Scaling resiliency
Even if we communicate openly about design changes, we must also recognize that true scale can only come if we expect our designs to grow and change. For some, it’s a switch in the mind to think about design as being resilient to change. To me, it’s what’s appealing about design at scale, what makes it challenging and exciting. It’s much easier to create the right set of constraints for a one-off design; it’s significantly harder to create resilient design systems that are intentionally designed to remain stable throughout changing conditions.
Following these three principles has helped us guard against making design systems brittle when they’re operating at scale:
- Designing and building components with APIs that target both designers and developers makes it easier to strike the right balance between extensibility and concise components with clear, distinct use cases.
- Discussing scale up front makes it possible to account for future complexity. Establish early on that you will make a product’s change and growth a regular part of critique.
- Creating processes to review and document patterns on a regular basis can help you and your team learn how designs are evolving over time.
Embracing change
The entropy that we see in design systems operating at scale might sound like a problem, but I think it’s actually an opportunity, something to look forward to and embrace. When our products grow and change in ways we didn’t expect, it means that we’re making product decisions based on new information we didn’t previously have. It means we’re acknowledging the complexity and uniqueness of the people we’re designing for and responding accordingly. Equilibrium in design isn’t the goal, even if entropy is inevitable.
