A importância e implementação de um Design System num contexto multimarca, multiproduto e multidimensão

Abstract

Um dos fatores críticos de sucesso das organizações é a sua capacidade de entrega de soluções num time to market cada vez menor, dado o contexto volátil e complexo em que atualmente vivemos e a clientes cada vez mais informados e exigentes. Adicionalmente, e face ao exposto, um dos maiores desafios no desenvolvimento de produtos digitais, principalmente em organizações com vários produtos e marcas, é manter a consistência de identidade, a consistência de marcas e de experiência. Para além do crescimento das empresas e equipas de produto, as próprias equipas mudam e crescem, o que torna este processo ainda mais complexo, dada a necessidade de handover e onboarding das pessoas envolvidas naquelas que são as guidelines para desenvolvimento. Sendo assim, é importante estabelecer regras e sugestões para a utilização dos fundamentos, componentes e elementos nos produtos, de forma a respeitar e garantir aquilo que é a identidade das marcas, produtos e sobretudo a consistência da experiência do cliente enquanto peça central em cada decisão de desenvolvimento. O Design System apresenta-se assim como um produto que serve outros produtos, que guia o desenvolvimento, que permite a reutilização de forma consistente e sobretudo um elemento que vive da colaboração de todas as equipas que trabalham na centralidade do cliente. A metodologia aplicada neste estudo tem como objetivo explicar e analisar a importância de um Design System e como implementar com as melhores práticas de UX/UI. A revisão da literatura aborda a introdução de todas as tecnologias usadas e todas as referências de Design Systems, o papel e responsabilidades dos designers e desenvolvedores, demonstrando as métricas usadas para a definição de regras e a implementação. No âmbito deste trabalho foi igualmente desenvolvido um projeto de criação de um Design System para a empresa MC SONAE, em que são mostrados todos os processos de desenvolvimento do código para componentes que compõem o DS, os processos de brainstorming e a realização dos componentes em design e criação da documentação. Palavras-chave: UI/UX Design; Design System; CSS; Figma; Outsystems; MC SONAE

One of the critical success factors of organizations is their ability to deliver solutions in an increasingly shorter time to market, given the volatile and complex context we currently live in and increasingly informed and demanding customers. Additionally, one of the biggest challenges in the development of digital products, especially in organizations with several products and brands is to maintain consistency of identity, consistency of brands and experience. In addition to the growth of companies and product teams, the teams themselves change and grow, which makes this process even more complex, given the need for handover and onboarding of the people involved in those guidelines for development. Therefore, it is important to establish rules and suggestions for the use of foundation, components, and elements in products, in order to respect and guarantee what is the identity of brands, products and, above all, the consistency of the customer experience as a central part of each decision. The Design System thus presents itself as a product that serves other products, that guides development, that allows consistent reuse and, above all, an element that lives from the collaboration of all the teams that work in customer centricity. The methodology applied in this study aims to explain and analyze the importance of a Design System and how to implement it with the best UX/UI practices. Starting with the introduction of all technologies used and all Design Systems references, the role and responsibilities of designers and developers, demonstrating the metrics used for rule definition and implementation. Within the scope of this project, a project was also developed a project to create a Design System for the company MC SONAE, in which are shown all the code development processes for components that make up the DS, the brainstorming processes and the realization of components in design and the creation of documentation. Keywords: UI/UX Design; Design System; CSS; Figma; Outsystems; MC SONAE