The ROI of Design Systems: The What, Why, Who, and How
If you’ve been on a college campus in the past ten years or so, you’ve probably noticed dozens of big trucks and loud machines banging away at concrete, setting the foundation for a new dormitory building or two.
If you returned to that same campus a week later, you’d be shocked to find hundreds of brand-new housing units erect and ready for living.
You might ask yourself, How in the world did they build those so fast? And how do they all look identical?
The answer? Modularity.
Defined as “the use of individually distinct functional units, as in assembling an electronic or mechanical system”, modularity is what helps some designers and builders across many industries build apartment units in just a few days and a 57-story skyscraper in two weeks.
How, exactly? By setting up a uniform system of design artifacts and design principles—in other words, building blocks and how to use them—to rapidly increase construction and deployment times in a consistent and predictable way .In brand and experience design, we call these design systems, and they function much the same in brand communications as the modular method does in construction—using consistent, repeated brand and business communications across experiences and touchpoints.
What is a design system?
“A kit of UI components without accompanying philosophy, principles, guidelines, processes, and documentation is like dumping a bunch of IKEA components on the floor and saying “Here, build a dresser!” The guidelines and documentation accompanying the UI components serve as the instruction manual that come with the IKEA components to help the user properly and successfully build furniture.”
—Brad Frost
A design system is, beyond anything else, a way to bring a brand together. It’s the full scope of a brand’s styles and structures and a guide to how and where they’re implemented.
Because brands are essentially living, breathing organisms, design systems need to include every characteristic in a brand’s DNA—from UI widgets to photography styles to the voice and tone of its copy. If you ask me, most design systems I see today do a good job addressing the visual aspects of a brand, but most are chock full of gaps when considering how the brand comes to life in broader contextual applications.
A design system should be a tapestry that we experience. It’s the essence and expression of the DNA of a brand—a lexicon, an alphabet for how to set the foundation right. Yet all of this goes to waste if the brand system doesn’t encompass all use-cases of the brand and doesn’t portray the myriad of ways it's applied in its ecosystem.
What’s a best-in-class design system?
It’d be in bad taste to point out any of the design systems we’ve developed for and with our partners, so I’ll offer some of my favorites.
Shopify’s Polaris
From their website: “Our design system helps us work together to build a great experience for all of Shopify’s merchants.”
Why it’s great: It’s polished and enables users to follow a consistent design language, which helps them make more informed design decisions later on. This all adds up to increased design collaboration, increased productivity, and more quality investments.
From their website: “With our company’s growth and new direction, we need a brand identity that is efficient to use, flexible across applications, and able to feature localized content in a globally consistent way. These guidelines cover 9 elements: logo, color, composition, iconography, illustration, motion, photography, tone of voice, and typography.”
Why it’s great: It’s organized and has logical documentation. My favorite aspect are the two separate segments, Figma and React, which serve designers and engineers. Figma gives a component library for a designer building user interfaces, and React gives component library for engineers to implement the application.
IBM’s Carbon
From their website: “Carbon is IBM’s open-source design system for products and experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.”
Why it’s great: It’s incredibly comprehensive and easily accessible—it covers everything from detailed and logical documentation for beginning designers to complex, detailed usage guidelines for project managers and engineers. And they even test their color contrasts on their UI patterns to be low-vision users.
What do these design systems all have in common?
- They’re comprehensive. Everything from brand colors to buttons shapes are determined, making it easy for everyone to be on the same page, whether they’re a new employee or an off-site freelancer.
- They represent the brand. Whether you’re looking at Uber or Mailchimp, it’s obvious (beyond the name and logo). That’s because they leverage their unique differentiations and elements of brand character throughout their design system to make every digital brand touchpoint a unified experience.
- They’re enjoyable. Believe it or not, these design systems are read by non-employees daily. That’s because they’re not simple lists of brand assets. No, they’re experiences. They teach you but also entertain you. They often read like stories and make you feel closer to the brand and its people. That’s what separates a good design system from a great one.
Why is a design system needed?
“Creating consistency is like making small promises throughout the interface (when you see a pink button it is always an action; the “Cancel” button always comes before “Submit”). When people can be confident of what will happen, they can rely on the product. Consistency helps to build trust.”
―Alla Kholmatova, Design Systems
Plainly, design systems are good for business. They establish a shared language and communication across the team, which, in turn, creates greater communication, understanding, and morale. It unifies the team around governing design principles that propagate the brand forward over time.
When developing a design system, it needs to be agnostic of a technology. As a lifelong coder and believer in open-source, one of things I realized is the impact community and collaboration has on how we work together to create frameworks that power the planet.
This concept is so relevant because it enables inclusion, collaboration, and connectedness—all encouraging complex adaptive systems to evolve intelligently over time by collectively developing, reviewing, and improving sourcecode.
This fosters a deep sense of inclusivity across departments and roles, where no point-of-view is weighted heavier than another—it’s a true collaboration. And, as everyone works using the same shared principles, curiosity and discovery can flourish to create an established framework of voice, tone, and visuals. And, most importantly, it’s a space that will constantly evolve, living and breathing along with the brand and those who help build it.
But crafting a design system goes way beyond just a UI kit—it offers aesthetic direction, but doesn’t offer accessibility into the differing personas and stakeholders a brand reaches. I find the best place to start making your brand design system is doing an experience and touchpoints inventory audit. Collect everything outward facing—both physically and digitally—and really look at it. Print it out, pin it up or project it, and look at it with your designers, product managers, engineer, writers, everyone that works on that product to see a full brand experience.
At Digital Surgeons, we like to start by establishing common goals, categorizing those goals, and then identifying the patterns—brand voice, tone, principles, typography, animation, motion, media, everything. This allows us to see how the brand is living, how it’s breathing and establish it’s persona.
How do you start a design system?
Embarking on defining and building out your design system is actually a lot easier than it may seem. The most important thing, across all steps, is collaboration, as every role and function such as—designers, developers, strategists, sales and marketing—should be considered, as they’re understanding and involvement now will save money later.
Step 1 - Start where you stand and take inventory of where you are. This is more than just collecting every artifact that visualizes your brand or product, it’s an emotional exercise, or mapping, to identify how your company organizes, plans, creates, and makes decisions about these systems. It’s important to be honest, or you’ll begin in a place your brand doesn’t actually exist.
Step 2 - Visualize where you are going. Now that you know where you are and where you want to go, you can map your way to success. Just be sure where you’re going is actually where you need to be, ensuring ROI on your design system. Ask yourself and your team why you’re creating a design system in the first place? What current challenges you’ve discovered in the first step will be overcome, and how will you overcome them?
Step 3 - Establish what your guiding principles are—the road you take from step 1 to step 2. Metaphors, Methods, and ways to ground you. These are your guiding principles on your journey—those which make up or determine what goes into your design system. One of my favorite expressions of Design Principles is Dieter Rams’...
Who is a design system for?
Everyone.
You may laugh at that, but it’s true.
First and foremost, your design system needs to be accessible and optimized for use by your entire company—namely your marketing team, developers, and designers. They’ll be the ones applying the designs to applications day in and day out, whether it’s for a UX design, a deck presentation, digital products, or a piece of branded video content.
With that being said, your whole company should have a strong grasp on your brand and how it comes to life across every touchpoint. You never know when someone will need something on the run or in a flash and the only person they can rely on themselves. It’s reassuring as a business leader—particularly if you’re a CMO or a head of product know that your entire team, across all disciplines, is well-versed in the brand language and how it should be applied in a multitude of contexts and expressions.
And believe it or not, design systems are for your audience, too. Not for use, but for consumption. They allow your audiences to experience your brand and recognize it in the ways that they’ve come to expect. That’s because a design system is designed to reduce confusion, inconsistencies, and those devastating “that seems off-brand for them” moments that many consumers experience far too often with some brands.
This leads me to how a design system can help your brand, and most especially your ROI.
Are you wondering if a design system will be a good use of time and money for your company?
Do your designers, developers, copywriters, anyone who works with your brand’s DNA spend more than 30 minutes asking these questions?
- Which colors should I use for this ad?
- What should our logo look like in this use case?
- Is this photo approved to use?
- What component would best solve this problem?
- What adjective or phrase would be brand-approved to use in this sentence or ad?
- How would we describe our company in 100 words? 500 words? Which words?
- Do we have a different logo or brand colors for our international office?
How can a design system help?
A design system eliminates the guesswork or repetitive tasks that everyone hates, as well as the education and alignment needed when hiring or expanding. It allows your team in India to work in the same parameters as your team in Poland, who is also using the same guide as those in your US office. And the design system is not finite—it is a living, breathing thing, much like a brand, that adapts to new applications and experiences.
A design system also, and, perhaps, most importantly, clearly communicates your brand to those who use it the most. There will be more consistency in your brand’s personality across platforms and materials. This allows for more cross functionality and collaboration, where everyone can contribute together and focus on what’s important, opening your team up to solve real customer experience issues. This ultimately leads to a new way of thinking about the evolution of a business system, coming to life in the digital artifacts: the logo, the values, the key visuals, the voice, the tone, the components, everything that goes into a core design system.
A design system will save you time and money while improving CX.
Investing in a design system is one of the most vital things brands can do today. Not only will it help your teams work faster, smarter, and more creatively, but it’ll also provide a common and easily repeatable experience for your customers throughout their purchasing journey with you.
Plus, with the rapid growth of remote workers and increasing popularity of hiring contract employees via trends in the gig economy, it’s more important than ever to ensure your brand has a clearly defined standard for every touchpoint that anyone on your team—whether full-time and on-location or freelance and remote—can access and apply to any context necessary.
The result of a carefully crafted design system will be a combination of something you can’t get from anything else—a consistent brand standard, a predictable and delightful brand experience, and employee collaboration that ultimately designs demand and drives long-term growth.
Ready to launch your new design system for immediate collaboration, understanding, and return on your investment? Well let’s chat. Our team of designers, strategists, and brand builders can help you begin crafting a design system that perfectly expresses your brand experience so you and your entire team can move faster and more effectively for years to come.
