Greenstone Design System
Creditas · Design System · Product Design · 2023
Creditas · Design System · Product Design · 2023
Visão geral
Liderei a reestruturação do Greenstone Design System, revisando seus fundamentos, taxonomia e arquitetura para torná-lo mais consistente, acessível e escalável, reduzindo inconsistências e facilitando sua adoção por times de design e engenharia.
Problema
O Design System havia evoluído organicamente desde sua criação, acumulando inconsistências em fundamentos, nomenclaturas e componentes. A falta de critérios claros de aplicação, excesso de variantes e lacunas de documentação geravam decisões subjetivas, inconsistência visual entre produtos e atritos na adoção.
Além disso, por já estar amplamente em uso, qualquer mudança precisava ser feita de forma gradual e compatível com o ecossistema existente, evitando impacto nas aplicações em produção.
Reestruturar os fundamentos e a arquitetura do Design System para aumentar consistência, acessibilidade e escalabilidade, criando uma base sólida para evolução futura de componentes e interfaces.
Processo
Iniciei o trabalho mapeando os principais atritos enfrentados pelos times que utilizavam o Design System. Para isso, criamos uma cerimônia recorrente com designers e desenvolvedores, focada em entender como o sistema era utilizado na prática e onde estavam as maiores dificuldades. Esse processo revelou que a maior parte dos problemas estava nos fundamentos, especialmente cores, espaçamentos e falta de critérios claros de uso.
A partir desse diagnóstico, estruturamos a reestruturação com foco prioritário na revisão dos fundamentos, garantindo que os componentes evoluíssem sobre uma base consistente e sustentável.
Revisão da paleta de cores
A paleta existente apresentava problemas estruturais de contraste, consistência e usabilidade. Tons neutros não seguiam um mesmo espectro, cores primárias possuíam pouco contraste entre si e as cores de feedback eram limitadas, restringindo possibilidades de aplicação.
Solução
Reestruturei completamente a paleta, reduzindo o número de variantes e organizando os tons de forma mais equilibrada. Isso tornou a escolha mais objetiva, reduziu inconsistências e garantiu maior previsibilidade na aplicação das cores.
Para garantir consistência perceptual e acessibilidade, migrei a construção da paleta para o modelo CIELAB/LCh. Diferente de modelos tradicionais como RGB, esse sistema permite controlar luminosidade, saturação e tonalidade de forma perceptualmente uniforme.
Essa abordagem trouxe maior precisão na definição dos tons, melhor previsibilidade de contraste e uma base mais robusta para evolução futura do sistema.
Revisão de fundamentos
Outros fundamentos como spacing, border radius e tipografia também apresentavam excesso de variantes e ausência de critérios claros.
Reestruturei esses fundamentos reduzindo significativamente o número de opções e definindo progressões consistentes e regras objetivas de uso. Isso reduziu a carga cognitiva na tomada de decisão e aumentou a consistência entre interfaces.
Essa simplificação também eliminou fundamentos que não agregavam valor estrutural, tornando o sistema mais eficiente e fácil de manter.
Evolução de componentes
Com os fundamentos reestruturados, revisei os componentes existentes e habilitei a criação de novos padrões mais consistentes.
Os novos fundamentos permitiram maior flexibilidade, melhor previsibilidade de comportamento e uma base mais sólida para evolução do sistema.
Resultado
A reestruturação transformou o Design System em uma base mais consistente, acessível e escalável.
As mudanças reduziram inconsistências, melhoraram a previsibilidade na construção de interfaces e facilitaram a adoção pelos times.
O DS passou a oferecer fundamentos mais claros, componentes mais robustos e uma arquitetura preparada para sustentar a evolução dos produtos a longo prazo.
