Design October 7,  2021

The secret sauce behind great digital products: Design Systems

Sofía Acher   •  Communication Specialist   •  Linkedin
MC
Matías Canobra   •  Full Stack Designer   •  Linkedin
GV
Gonzalo Vilar   •  Design Strategist Lead   •  Linkedin

Why is a design system important for your organization? Investment, consistency, and scalability. Let us delve into them one by one. A design system really helps to save money in the development process in the long term. Why? Well defined businesses’ requirements allow designers and developers to build faster and better. Levitt says in “Design systems will change UX/UI jobs” that without a component library or design system, someone has to visually design each state of each screen (2020). This slowens the process of design and development a lot. The design system provides order, guidance, helps and improves teamwork, and many other benefits which we will delve into later in the article. As we use validated components, we reduce the cost of maintenance in the long term. The investment may be higher at first when the learning curve is more steep, but in the long run, the savings are greater. In addition to  this, it is also advantageous for product’s consistency and scalability. Big companies, that have a wide variety of products and services, in which digital products are highly valuable for their businesses, need reusage practices to agile development process and favour consistency. 

Where does the design system come from?

Design systems are related to brand manuals. Nasa’s or New York Metros’s brand manuals are pretty popular, they included guidelines that the advertising agency or the newspaper then used and followed. The design system is the digital transfer of what used to be  the brand manual in print paper, posters, and everything that was part of ‘the physical world’.
Ultimately, those brand manuals are usage manuals that set minimum rules in order to maintain brand identity and on how to implement different elements. When graphic designers did something in press print, they needed to know where their brand ‘lived’. In physical, tangible products in which the brand’s elements needed to be printed, it should be known which colours would be used to represent it. The brand manual answered all of these questions and more, the design system is its translation to ‘the digital world’. They are the single source of truth for development; that enables one to have live documentation that grows as new components or user stories need to be implemented.

There are symptoms that can be found inside an organization’s needs: scalability and patterns’ inconsistencies in an app’s flow. This is, for instance, different colours or sizes in buttons, unestablished hierarchies and fonts, and undelimited tokens. Inconsistencies are really usual in buttons and even more in colours. To know if you are having them, there is a website in which one can insert the link to one’s digital product -for example your website- and it shows all the styles’ and colours’ variations. The design system can be the solution to a problem you may be having and not realizing you are having, so even if you think you do not have inconsistencies, checking will do no harm and may help you.

What is the design system and what should be taken into account?

A design system has a company’s or brand’s reusable components, elements, and style guides. It is its language: how it looks, feels, and sounds, the brand’s voice (Levitt, 2020). It  is a living document constantly shared between designers and developers. It is not only a styles’ guide created exclusively by designers, developers have to create code for each component. This is why the programs and methods we use are really important. Designers need to design already with a development’s mindset, which is something that changed a lot in the role. They have to start from understanding the base grid, the design’s principles, what types of devices to use, what are the colours or texts to use, what type of icons and how they will be developed. It is all translated into code, so the designer needs to take into consideration the limitations the code may have at the time of designing, so that the designs can then be implemented. They have to consider the constraints or limitations every technology has, when developing something for Native iOS, Native Android, or React Native, which have their own styles, as well as in which device it will be used, even if they are designing for Data Visualization in which other players take part, such as Tableau. This has many restrictions in UI, on what can be done and how it recovers the information. This, as well as Docker and many others, are interfaces that have their own design system or principles in some or other way. 

Ultimately, a design system is a result that has to be cohesive, dynamic, reusable, and simultaneously maintained by designers and developers. This is why it is a single source of truth, created by a team, it has to be a project itself. More than a components’ guide, a design system offers answers to how we do things and why we do them that way. It sometimes even includes a voice tone, in which UX writing takes part, that indicates how to communicate that voice tone, how to talk to a specific target audience, how the writing should be like, and how call to actions have to be. As well, it contains tokens (colours, typography, icons, illustrations, the grid, even a site map related to the information’s architecture) and components (buttons, inupts, pagination, navigation, alerts, aspects related to data visualization). There is not only one way or template to carry this out, as mentioned before it is a ‘live’ document, we need to have the flexibility and understanding that each design system is a new challenge. 

From the conceptual perspective, we can find everything related to the atomic design,we start designing an element and tokens generate a component. For example: A button is a rectangle that has colour and text. What size will that text have? What thickness will it have? How will the colour enable the user to differentiate that it is an action and not another text? These have to be thought about and taken into consideration. Afterwards, all these components will generate a module, and those modules will generate a template or an interface. These are, briefly and simply put, the principles of atomic design by Brad Frost. 

The added value the Design System brings

There is a lot of information on the conceptual part nowadays, and fortunately there is a lot being deepened. There are many ways to make the conceptual part closer to the code. There is an open source tool named Storybook that allows  designers and developers to build UI components and pages in isolation, they can work together uploading the code of each designed component that is going to be reused later. It offers independence between the different areas of the team. The designer can work in the design system, then communicate with the developer, maybe do it in a small team, and then the rest of the developers do not need to ask the designer what colour they will use, how to obtain something, how to do a modal or how to do an alert. “I don’t need to pass my work to the next step on the assembly line and have someone else do the aesthetics on the entire screens or pages” (Levitt, 2020). Everything is given in the design system, all they have to do is enter and check how it is done. This is fundamental for decision makers. For designers and developers, this process is a must, but for product owner’s it is beneficial for the ROI. Design systems save time and money; only by suppressing code redundancy, more than 20% of a developer’s time can be recovered. If we estimate 75 dollars an hour for a developer in a team of 10 developers, 2.5 hours per week would be saved, which results in an annual saving of 97500 dollars. At the beginning the learning curve may be more pronounced but then it becomes more stable, reduced to less development hours, less design hours, less hours of making decisions and developing a flow. 

At Onetree we have designers and developers focused on design systems. The relevance of this lies in the fact that there is a community of practice because there are many different ways to build a design system, so we have to share knowledge and come to terms on which are the best practices. This is important to educate and raise awareness in the product owner on all this process and for product development. One of the main advantages the design system offers is that it shortens the gap between Development and Design. When elements are part of a design system in a certain way, when the designer works together with the developer, and thinks about design with code in mind, they make the final product pixel perfect. This is possible, if that synchronization between Design and Development happens and good practices are generated. These areas must work together, because they are two domains that step on each other and cannot be separated; the design system is “the product’s flag in common” and what joins everyone together. There is no secret formula other than learning, sharing, and generating a team culture that understands the importance of design systems.. 

References

Levitt, D. (2021, 13 septiembre). Design Systems Will Change UX/UI Jobs

Delta CX. Medium. https://medium.com/delta-cx/design-systems-will-change-ux-ui-jobs-e29f1d978553 

Sofía Acher Communication Specialist   •  Linkedin
MC
Matías Canobra Full Stack Designer   •  Linkedin
GV
Gonzalo Vilar Design Strategist Lead   •  Linkedin