In 1815, at a critical point in the Battle of Waterloo, Napoleon took aim at the British, Dutch, and Prussian lines with the full force of his Grande Batterie—and missed—by a lot.
Why?
His maps were wrong due to a printing error that misrepresented the lay of the land. The cascading confusion and failures that followed eventually lost Napoleon the war.
Designers and front-end developers can probably relate to the emperor’s frustration when they realize too late that the style guides and UI libraries they’re building from are out of date or misrepresent design standards.
In a perfect world, the tender loving care of a design ops team dedicated solely to constant audits and updates can keep some of this in check. But more often than not, design teams spend huge overhead getting everything just right for every project—or worse, lose the war by shipping something that’s incorrect or out of sync.
“One hand doesn’t know what the other hand is doing, even when they’re my own hands.”
Josh Clark
The heartache of design at scale
Design debt is insidious. It creeps up on you. There’s a component upgrade here, a style change there, and a potential break everywhere in between. A few newnewfinal.jpg files and a communication gap later, and the damage is done—to the app, and the rest of the week’s plan.
This is what happens when, as Josh Clark describes it in the debut episode of our new video series, Design Systems: Mastering Design at Scale, “one hand doesn’t know what the other hand is doing, even when they’re my own hands.”
Version chaos is unleashed, and what could have been a fast feedback cycle is now a momentum-crushing back-and-forth between design and development that sends people scrambling backward as the launch date looms.
It’s all part of the heartache of design at scale. It’s an eloquent enough turn of phrase that we used it as the title of the above-mentioned first episode, and it’s the challenge design teams face as their ambitions, headcount, and product offerings grow.
There’s an easy first step toward meeting that challenge: Do your part to keep your part up to date, but don’t depend on guides and libraries to do the job of your design system.
Style guides—vital, helpful, and not a design system
While style guides can help communicate your design system to your entire organization, they’ll never truly serve the workflow of every individual stakeholder.
A designer working deep in their flow may not go to a style guide to check for the latest dos and don’ts of using a button. A front-end developer isn’t likely to visit a style guide to validate that a UI component pulled from Git is still the right one.
In his book Atomic Design, Brad Frost says, “a style guide can provide documentation and serve as a helpful resource, but the simple existence of a style guide doesn’t guarantee long-term success for the underlying design system.”
Style guides are static granular artifacts, but your design system is very much alive in the now, alive with constant updates to the benefit of your digital product design process.
Coded UI libraries—reusable, efficient, and not a design system
You’ve completed your UI component library with a living collection of components stored in a place where front-end developers can easily grab them.
While this well-organized library is a thing of beauty, it’s still a silo that’s walled-off from the greater design practice and lacks alignment with designer-focused libraries.
A design system tears down those walls and connects those libraries to show how those coded components fit into the big picture, where everything comes together according to your established design principles in a shared language that tells your customer everything they need to know.
Your design system creates that shared language: it’s all of your design assets, each of them instantly available with up-to-date code, usage documentation, cloud-based storage, and versioning—all totally integrated with the design and development workflow you already use.
A detailed up-to-date map of your design language—for everyone
Your design system builds a bridge between disciplines and across products, allowing everything and everyone to work better, faster, together in one place.
In “The Heartache of Design at Scale,” Dan Mall summarizes it well when he says, “a good design system is a tool that everyone on a team can use. It gets everyone a little bit outside of their comfort zone to be able to work with each other more, to engage more with each other.”
Your design system tells the whole story of how your organization builds digital products.
It’s your single source of living truth, designed to streamline collaboration, promote UI consistency and cohesion, accelerate production, and create a future-friendly foundation for growth. Oh, and it’s also where you’ll find your style guide and coded UI library. Are yours up to date?
InVision Design System Manager
Looking for a faster, easier path to your single source of truth? InVision Design System Manager (DSM) is architected to work inside your designer flow—with the tools you already use. The DSM Web View automatically reflects the latest version of your design system, and DSM’s design token API connects your design system to code. You’ll experience sync like never before—and win your Waterloo by shipping your best product yet.
by Scott Porter
Scott is a Texas-based copywriter and content designer for InVision. He would enjoy an opportunity to meet your pets.
