Why your company needs a design system
How to avoid User Interface mayhem
How to avoid User Interface mayhem
There are many definitions of what a design system is, and this article is my attempt at simplifying them for you. Essentially, a design system offers a common documented language for designers and developers. It's a shared library of design components that is also backed by code. In my opinion, a design system should be a part of every company’s toolbox - big or small. In this text I’ll explain why – and how.
You can think of design systems as an ecosystem that supports all interfaces - such as apps, software, or websites. They offer common user interface components like buttons or search bars. Establishing a shared understanding of what a digital product should look like is essential to speeding up the work process.
Any company that offers a digital product or service needs a design system. The bigger the company, the bigger the need for it. Teams often have many stakeholders involved causing the product to change at high speed. Having a system in place to help maintain a cohesive and smooth branded user experience is essential. When your team speaks the same language, it prevents UI (user interface) deviations and competing visual expressions from happening. Design systems are a tool to achieve brand loyalty and GUI (Graphical User Interface) consistency across products. This helps promote seamlessness, good usability, and a better experience of the brand and the product.
Designers and developers across different teams often lose many hours redesigning and reprogramming the same components. A common language between designers and developers enables teams to build products quickly. A shared system enables uniform and quick updates of your products. And, as we all know – time is money.
“It’s not a good idea to think creating a design system is a side project. For it to be successful, there needs to be a dedicated team, with involvement from both design and development.”Belma Nazecic, Senior Designer, EGGS Design Stavanger
While I love design systems and am an avid advocate of them, I can also attest to the fact that building one isn't as simple as you might like it to be. Here are a few lessons I've learned along the way.
1. Design systems should be design-led. Make sure designers and developers are on the same page creating the system together. If not, you risk creating a tool that won’t benefit your teams, which then loses its purpose.
2. A design system must live in two parts. It has to coexist between the design component library (e.g., Figma) and the coded component library (e.g., React). When it lives in code, it's quick to deliver and develop further.
"Design systems should be design-led. Make sure designers and developers are on the same page creating the system together."Belma Nazecic, Senior Designer, EGGS Design Stavanger
3. Train your team. No matter what tool we’re talking about, this is an absolute necessity. If they're unsure or confused about using it, the chances are high that they won't use it. It is worth spending the time and effort to onboard and train your team on how to use the system.
4. Set up a team to own the design system as a product. It’s not a good idea to create a design system as a side project. For it to be successful, there needs to be a dedicated team, with involvement from both design and development. Apart from ensuring good quality, it also promotes engagement and ownership of the new system.
5. Last but not least - documentation, documentation, documentation. Much like a brand book or a graphic manual, a design system needs to be thoroughly documented to make sure it's used correctly. Without proper documentation, you risk teams making their individual interpretations of the system. Documentation is necessary to ensure accessibility, good user flow, and interaction between different components and functionalities.
Do you want to know more about design systems – how to create them, what they're good for, or just want to figure out if you need one? Drop me an email or give me a call -->