The motto of product design, “Consistency & Predictability”, is often forgotten. Design system brings order to UX and design chaos, and allow you to focus on work that matters.

Do you remember that one restaurant that served you the most surprisingly delicious dish? You told all of your friends and brought them back to the place, only to receive an underwhelmingly average meal.

What happened?! Different chef? Lower-quality ingredients? Slightly hotter pan? Who knows. The fact is that a restaurant which is not consistently great is not great at all.

The same goes for a product or a business. If you become known for your excellent design and user experience but fail to reproduce it as you grow, you’ll find yourself in a bit of a pickle.

Luckily, I know something called a design system. You’ve probably heard of it. It is exactly what you need to maintain a consistently smooth UX experience, even as you expand and change.

What is a design system?

A design system is a continuously evolving single source of truth for the whole team that’s working on a project or product. It combines a UI kit, behavior and scale rules, code, and a brand book.

It is a collection of reusable components, guided by clear standards, that can be assembled to build any number of applications.

Or as Chris Messina, tech evangelist and former Developer Experience Lead at Uber, puts it: “Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.”

Oh no, here comes the inconsistent UX…

“With great growth comes not-so-great variety.” – a very annoyed CEO

As your company grows, it develops new products and this leads to plenty of UX and design elements. Without an appropriate system in place, it soon becomes difficult and time-consuming to figure out what components are already out there. As a result, your designers and devs decide that they’d rather create their own solutions.

And just like that… BAM! The dreaded incoherent user experience appears.

That’s exactly what happened to HubSpot (and many other companies). Once Hubspot audited their design components, they discovered that they had 6 different primary buttons, 40+ text styles in 3 different fonts and… 100+ shades of grey! Ugh, that’s much worse than 50.

That’s what happens when teams and individuals are unaligned due to a lack of clear direction. It’s bad for business, it annoys users, but worst of all, it creates a mess that is super time-consuming. Yep, you’re paying more money for an inferior experience.

Quick example: Are designers spending 30 minutes/day on any of these?

Okay, let’s make a quick calculation when the designer spends ONLY 30 minutes per day for repetitive, unnecessary work.

Sound familiar?

To avoid a UX and design that’s just “kinda similar” or “close enough” across different platforms and products, you need a design system.

With it, you’ll be able to:

• Align the foundations of a brand’s design language
• Streamline UX processes
• Create a scalable UI language

Seems pretty handy, right? So…

What should a good design system include?

Shared purpose, values and goals

It’s essential to get the whole team on the same page. If there’s a question that’s not covered by specific guidelines, then key values and goals will point the designer or developer in the right direction.

Design principles

These principles should help anyone understand the purpose of the product and its design.

Brand identity and language

Include colors, fonts, brand voice, illustrations and anything else that’s a part of your brand’s personality. Don’t forget to explain the rules on how to use these elements, as well as some useful examples of good practice.

Components and patterns

Components are the building blocks of your products and are a direct result of every element mentioned above. Patterns define how and when to use specific components in order to achieve consistent design results.

As you can see, creating a comprehensive design system is no walk in the park. It takes some time to talk things through, decide the best course for your company and then create a system around this.

Sure, the initial task may seem daunting, but it’s so worth it in the long run. Let me tell you why.

What’s in it for you and your company?

Why is it a good idea to implement a design system? What’s in it for you, your company and your team?

Let’s take a look at why design systems are great for businesses, and even better for people.

Create better products faster

UX speaker and author Nathan Curtis said:

“Design system isn’t a project. It’s a product serving other products.”

And through serving other products, it also serves your company. A design system:

Ensures consistency. When all team members follow a shared set of principles and component guidelines, it ensures that the experience across different platforms and products will also be consistent. This brings a huge sense of relief for product managers, project managers and VPs of design.

Increases efficiency. Fewer questions, less hesitation and more frictionless work. It’s quite simple. When everyone knows the next step and how they are supposed to perform it, there’s no stopping them.

Simplifies scaling. Once you expand your services or launch a new product, you’ll need new designs and UIs as quickly as possible. With a design system, this can be done in an orderly fashion and without compromising the quality of UX. Without a design system, we already know what the result will be – a mess.

Basically, a design system enables your business to design, realize, develop and scale with the utmost efficiency and on a consistently excellent basis.

There’s another benefit that you’ve probably already guessed, but I’ll stress it nonetheless. A design system saves A LOT of time.

PGS Software estimates that the simple task of designing, developing and testing a few buttons usually takes them around 14 to 15 hours of work without a design system. The same task was estimated to take only 2.5 hours with a design system. That saved 11.5 hours – or 80% quicker! And all we are talking about is some simple buttons.

Similarly, Distillery design estimates that you can save up to 70% of your team’s time during a product development process. That’s nothing to sniff at.

That’s how you save time.

Last but not least, there’s user feedback. It’s extremely valuable, but it’s useless if you don’t do something with it. With a design system, you take the most important takeaways and incorporate them so that they impact and enhance anything that your team creates from then on.

While we’re on the topic of users… what about the users of a design system? What’s in it for them?

Clarity not confusion, empowerment not frustration

One of the fundamental questions when creating a design system is:

“Who is going to use it and how?”

Think of the system as a company’s UX for its own designers and developers. The main goal of a well-made design system is not to make people work less (although this is a nice bonus), but to encourage people to work better.

So, what does a design system do for your designers and developers?

Helps any newcomers to start working on various tasks almost immediately. It allows them to understand and speak your company’s design language without the need to ask a ton of newbie questions. Being able to understand things is a nice confidence boost and helps the new starters to feel useful and empowered.

Enables designers to stop worrying about details such as font sizes and color shades, and allows them to start focusing on the bigger UX picture. They have more time to create meaningful work that will satisfy both them and the users.

Eliminates knowledge silos. If only one or two people know the most about UX-related things, they become the go-to guys for anyone with questions that need answering. That’s stressful for them and extremely risky for the company. If such a person decides to move on, it creates context gaps that can lead to bad user and employee experiences, or even product failure.

Makes troubleshooting easier and more objective. It can be hard to critique someone’s work without them taking it personally. It helps if you can use the system to point out a mistake and explain why it should be done in the described way. You might also discover that the design system wasn’t clear enough in the first place, so you can improve it to prevent blunders in the future.

Shows that a company is well-organized. Using a design system can help to improve your team’s mood, as there are fewer questions and moments of frustration. This can be crucial, especially at a time when retaining top talent is getting harder and harder for many companies. If an employee feels good and empowered, he or she is more likely to stay.

When to implement a design system?

I’m sure you can now see how a design system can help any business or team. There really are no drawbacks. It’s a necessary solution for an ever changing entrepreneurial world.

When is the best time to implement one? Want to guess? Yes – NOW. The longer you wait, the bigger your design audit will be. Inconsistencies will pile up, so it truly is a case of the sooner the better. Once you have your system in place, it will start paying off right away and you’ll never look back again.

“But… where to start?”

I hear you. And I have just the thing if you’re not sure how to do it but want to build your system on solid foundations.

I can help you to create a design system that will make your work more efficient and enjoyable.

Examples

• Upfluence
• Material
• Salesforce
• USA.gov
• Digitalsync
• Shopify
• Mailchimp

Additional read

Hungry for more?

5 Conflict Management Styles That Every Team Leader Should Know

Design audits: When do you need one and what should you expect?

About the author

I am a Design Strategist who holds a Master of Business Administration. I have 15+ years of career experience in design work and consulting across both tech startups and several marquee tech unicorns such as Stellar.org, Outfit7, Databox, Xamarin, Chipolo, Singularity.NET, etc. I currently advise, coach and consult with companies on design strategy & management, visual design and user experience. My work has been published on Forbes, Hackernoon, Blockgeeks, Newsbtc, Bizjournals, and featured on Apple iTunes Store.

My personal page  *  Let’s connect on Linkedin  *  Twitter

Comments

comments