The benefits of a design system are well-known, yet many companies are intimidated by the prospect of creating one. They don’t know where to begin, they think it’s a gargantuan undertaking, and they’re not sure anyone will care about it anyway.
If that sounds like you, stay tuned. We’ll guide you through a three-step process to quickly build a low-cost design system your teams will actually enjoy using.
Spoiler alert: You probably have the beginnings of a solid design system in place already. You just don’t know where to look.
What Is a Design System and Why Should You Care?
Hopefully, you understand what a design system is but — in case you’ve been living under a rock — it’s a collection of rules, guidelines, standards, and components that govern the way companies create digital products.
If you’re familiar with atomic design principles, it’s helpful to know that a design system tends to include ‘atoms’ (like a label and a button) as well as ‘molecules’ (the combination of the label and button to create a form). More complex design systems also include ‘organisms’ (groups of molecules joined together to create custom interfaces).
The reason you include atoms, molecules, and even organisms (what we’ll simply call ‘components’ here) in a design system is so you can easily reuse each again and again on all feature and app development projects.
This gets at the main benefit of a design system: faster development. With a design system, there’s no need for your developers to reinvent the wheel every time they attempt to create a correctly colored button. They’ll simply grab that component from the design system and put it in place.
Another key benefit of a design system? Consistency. Because developers use the same button each time, it’ll look and function the same way everywhere in the app. This fosters a better UX since your app is predictable and, therefore, easier to use and ultimately breeds user trust.
Why Your Past Attempts at a Design System May Have Failed
You may have tasked your team with creating a design system that never got off the ground. Here’s what usually happens:
At your direction, designers painstakingly craft pages and pages of a design system — like stunning color and typography notes — but they fail to provide practical guidance on exactly how to use those notes. As a result, developers never adopt the design system. Sure, they get that they’re supposed to use cobalt blue, but where? How? When?
At this point, you throw in the towel. Your designers already spent hours making something that sits unused. Your business folks are angry about the wasted resources. You conclude — like so many other product execs — that design systems are too time consuming and, therefore, too expensive.
3 Steps to Build Your Design System Foundation
Creating a design system does not have to be an overwhelming, expensive, time-consuming project. You can and should start small and grow adoption over time instead of forcing your teams to change overnight.
Don’t believe us? Follow these three steps to see for yourself.
1. Ask for Developer Input Up Front
As evidenced above, the most common reason design systems fail is lack of adoption across business, design, and development teams. And the developers tend to struggle most.
Fortunately, it’s not difficult to overcome developer team resistance. You just need to involve them upfront instead of asking your designers to create a design system in a silo. Silos never work.
So your first step is to ask your developers, with your designers in the room, what they have the most trouble implementing correctly and efficiently. Solve that problem first. That way, your developers are excited — or at least willing — to give the design system a shot because it’ll address their biggest pain point.
Focusing on developer needs first isn’t just good for your developers. Your designers will be thrilled the developers use the design system and get stuff right without asking them the same questions on repeat. In turn, apps and features will be developed faster with less back and forth, saving money and making your business people happy. It’s a win-win-win.
2. Aggregate Your Brand Standards
While you’re all working to address your developers’ main concerns, you can simultaneously gather your brand standards to form the foundation of your design system.
You’ll need things like:
- Brand colors
- Brand voice guidance
Simple enough, right? Like we said before, you probably already have most of this information. You just need to compile it, clean it up, and add some extra directions on where, when, and how to use each component. And there you have it, the basics of a design system.
3. Select a UI Framework and Customize Your Components
Your teams are on board and working together toward a truly useful design system, and your brand standards are in place. What’s next?
You need to research and choose a UI kit, like Bootstrap, Foundation, or other design system tools. With your UI kit, you’ll create your UI framework, which gives you the building blocks to make different user interface components, like buttons, headings, forms, images, and so on. You’ll reuse each of these components from your UI kit on every dev project going forward.
By the way, unless you’re Google or Facebook, it’s best to purchase a UI kit instead of building one from scratch. Don’t waste time creating components someone else created perfectly well. That said, after you implement your UI framework, you will have to customize and build out certain components to suit your specific app.
Keep Growing Your Design System Alongside Your Digital Application
Once you complete these three steps, you’ll have the beginnings of an effective design system.
At this point, it’s crucial to remember you don’t have to create or change everything immediately. Rome wasn’t built in a day. And a new app or feature doesn’t get built all at once. Focus on a minimum viable product version of your design system that includes the components you need right away. Then grow the rest organically as your app grows.
With our steps, there's no big shift in process or hours of training. Just a simple, single source of truth that will mature over time to suit the needs of your teams and organization. If you need help getting started, you know where to find us.
How can we help your company use great design to achieve its business goals?
Whatever you’re building, our workshops and project engagements can help you do it better. Reach out to discuss your project or request a quote.