The value of investing in design systems

You’re in a room filled with a team of some of the smartest people you’ve ever met.

Maybe there are a few product managers, a handful of engineers, a couple of designers.

You’ve been working night and day to ship the next big redesign of your product. It solves countless problems thanks to weeks and weeks of user testing, and you were even able to improve the end-to-end experience.

You’re satisfied with your work, and the company is praising you and your team for delivering what you promised.

Eventually, you all come back together for a retrospective on what went well, what didn’t go so well, and what could be improved.

You hear a fellow team member say, “I think we need to build a design system.” Others nod their heads. Then you see the lead product manager stand up and ask, “Why?”

Why do we need a design system? Why is it important, and how is it going to make our lives better?

All too often, companies gain so much momentum that process gets thrown to the wayside—along with a ton of wasted time and money. But a design system can help mitigate that loss, increase consistencies and efficiencies, and smooth out your company’s operations.

Any of this sound familiar?

Raise your hand if you’ve ever been part of a team where you notice the following things happening:

• The same things get built over and over.
• Your product has inconsistent tooltips, confusing modal dialogs, and competing button styles.
• Your designers ask the same questions time and time again.
• It takes new designers, engineers, and product managers months to fully understand how to use the set design language.

If you’ve got your hand up, you’re not alone. But there’s hope. Design systems are meant to address these topics and so much more.

Related: How LinkedIn designs products at scale

Building the same things costs money

If you find yourself designing and building the same things over and over, then you’re costing yourself and your organization money. Yes, real money.

In today’s world, this is becoming more typical. A drop-down, popover menu, or video player should only need to be built once, then iterated upon. It shouldn’t have to be built again and again.

Ever wonder why we do things like this? We’re often trained to move fast, and our ego tells us we can build better versions of the same thing.

But there are a few questions you can ask your team to help stop this endless loop:

1. Does this solution already exist? (drop-down, select menu, tooltip, video player, etc.)
2. Could others use it? (Yes, no, maybe)
3. Have you already seen a working solution for this? (It works well, it needs improvement)
4. Does it solve the problem? (Yes, no, partially)

Asking these questions up front gives your team time and space to decide what should be part of the design system. You might find that you already have a component that exists, or you might realize that two other teams need the exact same thing. Either way, you’ll have some context on how to proceed.

Nothing is a small fix when it comes to implementation

Have you ever noticed your product has four different types of tooltips; or that the cancel button is in five different locations; or that your buttons show up in 10 unique styles?

So you wisely decide that you want to implement some design improvements that will make your product 10 times more modern and efficient—only to realize what should only take a couple of hours is actually going to take you two months.

You ask your engineers, “Why is this going to take so long?”

Because when they go in to update one thing, they realize it’s connected to 10 other poorly-designed and badly-implemented experiences. The code is as inconsistent and useless as the design.

At this point, you’re begging your engineers to do at least a 10th of what you originally proposed.

This is a result of not having a design system in place. When you move fast and you’re not thinking about the future, you cut corners. When you cut corners, you affect the engineers, designers, product managers, and, yes, your customers.

This is what we’ve seen from the past 20 years of product development. It doesn’t always go quite this way, but it’s a common example of what happens when future vision planning is not a part of your process. It shouldn’t stop your flow, but it should
be thoughtfully considered.

Repetition is good, but not when you’re repeating the same mistakes over and over.

Maybe you have designers, engineers, and product managers that ask the same questions day after day.

• Can you send me that source file?
• Which button should I use for this use case?
• Should that button be to the left or right of the cancel button?
• Is this the latest and greatest version of this?
• How is this supposed to work?

Every one of those questions can be answered with a design system. They can also be solved by implementing an onboarding session for new employees. This will help your team understand how the system works, functions, and is delivered.

When change is happening so frequently, teams need to be aware of how to track those changes. If there isn’t a strong change process in place, your employees will ask the same questions and repeat the same mistakes.

The importance of design language

An onboarding system for your design language is imperative to the success of your new team members. Training them on the basics—like where to find certain information and how to use certain components and colors—will prepare them for what’s ahead.

It’s also an opportunity to set expectations with your teams about why certain decisions were made in the past.

All this can be done with a design system, which also acts as the connective tissue that holds together your entire platform. At its core, a system is a system, and people are what makes a system a success. People drive the decisions, they govern the process,
and they establish new ones.

Where to begin

To help you on your way to creating a better process, you need to start at the beginning. In addition to the problems outlined above, consider the following signals of when you’ll need a design system.:

• You’re building the same things over and over.
• Designers are asking the same questions over and over.
• You’ve noticed that you have four different types of tooltips, five different modals, and ten different buttons styles.
• You’re growing fast and need to be able to design with a common language and consistent aesthetic that upholds your company’s brand.
• You want to spend more time thinking about UX and less time figuring out which button to use and where.
• Your designers tend to create outside of your brand aesthetic, which not only makes things very difficult to iterate and change over time but also adds both technical and design debt..
• Design is separate from engineering, so you don’t often talk about building or sharing components. You typically just build out one-off features.
• Your seasoned designers understand accessibility, but new designers have to learn it from scratch. It would benefit you and your team if that knowledge were transferrable to the next new hire.
• It takes months to onboard your new engineers, designers, and product managers, and it takes even longer for them to comprehend your design language.
• Some designers think systematically about how a design could be leveraged by others, but it’s not your standard methodology.
• You’d like to be able to test your solutions and learn faster, but you often run into time constraints, forcing your engineers to simply build what you design and move on.

Defining your company’s design system can revolutionize the way your team works, and the best way to get started is by looking at other teams’ successful systems. Pick and choose what you want, then iterate until you have a curated system that works best
for you, your team, and your company.

InVision Design System Manager (DSM) is a platform that provides a simple, unified way to design at scale by helping teams create, maintain, and evolve a powerful design system. The DSM platform includes a Sketch plugin, a web view, and a set of APIs—everything a company needs for a powerful design system, including the potential for multiple libraries. DSM serves as home base for the design team—a shared structure housing the collective knowledge of thoughtful design decisions.

Want to learn more about successfully starting a design system project? Watch pros Brad Frost, Dan Mall, and Josh Clark in Episode 2 of the Design System video series, Selling the value of your design system.