Design System: What it is and why your company needs one

Yasmim RestumYasmim Restum - 17 de September de 2021.

Seen as a competitive advantage for companies with a digital presence, the Design System is now a necessity for brands that want to impact the customer. Zoox talked to Lead UX, Otávio Ribeiro, and Senior Front-End Developer, Leo Metzger, to better understand how a company can build a ravishing DS.


"Design System is not a project, it's a product serving other products," Nathan Curtis, founder of Eightshapes, once said.


Design Systems, although not very recent ideas, end up being news to many companies working with digital products, sales in online environments or even digital applications to offer their services.


"You can't talk about digital branding and not mention Design Systems," said Otávio Ribeiro, Lead UX at Zoox Smart Data.


"If your company is present in the digital field, having this synergy between the Design System and the products, brand values is a great differential," he added.


The Design System (DS) has become a competitive advantage. And it appears as a solution when it comes to fast and easy navigation for final customers, or even to define the brand's visual identity and make it recognizable to the eyes of anyone.


And when we think about this concept of "being recognizable to the eye of the beholder", several brands come to mind, right?


And, probably, all these brands have a structured DS, a team that thinks this vertical of the business on a daily basis and defines partners, new projects, and marketing based on this system.


As Otávio well defined, "DS is a library that elevates the brand manual to another level in the digital environment. It is a big toolbox for all the products that Apple, Google, Uber, and even smaller companies have. That's because it makes it easier to build other products and allows the customer to recognize your brand from a stronger visual identity."


But then, what kinds of companies need to consider having a Design System?


  • Companies that have a digital presence
  • Businesses that have a more mature, defined brand and values
  • Companies that want to create one or more digital products


For Otávio, these 3 guidelines are fundamental for seeking investment in a Design System, since the system will depend directly on a more advanced understanding of the brand. If the business niche puts the company in a position where the digital presence comes through digital products, it makes perfect sense to invest in a DS, in the Lead UX's view.


Senior Front-End Developer at Zoox, Leo Metzger, argues that the most important thing is for the brand to be able to explain what problem it wants to solve from the Design System.


"The company may want its own visual identity and a very robust design system, which is expensive and requires more investment; or it may have a visual identity, but not so robust and can use a free generic DS, but without building such a strong visual identity," he reasoned.


Drawing a parallel, it is easy to understand the importance of a DS when thinking about that chain store you like the most. The experience in every store will be the same and always enjoyable because it was strategically designed to be that way!


"There are places that have visual consistency and this impacts the client. In drugstore chains, for example, they have the same lighting, colors, organization of the environment, the salesperson's treatment, and even if they remove the façade, the logo from the front, you would know that you are in that drugstore. With the Design System it is the same thing, only in the digital environment. When you enter a Zoox environment, for example, all the information architecture speaks amongst each other," explains Metzger.


At Zoox, everything from navigation, to the color palette, to the style of the buttons, all go through the same thread, which is our Design System. 


When applying solutions for B2B clients, Zoox takes all the harmony and ease of use of its system to the client's environment, also giving the option to customize the platform so that the company can leave everything with the face of its own brand.




In summary... these are the


6 Main advantages of having a Design System


  • Strong and assertive visual identity

  • Much faster error correction

  • New products created already following a single visual unit

  • Optimized user navigation

  • Cost reduction of future projects

  • Improved user experience


Very cool, but where to start?
What is necessary for a company to develop its own Design System?


After realizing the need for a DS, to start the creation it is necessary to assemble a qualified team that understands the company's needs and business objectives.


1 - Assemble a team

At least one experienced designer and one experienced front-end developer need to be involved in this construction. Besides these professionals, a visual designer, designers focused on UI and UX are excellent contributions.


"But define your goals well and choose good professionals," Metzger advised.

For the developer, you need to look out for programmers who are creative and can convey the needs of the brand.


"Technology is something raw. And the person who makes the possibilities and the brand identity blossom is the one who programs. You always have trendy systems and the most beloved ones, but the most valuable thing is to find a professional who shows creativity."


2 - Talk to the team


Your team that will develop the Design System needs and should do a series of interviews with your company, with the professionals who most need to optimize their tasks with the DS.


Understand the pains of the company, the existing products, how they will be affected by the design system. In addition to listening to stakeholders and users of the products.

3 - Define principles and development


The principles will emerge from the observation and questions that arise when facing the main challenges and objectives of the company. The DS team needs to understand what is the main purpose of the product. 


And align all this with the developers and programmers, who are responsible for materializing the components of the DS library. This co-creation will allow for no technical and coding rework.

4 - Introduce the Design System


A raw knowledge, without explanation, is worth nothing, right?  


With the library created and defined, it's time to architect an accessible document, with all the usage information, what can and can't be done, to pass on to the other members of the company.


If everyone is a brand ambassador and the Design System is one of the pillars, everyone needs to know how to work in accordance with this "Brand Manual 2.0".


It is important to emphasize that implementing a design culture does not happen overnight, it takes a daily effort to engage members of the company, either through dynamics, intranets, communication channels, or even periodic inspections of the content of the products created.


When closing partnerships with other brands, it is important to understand if they, like Zoox, have a structured DS and value products and solutions that are "eye candy", that is, enjoyable to use, to have contact with, to get involved with, and that are always connected to the main market trends.





Free Materials