Many product companies struggle to translate design concepts into implemented code. This process often feels disconnected, usually because the company lacks a system to bridge the gap between designers and developers. That is where design systems can help, but what exactly are design systems and why should your company invest in building and maintaining one?
Over the past years, we at Modus Create have worked with a number of companies and helped them set up design systems which enabled them to build digital products faster, improve company collaboration, and eliminate code redundancy. Design systems also helped teams focus on the bigger picture rather than waste valuable time on frequently repeated design questions.
Questions and frustrations like the above are still frequent in companies nowadays but it shouldn’t be this way. Your company should be investing more time thinking about important end user issues that bring money to the business. Brand resources should be easily accessible, and copywriters should have clear instructions on how to write editorial copy. Most importantly, UI development code should be reusable. Design systems define principles and help companies with all these goals.
So what exactly are design systems? In short, they are a combination of tools and systematic processes, which help organizations think and build digital products with a modular approach. They help companies define principles, eliminate duplications, and empower confidence. It’s like fitting lego bricks together to create a usable lego model, but in this case, the legos represent the brand guidelines, colors, typography, design components, UI code, voice and tone and any other reusable toolkits to build on. Design systems allow everyone to share and speak one design language and a good example is the U.S. Web Design System, a design system for the federal government.
As the tech industry evolves and user-centered design becomes the heart and soul of building products, these same digital products become more complex to build, require clearer and closer collaboration between teams, and face stiff competition in the market when they ultimately launch. So, with tight deadlines, plenty of hands on the deck and multiple products working in parallel, a design system in place creates visual harmony, reduces bottlenecks and uplifts the quality of the experience along the way.
Enable faster development and consistency
A design system is a living product that should be loved and constantly taken care off. It should, therefore, be treated equally as any other company product. Nathan Curtis has the best description for these systems — “A design system isn’t a project. It’s a product serving other products.”
Many argue that building a design system while handling new product features and other requests will slow teams down and won’t provide monetary value to their business. Although, the workload is increased initially one quickly realizes how much it pays back and what a solid ROI it provides for the teams and the company moving forward.
We worked with clients in the past where they had no design system in place and a simple design change would create chaos due to a lack of time and resources. A supposedly simple design update would sit in the backlog for months only to be ignored in the end. The best way to avoid these issues is to have all your digital products integrated with a design system, so that when an update is required it only needs to be carried out in one place. Let’s say your team has decided to make button text bolder. Engineers only need to make the change within the design system. When the change is pushed online, it automatically updates every product integrated with the system. There is no need for your devs to waste hours scrolling through code so that they have to update multiple CSS button tags for a simple button text update.
Design systems allow team velocity, which is crucial and often times defines the viability of the product you are building.
Save you money
One of the main reasons why company owners decide to build design systems is that it saves them money. When a company does not have a design system and starts to experience growth, the process of writing code and designing mockups becomes chaotic. Developers spend hours rewriting code logic and designers design new requests on the fly. When this happens, it causes endless back and forth communication between teams that lacks direction and harms the delivery of work. Such a disorganized process is costly to any company while losing the process of agile and lean product development along the way.
When we work with clients with no design system in their process we start to realize how much time is being spent on speccing out work, rewriting UI component code, and mocking up designs. The time estimations really add up. Translating that amount of time into money becomes a huge expense for the company and that’s only in a team of fewer than 30 people — just imagine when the company scales up to a 100+. That’s an exponential expenditure rise which can easily be avoided.
Bring newcomers up to speed
As newcomers get on-boarded, a design system becomes an invaluable tool. A design system helps them get a strong grasp on the brand identity, its voice and tone and helps them understand and start to speak one design language without putting plenty of strains on other teams with avoidable noob questions.
We also learned that when patterns and components are well documented it significantly helps new designers and developers to independently design and develop achievable tasks quicker and tackle user stories straight after a few weeks as the process becomes very modular and easy to follow.
Eliminate knowledge silos
Design systems create transparency and eliminate knowledge silos. We all know how frustrating it is when only one person in the team holds all the knowledge and doesn’t or can’t share. Teams may spend weeks mocking up designs and features only to find out that they do not fit the brand or does not align with certain goals because the information was not shared across the team and created lots of design debt. If the same person who holds all the knowledge decides to move on, they will create context gaps which fall on the rest of the team. In extreme cases, this can lead to product failure and put the company at risk.
Conclusion
After building a number of design systems for our clients we have seen invaluable progress in the way they are tackling new product updates and we learned a few good lessons on best practices to build such systems and how they should be managed. There is no one-size-fits-all; every design system should be approached differently and when the system breaks, it does not need to be replaced but adapted and it continues to evolve around the needs of the company. When properly managed, design systems offer successful results and help teams reduce avoidable decision making.
