December 04, 2017

Design Systems IRL, Part II

Last month, we took a broad strokes view of design systems. The quick version: a design system can exist as both a philosophy and a product, and any really good one—including our fantasy example of the design system that keeps Santa’s Workshop running at peak performance and efficiency—exists as both at once.

How Smart Design System Products Improve Design Processes

At Basalt, we’re adept at both, but our journey towards implementing a fantastic design system always begins with a designing an excellent product that our clients will use to implement their design practices. And because the philosophy and practices of good design are worked into the DNA of the products we build, we think the wonky specifics of smart design system products really help illuminate what sound design actually looks like.

The inverse is equally true, both in a blog post and within organizations: the benefits of the design system as product become re-enforcers of the design system as philosophy.

Here are five of our favorite ways that design system products improve design processes.

De-coupling front-end and back-end workflows allows your team to design and build in parallel.

Basalt builds set of tools that drive the implementation of design systems for businesses, and a common goal, every time, is allowing for greater efficiency. A smart design system is more efficient because it allows front-end developers and back-end developers to work in tandem. When no-one’s waiting around for anyone else to finish up work before they can start their own, innovation cycles shorten from months to weeks or days, costs shrink, and products improve. A good design system tool serves as a bridge between front-end and back-end.

It lets your elves be elves, and your reindeer be reindeer.

Have you ever seen a reindeer trying to hold a screwdriver? What about a tiny elf trying to pull a flying sleigh? Keeping your developers working within their respective wheelhouses keeps them working happy, keeps the design process smooth, and builds a better product. With a design system acting as a bridge, everyone’s job is simplified, and everyone—front-end and back-end developers alike—can work creatively, and with greater freedom, without worrying about how their front- or back-end doppelganger might build off of their work.
Front-end developers can focus on building a fantastic user experience, and back-end developers don’t need to concern themselves with HTML on the web—they simply create something that supports the front-end, making sure that the data is presented in a standardized manner—essentially, as an API.

Mistakes are fewer and easier to fix.

We like to design tools that ensure back-end changes don’t affect the front-end experience, and vice versa—anyone who’s changed a visual aspect of their Wordpress site only to find they’ve broken the whole shebang knows what we’re talking about. For those of you who don’t: it’s akin to changing the color of your tea kettle only to discover that it suddenly doesn’t whistle when the water boils—an unfortunate coupled change that might burn down the entire house, so to speak. A smart design system decouples front- and back-end, minimizes these unintended changes, and supports true visual regression testing to screen for them.

Unicorns begone!

We believe in Santa Claus, but we don’t believe in unicorns—though we do, of course, respect them. Any individual who endeavors towards mastery of double-digit quantities of front- and back-end programming languages is a remarkable asset. But they’re very hard to find, and once you have one, they’re nearly impossible to replace.

We believe design systems are a long-term, sustainable alternative to this kind of dependency, because when used correctly, they eliminate the need to understand the entire system in order to contribute to it, thus empowering all your non-unicorn developers to do excellent work for your organization.

Your marketing and branding is centrally controlled.

This is one of the big ones. A design system, from a marketing and branding perspective, creates a centralized locus from which you can manage your brand—maintaining it, scaling it, and controlling its consistency with ease. Without that centralized control, it remains necessary to upkeep independently in dozens—potentially hundreds—of places. Brand agility isn’t an abstract term: a design system renders any task (launching, re-designing, or tweaking a site) far less cumbersome.

We believe that marketers should no longer have to make compromises around simplification for fear of not being able to maintain something, even if it happens to be complex. Instead, marketers should prioritize something more important: that the choices they make answer first to user needs and content needs. We’re not advocating making things unnecessarily complex—but we do advocate strongly for lowering the opportunity cost of more options, more layouts, more varied and flexible content. When using a design system that crafts your content as components, like those in a design system’s component library, flexibility and subtler, more responsive control and maintainability is the benefit. Layouts built from components can be visually and functionally distinct, and to no detriment. A design system allows for design fluidity and openness.