Design Systems: Why Use Them, and How They Integrate UI/UX Designers with Devs

As a consultant at Gorilla Logic, you know you have the chance to work side by side with different professionals and be a part of great Agile teams that deliver high-quality, scalable products in small, consumable increments. No matter what project you work on, every team is composed of people with different specialties, and there is a high probability of it growing over time. UI/UX designers, technology teams, and product owners work closely to ensure that the application is in lockstep with the client’s priorities, the users’ goals, and the team’s technical architecture.

Aspects such as multidisciplinary teams (with enormous growth potential), the Agile framework, and high-quality, scalable products, have allowed us, as UI/UX designers, to create a Design System that complements this awesome way of working. A Design System works as a common language for teams and allows us to establish guidelines and gather other design resources from the beginning of a project. Creating a Design System in the early stages of a project speeds up the design and coding process, integrates all the people involved, and improves product consistency.

What is a Design System, and Why Use One?

A Design System is a visual language formed by components that can be reused and combined differently with each other. This concept is not new; it originated back in the 60s as a way to make the programming process more consistent and efficient. It was originally called “Component-Based Development,” but maybe you’ve heard about it before under another name such as “Atomic Design,” “Design Language,” or “Modular Design.” No matter what you call it, this concept helps everyone understand why things are designed the way they are.

Although “Component-Based Development” suggests a simple series of components, it is more than just a UI kit; it defines the visual and behavioral base of your application, allows for better communication and collaboration between designers and developers, and gives the team the ability to iterate more easily and smoothly.

The collaborative design process often begins by defining a creative direction, independent of functionality or requirements. We start exploring the visual tone by experimenting with typographies, colors, and UIs that extend the brand’s Design System. Once priorities are mapped out and a design aesthetic is agreed upon, designers iteratively build out core hi-fidelity screens along with component libraries, with a focus on development and production. At the same time, we are constantly updating team backlogs with new requirements and design recommendations. As you can see, this process requires collaboration, communication, and documentation of processes, visual components and behaviors, as well as internal and external resources and the client’s best practices.

At Gorilla, as mentioned before, designers are integrated into the Agile Sprint Cycle; from daily stand-ups to weekly planning sessions, we are part of the whole process. Our participation as designers allows for design concepts to be defined and incorporated in a timely matter, improving both the quality of the work and the working time frame.  

How Does a Design System Benefit the Whole Team?

If at this point you are still asking yourself why you should use a Design System instead of using another method, an existing theme, or just defining a UI kit, the answer is simple: there is no Design System, UI kit, or theme that fits all products. Having a custom Design System designed and developed specifically for a company will ensure the success of a better user experience and team performance. Time investment will be needed at first, but this will save more time and money later thanks to the reusable component library and predefined visual style, in addition to the analysis and full discussion of goals, main user “pain” points, and improvements taken into consideration for development.

Here are a series of benefits that a Design System can give your application and company:

• Knowledge of the client’s requirements and priorities and the users’ needs (i.e. goals and pain points). This helps us define a clear working path; the big picture and the product vision are defined and visible for all.

• Consistent, cohesive, and thoughtful experiences at scale. The product is able to evolve in a natural and easy way, looking towards the future without the need of recreating. 

• Centralized documentation, a common component library, and trusted resources for teams of all sizes. The design, development, and QA processes are sped up and improved by establishing a visual, up-to-date guide alongside code and defining common design solutions for all teams.

Applying a Design System is good for business and workflow. It adds value to the product and the client’s brand, which is good for the team, the company, and the client. To reap the same benefits, try defining a Design System for your next project, making sure to involve everyone on your team: UI/UX Designers, front-end and back-end developers, product managers, tech leads, QA specialists, and content strategists. Each one of them can give you insight from their specific area of expertise. 

So remember: a Design System is more than just a component kit, and the fact that it is founded on collaboration is what drives us to choose it as a powerful resource. It allows us as UI/UX designers to better integrate with the team, have better communication with all teammates (especially developers), and have a complete understanding of the client and the project’s whole design/development process. A Design System is a product that your entire team has to maintain and create. It isn’t stationary; it evolves with your project.

Conclusion

Implementing a Design System will not only help you and your team have a consistent, robust, flexible, and accessible product from the UI/UX perspective, but it will also better integrate the team by establishing a shared design vocabulary and permitting better collaboration among designers and developers. It will also help solve and simplify common problems by providing everyone with knowledge about the design process and giving them access to the same resources. 

Having a designer on your team and applying a Design System to your project is more than just having one more person working on the project; it means adding more value to the product and, therefore, to your company. An integrated team that works constantly together and cares about the client’s priorities, users’ goals, and technical and design aspects will be successful at turning a vision into something tangible, user friendly, and high quality in a fast and efficient way. 

So if you don’t have a UI/UX designer on your team yet, what are you waiting for?