Ingenium Systems
2025
Criando consistência visual de um produto omnichannel
Contexto do ambiente
As plataformas omnichannel da Ingenium Systems evoluíram rapidamente ao longo dos anos. Diversas demandas vêm sendo implementadas em ciclos de sprints com diferentes designers e desenvolvedores. Naturalmente, em um cenário onde não existem documentações claras, a consequência é a apresentação de inconsistências de padrões visuais ao decorrer da navegação.
"Tipografia, botões, cores e espaçamentos variavam entre telas, sem um padrão definido."
Diante desse incômodo, tomei a iniciativa de criar uma documentação interna que pudesse ajudar na organização desses padrões, com o objetivo de facilitar o processo de trabalho da equipe e reduzir o retorno de alterações durante a semana.
Impactos da falta de padronização
A ausência de uma base de conhecimento gerava impactos consideráveis no fluxo de trabalho:
Interfaces inconsistentes: telas com propósitos semelhantes sendo feitas de formas diferentes (ex.: tabelas diferentes em cada navegação).
Alterações constantes: muitas demandas acabavam voltando para ajustes visuais (ex.: trocar o dropdown, porque o que foi usado era de uma versão antiga).
Desenvolvimento sem referência: telas e componentes eram criados sem fundamentos claros de estrutura (ex.: telas diferentes dos protótipos estabelecidos).
Além disso, a falta de maturidade em relação a processos e operações de design dificultava priorizar essa iniciativa como algo primário, com tempo dedicado à sua finalização.
"Por isso, era necessário adotar uma abordagem viável dentro do ritmo atual das entregas."
A criação do IngCore
O meu objetivo não era estabelecer um design system completo logo de início. Em vista dos problemas identificados, optei por criar uma documentação enxuta, respeitando boas práticas de padrões de interface e focando em captar os elementos mais utilizados no sistema.
"Criar uma base de referência para novas interfaces."
Uma base inicial desenvolvida com:
Criação de variáveis
Naming de tokens
Facilidade na exportação em JSON
Documentação organizada no Figma
Estratégia de implementação
Foi necessária uma abordagem pragmática. Ainda não possuíamos uma estrutura processual para a implementação de um design system. Por isso, optei por desenvolver a iniciativa com base no redesign de uma plataforma com menor impacto direto.
A plataforma interna se chama IngFAQ e possui menor complexidade em comparação aos demais produtos, porém contém elementos essenciais que são frequentemente replicados.
Esse ambiente permitiu definir e validar padrões. Com isso, consegui:
Mapear inconsistências existentes.
Fundamentar padrões base, como tipografia, cores e espaçamentos.
Estruturar componentes reutilizáveis com categorias de tokens claras (primitivos, alias e específicos).
Documentar os elementos no Figma, ferramenta já familiar à equipe.
Visual Design
Meu papel e aprendizados
Esse projeto foi uma iniciativa pessoal dentro do time, na qual fui responsável por identificar o problema de inconsistências, propor a criação da documentação e apresentar o novo IngFAQ para a equipe.
Além dessas tarefas, foi uma oportunidade de ampliar meu conhecimento em:
Estruturação de Design Systems;
Uso de variáveis e tokens;
Pensamento sistêmico;
Padronização entre design e desenvolvimento.
Mesmo sendo um primeiro passo dentro da empresa, a criação do IngCore me permitiu ganhar experiência prática em design systems e entender, na prática, como introduzir esse tipo de iniciativa em ambientes com baixa maturidade de design.