November 22, 2017

Design Systems IRL

Recently, the Basalt team met up to just hang out—which, we’re aware, should mean not talking about work the entire time. And while we had an awesome night, we should confess that we did spend most of the evening talking about the building and implementation of design systems.

This is what we’re passionate about, because this is what we do: Basalt creates design systems that simplify technology while increasing brand agility. So, naturally, that’s where the conversation flows, and we’ve since forgiven ourselves for our inability to avoid the topic. At the night’s end, we decided to distill why we’re so passionate about design systems—by exploring their value, what they enable us to do, and to briefly explore how we believe design systems stand to change how human beings interact with the web.

What is a design system?

UX and interaction designer Alla Kholmatova, in her seminal book (titled, you guessed it, Design Systems) defines a design system as “a set of connected patterns and shared practices, coherently organized to serve the purposes of a digital product.” We love this book, and we value Kholmatova’s exploration of design systems—though her definition, albeit accurate, remains vague to those not steeped in the concepts, and to those who haven’t read the book. We want to boil the explanation down—in broad strokes, and then citing a few key specifics—and to do so, let’s begin with an analogy.

Santa’s Workshop

In his wisdom, Santa knows that if Christmas is going to go off without a hitch, he’s got to have a workshop full of happy, industrious elves who all work together, in parallel, to create hundreds of iterations of toys that look great and work perfectly. It’s quite the operation, and Santa knows not to try and re-invent the wheel every December: he’s got his design system standardized—written in Elvish, English, Esperanto, Hindi, and Braille—and posted everywhere. His design system is a product—an artifact—that systematizes and centralizes all the aspects of the design process. A design system as a product, in the case of Santa’s Workshop, includes all the tech bells and whistles: the CAD design programs the elves use to visualize toys, the repository of toy parts (ball bearings, wheels, dinosaur teeth, and buttons) repeatable across countless toys, and the software allowing the Toy Function Elves to work in efficient parallel with the Toy UX Elves. These products centralize Santa’s brand control, and make him more nimble and efficient.

But Santa also knows that his design system isn’t worth anything if his elves don’t use it. So he’s also made sure that his elves are steeped in the philosophies on which the product of the design system is based. His elves recognize the design system’s value, and thus they use it—happily—whenever they build toys. The philosophy of his design system is just as important: it’s the fabric that ties together every aspect of how Santa’s Workshop functions under a common set of principles. The philosophy of his design system touches everything: toy delivery, sleigh maintenance, even reindeer care.

Thanks, Santa, for Christmas—but also for introducing the continuum on which design systems are understood: design systems as products, and design systems as a philosophy. Whichever lens you use to look at it, Christmas just couldn’t happen without a smart design system.

Design Systems as Products

At Basalt, we embrace both ends of the continuum, though we’re more prone to thinking about design systems as products because of the nature of our work. We work with organizations to understand the core of what they want to do in order to create the best substrate for their technology strategy, which is itself a product.

As we learned from Santa’s Workshop, a design system as a product is a set of actual tangible technology tools that are used to implement a system to manage how an organization designs. When you’re not at the North Pole, it consists of tools like Pattern Lab, Storybook, Sketch, and Git. Depending on your needs, you may have an asset management system, connection to online photo or video libraries, or an integration with a system that manages a style guide. The interconnection of these elements becomes a design system as a product: a piece of technology that a company uses, grows, maintains, and cares for.

Acknowledging that a product-centric view of design systems doesn’t negate the importance and value of the philosophy of design systems, we want to offer a few nitty-gritty specifics on how a really smart product stands to improve any organization’s design process—but that’s another post.

What about the future of design systems?

Where Design Systems Are Headed

We believe design systems are the status-quo future for a better web. As the myriad benefits of components become clearer, we believe page models are going to break down—quite literally, as they decompose into more workable constituent components. Designers are enabled by design systems, and are able to create and prototype inside of the medium the content is destined for.

As design systems become more universally embraced, and the cost and time barriers that prevent companies from realizing their design potential diminish, we think some interesting things will start to happen. That’s why we’re passionate about design systems: we believe they offer the substrate through which the architects of technology are its masters, and not the other way around.

Stay tuned for our next post—a deeper dive into into how smart design system products improve design processes.