Balancing Flexibility and Consistency in Design Systems
How to effectively use both to create a design system that scales
The catalyst for many design systems is the desire to drive consistency between products. As companies grow, products expand, acquisitions occur, and priorities change, then inconsistency becomes an issue. A design system is often seen as a good way to unify disparate products. This has been the approach of most systems I’ve worked on, and it’s worked well in many cases.
It’s natural that designers look for consistency and try to build visual systems. However, when focusing on building a consistent experience, it’s easy for the goals of an end user take a back seat which ultimately compromises the experience we set out to improve. Flexibility is often seen at odds with consistency, but for a design system to scale efficiently and effectively both need to be balanced. How they’re balanced depends on the personas and workflows for your products.
Why you can’t always bet on consistency
When I arrived at GE, my perspective on design systems was very much around limiting flexibility with the goal of making products consistent. As I got to know the businesses, use cases and end users the design system supports my viewpoint changed dramatically.
The businesses we service come with a diverse set of personas, use cases and environments. The customers looking to optimize their manufacturing plants have different goals than the ones looking to monitor their wind farms. Our design system has to offer enough flexibility to support those use cases but we also need to maintain a system that’s still identifiable as Predix.
Lessons from branding
To determine where to drive consistency and when it’s ok to break with it, there are a few concepts we can apply from branding.
First, there’s the branded house where everything falls under a master brand. For example, anytime you interact with FedEx, it’s under a variation of that well known FedEx logo.
On the other side there’s the house of brands. There aren’t any Procter & Gamble products, but the company houses a family of brands such as Crest toothpaste or Bounty paper towels which are independent brands on their own.
Finally, there a blend of the two like Coca-Cola. Some products, such as Diet Coke or Coke Zero adhere to tight brand guidelines and look similar to each other. Others, like Sprite, have their own brand and look completely different.
The case for consistency
Under the lens of design systems, a branded house is analogous to a stand alone product or a series of products that work together. For smaller companies, this model encompasses all of their products. At large, diverse companies, like GE, this is equivalent to a business unit.
The products in a branded house should look and work the same most of the time because the personas using them are related and it’s not uncommon that they might use multiple products in the suite.
There’s a strong case to lean towards consistency in this model.
Figuring out flexibility
If your design system supports multiple products and businesses, some of which work alone, others that work together, a system needs to be more flexible. The products might address different personas, different workflows and maybe even different customers. This is the variety of businesses and products the Predix Design System supports.
Strictly enforcing consistency might not result in the best experience for the end users and would certainly hurt adoption of the system. To give teams the right tools to address their use cases, it’s important for the system to find a balance between being consistent and being flexible. To find the right points to enforce consistency and allow flexibility, it’s important to consider the way people are using our software. User paths and workflows are good signals for where to be rigid and where to bend.
An analogy that’s useful when identifying consistent elements is a family of cars. Typically, a manufacturer will build different cars to cover a variety of use cases. Among a line up, there might be an SUV for hauling the kids around, a sporty coupe for fun on the weekends and a sedan for weekday commuters. While they all serve a slightly different purpose, they have to hold together as a family.
The cars have different profiles and varied features to better accommodate for different use cases and each hold a slightly different identity. However, there are common traits between them such as the grill shape, body lines, door handles and instrumentation.
When thinking about balancing consistency and flexibility in a design system, determining a set of common traits between products is important.
The Predix Design System relies on typography, spacing, a core color palette, form interaction and iconography as foundational elements. While a few of those traits are fixed, such as typography and spacing, there is room to customize others. The core color palette allows for teams create their own theme, the data visualization color palette is extensive, and the icon family is easily extendable. Building flexibility into foundational elements gives teams the ability to adapt the broader design language to their use cases while still working within the bounds of the system.
Creating a path of least resistance
With more flexibility built into the system, it’s important to communicate best practices to encourage consistency. That can be done by enforcing compliance with strict rules and mandates, but that method can result in resistance to the system. A more productive approach for us has been to welcome people into the process while providing a set of tools that allow for easy on boarding.
Trust in the design system and the decisions behind it are important to encourage consistency. When consumers of the system can explain the “why” behind decisions, they’re much more likely to be an advocate for consistency.
We make an effort to invite stakeholders into the process by holding design office hours twice a week, embedding with product teams for workshops and scheduling regular touch points with stakeholders. This gives them an opportunity to influence work in progress and contribute to defining best practices.
When working with distributed teams, documentation is important to communicate best practices. Like most systems, we invest a lot in design and development guidelines, but we also visualize our best practices through tools like sample apps and Sketch stencils. Our Design Starter Kit ships with sample page layouts and relies on symbols to clearly indicate things like preferred configurations, spacing and component functionality. We also supply sample code for how to consume the system with various JavaScript frameworks. In addition to shortening the onramp for adoption, these tools frequently end up being a big time saver and productivity booster for teams.
The goal is to provide people a path of least resistance to adopt the system and get up and going quickly. Maintaining transparency in the design process, encouraging teams to contribute, and providing ways for team to easily consume best practices are a few ways to do that. The more barriers you can remove for adopting the system, the easier it will be to build consistency.
Applying the lessons
As a design system scales to address more products and use cases, leaning all the way in on consistency becomes challenging. Enforcing too much consistency hinders adoption, while adding too much flexibility can affect the coherence of the system. To find the balance between the two it’s important to look at the shape of your organization, products, and most importantly how people are using the products.
For more on how we balance consistency and flexibility in the Predix Design System, check out my presentation from the UX Pin Design Systems Virtual Summit.
Special thanks to Andrea Perry for her input.
