CRIAÇÃO E GERENCIAMENTO DE DESIGN SYSTEM

Escalando a criação de interfaces e unindo Design e Engenharia.

Design System Design Tokens UI Design Governança Notion Colaboração Técnica

Empresa

Nelogica

Minha Função

Product Designer (UX/UI)

Resumo de Impacto

Redução significativa no tempo de entrega de novas interfaces, otimização de código (eliminação de estilos redundantes) e criação de uma linguagem única (Design Tokens) para democratizar o acesso entre os times.

01 / CENÁRIO

Contexto e Desafio

A Nelogica é uma gigante de tecnologia com mais de 500 funcionários e grandes equipes trabalhando simultaneamente em diversas plataformas. Durante o desenvolvimento de um novo produto focado no mercado de criptomoedas, realizei uma observação transversal nos outros produtos da empresa e identifiquei uma lacuna crítica: a ausência de um Design System estruturado.

O Problema Central

Sem um Design System estruturado, o novo produto estava fadado a herdar as mesmas limitações e gargalos de eficiência já enfrentados em outros grandes produtos da empresa. Vi ali uma oportunidade estratégica: construir uma fundação do zero que servisse como business case (case de sucesso) para provar o valor em toda a operação da Nelogica.

Para resolver isso, conduzi diversas conversas estratégicas com desenvolvedores, o PO e o Líder de UX. Como o produto ainda estava em construção, vi a grande oportunidade de criar um Design System do zero, focado na redução do tempo de criação e na melhora da comunicação técnica — e, com esse alinhamento, conquistei o apoio e a aprovação das lideranças para iniciar o projeto.

02 / ESTRATÉGIA

Minha Atuação e Processos

  • Auditei e mapeei inconsistências Realizei um levantamento minucioso de todos os artefatos de interface (cores, tipografia, espaçamentos, botões e modais) na etapa de descoberta.
  • Otimizei processos já existentes Em vez de recriar a roda, analisei iniciativas prévias (guias de estilo do design e códigos reutilizados pelos devs) e reaproveitei essas bases para acelerar as definições do novo produto.
  • Padronizei a linguagem técnica Defini a arquitetura de Design Tokens (variáveis semânticas). Estabeleci regras claras de nomenclatura (ex: brand-primary-color) para que o desenvolvedor soubesse a função exata do componente apenas lendo seu nome.
  • Democratizei a governança Criei e organizei a documentação oficial do Design System no Notion. Isso permitiu que qualquer colaborador, atual ou futuro, acessasse e compreendesse os princípios que guiam a construção da interface.
03 / SOLUÇÃO

A Nova Experiência

Tela da Solução
04 / VALOR GERADO

Impacto de Negócio

Tempo de Construção
Mais
Ágil

Encurtamento drástico no tempo de desenvolvimento de telas. Passaram a ser montadas em blocos consistentes.

Comunicação
Handoff
Fluido

A ponte entre Design e Engenharia foi consolidada. As equipes passaram a falar a mesma língua técnica.

Experiência (UX)
Foco no
Usuário

Com estilos padronizados, a equipe parou de "empurrar pixels" e focou em aprimorar de fato a jornada do usuário.

05 / APRENDIZADOS

Lições do Projeto

01 / DESIGN OPS E ESCALABILIDADE

O design só escala de verdade quando existe governança clara e um alinhamento operacional contínuo entre designers e engenheiros de software.

02 / ACESSIBILIDADE DESDE A BASE

A acessibilidade não deve ser tratada como uma etapa final de validação, mas sim como um requisito fundamental de todos os componentes e tokens desde a concepção.

03 / DOCUMENTAÇÃO COMO PRODUTO

Um Design System sem documentação viva é inútil. Centralizar regras no Notion e sincronizar guias com a engenharia garante a aderência total da equipe.

DESIGN & CODE BY MARCO VINICIUS
plugins premium WordPress