You have probably heard about design systems many times. It is understandable because the design systems have been rising in popularity over time. However, they are not new. Design systems have always been here but under different names or forms and scale.
As for today, they are becoming a common thing for product development. Big companies have built and continue improving their design systems. Moreover, the best part — most of them are public.
What is Design System?
There are many definitions online, different wording, but the same idea. One of them would be:
Design System — is the single source of truth with rules, constraints and principles. This helps teams tie every bit of the product together.
Let’s dive into a detailed explanation. Design System should serve as a single source of truth for any team involved with the product. Not only internal but external organisations as well. For example, in order to build a native Android app, you have to rely on Google’s Material Design.
So the system should be implemented in the easily accessible way, keeping teams on the same page, and serving as the master reference.
Every element of the design system has three core pillars. These pillars help to set regulations and guidelines that everyone needs to follow.
1. Rules
All our web products should follow Web Content Accessibility Guidelines.
2. Constraints
Never use harsh wording or offensive language in a copy.
3. Principles
When using icons, pair them with descriptive text, either always visible or hidden in a tool tip.
Everything that applies to your product should be tied together. Design, Dev, Marketing and Sales, meaning that all teams are contributing to building the entire system.
Maybe having only Brand Guidelines is sufficient for your business. However, the Design System should consist of everything that makes up your product.
- Brand or product mission (brand mission statement, vision).
- Brand guidelines (can include personality, a tone of voice, colors, type, illustration, branding and logo usage).
- Marketing guidelines (how to use brand guidelines in marketing).
- Web product components and patterns (library of reusable UI components, assets for designers, code implementation).
- External kits and assets (Press, UI kits, public repositories, etc.).
The list can go on but the main point is that all these elements should be matched together.
Benefits of the Design System
So we defined what design system is, and which parts it has. But why do we need one? Should we invest in having one in 2019? The short answer is — yes. Let’s see what the benefits are and if there are any cons.
Let’s start off with the benefits:
1. Increased velocity and time to market
Having highly structured, organised components, UI kits and pattern libraries reduce the time spent on technical tasks. Combined with the agile process, you can do rapid prototyping, have faster releases without losing quality and doing quick iterations.
2. Better product value and user experience
Reusable components, consistent design across all the platforms, marketing that match the product. All that result in a very consistent look and feel. Interaction with the product becomes intuitive due to the usage of same patterns across the product. There is less friction adaptation for new users. Brand awareness is rising. Overall user experience becomes much better. And so does the product value grows.
3. Less time and money spent
As velocity grows, teams spend less time on creating new or developing what’s already done in the form of reusable solutions. Designers and developers don’t waste time on repetitive work, meetings or questions. They focus their time on delivering results faster and bringing more value.
4. Clean design, clean code
Time invested in creating and maintaining the system pays off in a form of a clean code base and easy to manage design assets. The design system is not set in stone. It will have changes as the product scales. Maintaining and updating it should not be so intimidating. Structure of the system should allow your team to make changes to the product without negative impact.
5. Increased collaboration and knowledge sharing
With all teams having access to the system, it is much easier to have everyone on the same page so they can collaborate and share knowledge quickly. Another benefit is that new team members will have a much easier onboarding process.
Drawbacks?
There is one. If you have design and code debt, you will need to spend quite some time and resources to build a system from scratch and unify all the teams for collaboration.
Conclusion
The benefits of the design system are too significant to ignore. Typically, it is easy to build one when starting a new product with minimum efforts. Even if your product is already up and running for a long time without a system, it would be wise to invest time and money into building one. As it will pay off in the long run.
An estimated $1.5M+ in annual savings or 21.25% time saved for a typical product development annual budget (based on on-shore/offshore team of 100 resources).
So would you need the Design System in 2019?
If you need to create a design system for your product, please contact us:
hello@techmagic.co
Author: Mykola Shevchuk — Lead Designer at TechMagic
Editor: Mike Butusov — Marketing Manager at TechMagic
