PoliDS - Design System para escalar produtos digitais e reduzir inconsistência

Design system da Polibras software

2023 Digital e-commerce Brasil

Contexto

Em projetos digitais, especialmente em produtos em crescimento, é comum surgirem inconsistências visuais, retrabalho entre design e desenvolvimento e dificuldades de escalar novas funcionalidades.

Ao analisar esse cenário, identifiquei a necessidade de estruturar um sistema que garantisse consistência, eficiência e escalabilidade na construção de interfaces.

Minha atuação

Mapeamento dos componentes utilizados nos sistemas e identificação das inconsistências visuais.

Workshops para definir as prioridades na criação dos componentes com os demais integrantes do time de desenvolvimento.

Mapeamento de materiais existentes, como manual da marca e padrões utilizados pelo time de Marketing, que serviriam como base ou apoio para a criação do Design System (DS).

Definição da plataforma de documentação do DS.

Documentação das definições e padrões dos componentes, incluindo suas aplicabilidades e não aplicabilidades.

Resultado do workshop com a matriz de impacto/esforço para definir as prioridades de componentes

Problemas encontrados

Antes da criação do sistema, os principais desafios eram:

• Inconsistência visual entre telas e fluxos

• Retrabalho frequente entre design e desenvolvimento

• Falta de padronização de componentes

• Dificuldade de escalar o produto com velocidade

Esses problemas impactam diretamente:

• tempo de entrega

• qualidade da experiência do usuário

• custo de manutenção do produto

Mapeamento dos componentes nos sistemas

Objetivo

Criar um Design System estruturado que:

• Garantisse consistência visual e de experiência

• Reduzisse retrabalho entre times

• Aumentasse a velocidade de desenvolvimento

• Permitisse escalabilidade do produto

Minha decisão

Optei por estruturar um Design System baseado em:

• Design Tokens como base de consistência

• Componentização reutilizável

• Padronização de estilos e comportamentos

• Identidade visual com inspiração na identidade atual da empresa.

Essa abordagem permite desacoplar decisões visuais da implementação, facilitando manutenção e evolução do produto.

Desenvolvimento da solução

1. Definição de Tokens

Criação de tokens para:

• cores

• tipografia

• espaçamentos

• bordas

Com nomenclatura padronizada e reutilizável.

2. Componentização

Desenvolvimento de componentes reutilizáveis como:

• botões

• inputs

• cards

• elementos de navegação

Com variações e estados definidos.

3. Estrutura de Escala

Organização do sistema para suportar:

• crescimento do produto

• múltiplos fluxos

• consistência entre interfaces

• consistência entre produtos

4. Identidade Visual

Integração com o conceito da identidade da marca, trazendo:

• identidade cultural da empresa

• coerência estética

Resultados obtidos após o trabalho

Mesmo sendo um projeto estruturado de forma independente, os ganhos observados incluem:

• Redução de inconsistências visuais

• Diminuição de retrabalho entre design e desenvolvimento

• Aumento da velocidade de entrega de novas funcionalidades

• Melhoria na escalabilidade do produto

Aprendizados

• Um Design System vai além de UI — ele impacta diretamente o produto e o negócio interna e externamente

• A definição de tokens foi essencial para garantir consistência, reutilização e manutenção

• Pensar em escala desde o início evitou retrabalho futuro

• A conexão entre design e desenvolvimento foi fundamental para eficiência

Os próximos passos

Antes de finalizar o meu vínculo com a instituição, os próximos passos que estavam em execução eram:

• Evoluir o sistema para um pacote reutilizável (NPM)

• Integração direta do pacote de tokens com código (design → dev)

• Documentação para times via ZeroHeight (Link abaixo)

Visite o projeto

Obrigado pela visita