top of page

Design System

Estruturando decisões para escalar consistência em produtos digitais

Atuei na criação e evolução de Design Systems em diferentes contextos, desde produtos construídos do zero até cenários com bases pré-existentes pouco estruturadas.


Entre eles:

  • HDI Seguros

  • Deepo

  • Sebrae

  • e.delivery (mobile e desktop)


Independentemente do contexto, a abordagem partiu de um princípio central:

Design System não é sobre componentes. É sobre como decisões são tomadas.

CONTEXTO E DESAFIO

Os produtos apresentavam um padrão recorrente:

  • interfaces inconsistentes entre fluxos e plataformas

  • variações não controladas de componentes

  • ausência de critérios claros para decisões de design

  • retrabalho frequente entre squads

  • curva de aprendizado de conhecimento do produto mais difícil

O problema não era a falta de componentes, era a falta de estrutura para tomada de decisão.


LEITURA E DIAGNÓSTICO

Antes de estruturar quaisquer sistema, conduzi leituras aprofundadas dos cenários existentes em cada contexto.


Isso incluiu:

  • mapeamento das interfaces atuais

  • análise do comportamento dos componentes em diferentes contextos

  • identificação de padrões inconsistentes

  • levantamento de oportunidades de padronização

  • entendimento do processo existente para criação de novos componentes

Além disso, o alinhamento com engenharia foi essencial para:

  • identificar soluções já existentes

  • garantir viabilidade técnica

  • estruturar um sistema integrado ao desenvolvimento


O objetivo não era apenas organizar, mas entender como o design realmente acontecia no dia a dia.


Mapeamento das interfaces para identificação de padrões e inconsistências.
Mapeamento das interfaces para identificação de padrões e inconsistências.



ESTRUTURAÇÃO DO DESIGN SYSTEM

A partir do diagnóstico, estruturei os sistemas com foco em reutilização, clareza e escalabilidade.


Incluindo:

  • criação e padronização de componentes

  • definição de comportamentos e variações

  • organização de bibliotecas

  • estruturação para facilitar uso e evolução


Cada componente era validado em diferentes contextos, plataformas e tamanhos antes de ser incorporado ao sistema, garantindo consistência real de uso.


Esse processo foi conduzido em conjunto com engenharia, definindo regras técnicas e garantindo viabilidade na implementação.



Apesar das diferenças entre os produtos, mantive uma abordagem consistente: entender o contexto, mapear padrões reais e estruturar o sistema com base em decisões, não apenas componentes.


GOVERNANÇA E MODELO DE DECISÃO

O principal diferencial foi a definição de como decisões deveriam acontecer dentro do sistema, adaptando as diretrizes conforme o contexto de cada produto e time.


Estruturei:

  • critérios claros para criação vs reutilização

  • definição de padrões de comportamento e uso

  • templates para novos componentes (hierarquia, tamanhos, regras e limitações)

  • alinhamento com engenharia através de handoff estruturado por componente

  • acompanhamento do uso do sistema nas entregas do dia a dia

  • envolvimento do time durante a construção, garantindo alinhamento coletivo


Isso reduziu decisões isoladas e trouxe previsibilidade para o design.


Fluxo de decisão para criação e evolução de componentes.
Fluxo de decisão para criação e evolução de componentes.

Além da estruturação, o Design System passou a atuar como ferramenta de alinhamento entre design, produto e engenharia, influenciando decisões de priorização e evolução do produto.




IMPACTO

A estruturação do Design System trouxe ganhos consistentes:

  • redução de retrabalho entre squads

  • aumento da previsibilidade nas entregas

  • maior autonomia dos designers na tomada de decisão

  • aceleração na construção de novas features



Aplicação em diferentes contextos

Os Design Systems foram desenvolvidos considerando as particularidades de cada produto, desde plataformas com foco transacional até interfaces mais densas e informativas.


HDI Seguros Desktop: Foco em consistência visual, padronização de feedbacks, escalabilidade de componentes
HDI Seguros Desktop: Foco em consistência visual, padronização de feedbacks, escalabilidade de componentes

Deepo Desktop: Foco em consolidação de padrões visuais, organização e evolução da biblioteca, estruturação para crescimento do produto
Deepo Desktop: Foco em consolidação de padrões visuais, organização e evolução da biblioteca, estruturação para crescimento do produto
e.delivery Portal B2B Desktop: Foco em hierarquia clara de informação, organização de layouts mais complexos, componentes voltados para produtividade (tabelas, filtros, formulários)
e.delivery Portal B2B Desktop: Foco em hierarquia clara de informação, organização de layouts mais complexos, componentes voltados para produtividade (tabelas, filtros, formulários)

e.delivery B2C mobile: Foco fluidez de jornada, clareza em estados, velocidade de decisão, adaptação para contexto whitelabel
e.delivery B2C mobile: Foco fluidez de jornada, clareza em estados, velocidade de decisão, adaptação para contexto whitelabel
Sebrae Mobile e Desktop: Foco em acessibilidade, clareza de informação, diversidade de usuários
Sebrae Mobile e Desktop: Foco em acessibilidade, clareza de informação, diversidade de usuários


Mais do que organizar componentes, o Design System estruturou a forma como decisões são tomadas, criando uma base para escala, consistência e evolução contínua dos produtos

Itens relacionados
bottom of page