O Design System é um sistema de grande importância para agilizar e padronizar o desenvolvimento de um produto digital, contendo elementos reutilizáveis e sua documentação de uso.
A Marsha 2.0 foi construída pelo time de UX/UI Design da Lacrei Saúde, que durante sua construção contava com 2 Leads e 5 UX/UI Designers. Os elementos bases (foundations) e componentes foram divididos entre os integrantes.
Embora já tivessem tentativas anteriores de construir um Design System completo, muitos elementos bases e componentes não contavam com documentação ou a documentação estava defasada. Nesse estudo de caso falarei apenas das documentações que ficaram sob minha responsabilidade.
Todas as documentações foram incluidas na página da Marsha no Figma e no Notion. A Lacrei Saúde tem a acessibilidade como um de seus valores fundamentais, por esse motivo construimos e documentamos todos os elementos e componentes considerando a acessibilidade. As documentações contam também com o modo de uso e a anatomia/handoff no caso dos componentes.
Iniciei pela cor por ser um dos elementos bases, ou seja, um dos elementos importantes para que outros sejam construidos.
Como o produto já estava perto de ser públicado, a orientação foi seguir as cores aplicadas em tela, procurando uma forma de padronizá-las. No início a plataforma dividia seus voluntarios por jornada, o que fez com que algumas inconsistências ocorresem. Enquanto documentava a cor me deparei com diferentes cores em elementos ou componentes que tinham a mesma função, então parte importante da tarefa foi decidir as cores que se tornariam padrão. Essa documentação possibilitou uma melhoria de consistência das cores em 58% das telas da plataforma.
Um dos grandes desafios da primeira task foram os tokens. Embora já tivesse ouvido falar sobre Design System, até então nunca havia trabalhado com um e foi legal aprender mais sobre token enquanto colocava os aprendizados em prática. Para executar essa tarefa pesquisei muitos conteúdos sobre o assunto e consultei alguns Design Systems.
Tokens: São variáveis que trazem informações sobre os elementos base e seus nomes são criados de acordo com seu contexto. Por exemplo, sua empresa utiliza uma determinada cor para informação, ao invés de você chamá-la pelo código HEX você pode nomear essa cor de acordo com sua função, podendo ser chamada de "color-info". A utilização de tokens aumenta a consistência do seu produto, o torna de fácil manutenção e melhora a comunicação entre o time.