Balancing Flexibility and Consistency in Design Systems

How to effectively use both to create a design system that scales

Ken Skistimas
Mar 12, 2018 · 7 min read
Avoiding the Wild West: The right level of flexibility can help drive consistency.

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.

The goal of many design systems is to align a suite of products to a strict set of design rules.

Why you can’t always bet on consistency

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.

From the top of a wind turbine to the shop floor, the Predix Design System supports a broad set of use cases, businesses and environments.

Lessons 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.

Branding concepts can inform design systems on where to be consistent and how to be flexible.

The case for consistency

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.

A family of products that share personas and workflows make it easy to enforce consistency.
Flexibility is required when a design system supports a blend of products where some stand alone and others will need to work together.

Figuring out flexibility

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.

A family of cars addresses multiple use cases but carry common traits across to make them identifiable as belonging together.

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.

Typography, spacing, color and form styling are core elements of the Predix Design System. Some elements are consistent, others have flexibility built into them.

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

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.

Guidelines, sample layouts, sample applications and workshops are all great ways to drive consistency and buy in.

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

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.

GE Design

Stories from the designers empowering the world’s most…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store