Why A Design System Matters - Why Build A Design System?

Do you ever wonder about the fonts and color choices or layout of a website or product when looking at it? Have you ever looked at a website, and wondered how someone could make it so easy to navigate? When you visit a website, have you ever felt like it was successful at making the emotions it's trying to evoke come through? If you have, then you’re probably a fan of design. You know that it’s not just about making things look pretty. It’s about creating an experience for your users that makes them feel something—whether it’s joy, happiness or anxiety.

Award-winning research on the characteristics of effective design systems shows that organizations with a UX design system have increased revenue by 12%.

Design systems are a big deal in the industry right now. I've been a part of teams that have created design systems, and I've also worked on projects without them. And while working on both kinds of teams, I can see the benefits and pitfalls of both sides. Design systems are huge — and they're only getting bigger — whether you agree or not, they're here to stay. So why do we care? Why should we build them? What gives them value? Let's discuss!

A design system defines a company’s design language

A design system defines a company’s design language. It contains all the components necessary to create a solid visual identity that represents the brand as it moves from one medium to another. A design system allows designers and developers to focus on what matters most: creating great experiences for customers.

I'm confident that you must have visited any of the Google's Product or services page. Have you observed a pattern? You'll notice that every page has a consistent design and style. This is Google's design system at work. It’s what allows them to deliver a consistent experience across all of their products, even though each one was designed by a different team.

Takeaway: A Design System is all about creating a common language that unifies all aspects of your product experience: from the user interface, to marketing materials, to customer support documentation.

Challenge: Go to the recently updated Material Design 3 documentation and study its examples of how components, typography, or other design elements are used in a way that feels familiar—and yet different from older versions of Android design libraries.

It provides a shared set of components, guidelines and communication tools

The benefits of a design system are clear—it provides a shared set of components, guidelines and communication tools. The range of uses for a design system is also wide. While many developers use them to create apps, others also use them to build websites or even physical products.

Design systems can be created to support any number of needs:

• Visual consistency
• Visual identity
• Accessibility and usability
• Performance optimization
• Responsiveness

If you are a front-end developer or have worked/support with front-end teams, you may have heard of the JavaScript libraries like Chakra UI, TailwindUI, Bootstrap, Ant Design etc, All these libraries have their own design languages and approaches, but they all share a common set of core principles.

Takeaway: A Design System unifies the teams around a consistent design language, helping to create consistency for brands or businesses or products.

Challenge: Go to TailwindUI components and do you see a consistent design language? Go to Bootstrap components and do you see a consistent design language? Go to Ant Design, do you see a consistent design language?

It helps separate style from content

Design systems do not need to be bound by your data or the database itself. They separate components from business logic, allowing them to function independently of one another.

When you have a set of approved UI patterns, everyone on your team can speak the same language when talking about UI decisions. This makes it easier for everyone to participate in the design process from day one instead of having to wait until launch day before being able to weigh in on major changes to the user experience.

It reduces time spent reinventing the wheel every time you start a new project (or even add new features to an existing project).

Takeaway: Design systems not only lets you separate your Business Logic with your Visual Components, it also aligns everyone to speak a common design language from day one.

Challenge: Checkout this Dashboard made with Material Design 2. Do you see how the same raw data takes on different visual forms as it is reinterpreted?

It creates a living document that evolves with new components, changes and guidelines

A design system is a living document that evolves with new components, changes and guidelines. Design systems are usually created by designers, developers and product managers as a way to define and document the visual aspects of their products. They are also used for consistency across multiple platforms, apps and devices.

It is a living collaborative document for everyone. Iteration is an important of a Design Process. The Design Process cycle: Inspiration—Research—Design—Iterate. That is why it is ever evolving process with new components, requirements, changes and newer set of guidelines.

Takeaway: Design System is a living collaborative document that keeps re-iterating with newer stuff and requirement but following the same set principles of a Design systems.

Challenge: Google is transitioning to Material Design 3 from Material Design 2 for all their products and services. But You may notice visual may have changed but fundamentals remains the same.

It can include color palettes, typography, components, safe zones and patterns

Design Systems are based on 3 different categorisation: Atom, Molecules, Organisms.

Atom: It is the smallest part of a design system. It can be a component, types, icon or color palette. Molecule: Molecules are the building blocks of an organism. They are reusable components that can be used across different projects and mediums. Organism: Organisms are living and evolving systems where we build products and services.

All design systems or component libraries out there use these principles to build their custom Design Systems. Nowadays, these systems have extended beyond just websites and are used for branding, marketing—even social media profiles!

Takeaway: Design Systems have matured and is widely used throughout the branding of a product or services and goes beyond branding or marketing including social media profiles or posts.

Challenge: If you visit the social media profiles of any big brand, you may observe they use consistent types, colours, icons or even tone of their post.

It can be used as an internal communication tool for developers or designers

The handoffs between Product Managers, Designers and Developers is so important that it should be considered as a vital step in the development of any product. The use of Design Systems can help to reduce the number of iterations, rework and even bugs in your project.

You may have heard this before but it is important to understand that design systems are not only for designers but also for developers.

When you have a shared library of components, its always easier to iterate and make changes in one place to reflect everywhere. As a developer, it helps you to reach your full potential and focus of what matters the most - Solving problems with code.

Takeaway: Design systems help to reduce the number of iterations, rework and even bugs in your project. It helps Designers and Developers to fire on all cylinders and let them focus on what matters the most. Agreed?

Challenge: When you work with the Design Team as a developer or are otherwise involved in their workflow, try to see things from their point of view. How would they want it done?

Conclusion

It is really important to understand the branding and design guidelines to have a consistent design language to drive the things that really matters - Solving problems that matters. And Design Systems help you achieve that. It is important to understand that Design System is not just a tool to create the UI but also an approach to solve problems in the best possible way.

Google's Material Design is a great example of this. It provides the guidelines on how to build consistent and beautiful designs but also helps you solve problems in an efficient way. It also happens to be the industry leader when I comes to Design Systems.

Material Design have inspired many other companies or brands put out their own Design Systems to help teams collaborate better, build more consistent and beautiful products, and solve problems faster. Some of the companies that have followed in Google’s footsteps are Airbnb, Apple Atlassian, Spotify etc.

This is just the beginning of a series of articles on design systems. We'll take off our designer hats and dive into the fundamentals of type, color, and even create a dashboard or a landing page. The next article will be all about why, how, and when to use Typography?! So if you're interested in learning more about design systems, join my newsletter 📰🗞️ to keep yourself updated of all the content whenever published.

If you are still here and feel like this has added any value to your life, please share this article with someone who might benefit from it. If you have any questions or comments feel free to comment below. Thank you! ✌🏼