VIA DS - O caminho da inovação Fiscal Brasileira
Design System
Em apenas 11 meses, um designer e um engenheiro transformaram a experiência de um produto com 4 anos de estrada. O VIA otimizou fluxos, facilitou a criação de novos módulos e melhorou a rotina de design e engenharia — gerando economia de esforço, impacto em receita e evolução na usabilidade.
Cliente
V360
Serviço
Design System Visual Design UX Design
Industria
Fiscal
Date
Novembro 2023 até Dezembro de 2024
Contexto e Desafio Inicial
Durante meus quatro anos trabalhando em uma startup de automatização fiscal, vivenciei um cenário onde o produto, que hoje tem quase seis anos de mercado, era originalmente construído apenas pelo time de engenharia.
O produto: Plataforma de serviço fiscal que utiliza de automação para capturar notas fiscais, e otimizar a esteira fiscal de grandes empresas.
O problema inicial: Como a plataforma foi construída sem um olhar de design, surgiram inconsistências visuais e de usabilidade — cada tela, fluxo ou componente tinha sua própria “linguagem”, dificultando tanto a experiência do usuário quanto a manutenção pelo time de engenharia.
Quando entrei na empresa, minha missão era justamente estruturar o time de design e, em seguida, criar um design system que proporcionasse uma identidade visual coesa e escalável para todo o produto. Foi então que nasceu o VIA — o caminho (em latim, “via”) que orientaria os designers e engenheiros para uma experiência consistente.
Mapeamento e Inventário do Estado Atual
A primeira etapa prática após definir os requisitos foi realizar um mapeamento completo de tudo que havia sido desenvolvido nos três primeiros anos.
Ação: Levantamos todas as telas, fluxos e componentes que compunham o produto.
Ferramenta: Utilizamos o FigJam para organizar, visualizar e categorizar cada interface.
Descoberta: Esse processo revelou a grande disparidade entre os elementos: componentes com dimensões, cores e comportamentos distintos.
Objetivo: Esse inventário nos mostrou exatamente o que precisava ser padronizado e que, para construir algo coeso, era necessário começar do zero — reavaliar e “refazer” as interfaces com base num novo design system.
Definição das Diretrizes de Design
Com a base mapeada, começamos a definir as diretrizes que iriam orientar a criação do VIA. Essas diretrizes foram fundamentais para garantir que todos os novos elementos respeitassem os mesmos princípios, facilitando a vida dos usuários e a manutenção futura.
Otimização do Espaço
Motivação: No contexto de ingresso fiscal, o volume de informação é enorme. O layout precisava maximizar o espaço para que o usuário não precisasse abrir múltiplos campos ou consultar dados em diferentes áreas da tela.
Decisão: Todo layout deveria ser projetado para usar o espaço de forma eficiente, mantendo a densidade ideal sem sacrificar a clareza da informação.
Clareza da Informação
Motivação: Um produto de ingresso fiscal é inerentemente complexo. Usuários precisam entender rapidamente o status de uma nota, quais ações realizar e o significado dos dados exibidos.
Decisão: A escrita e as labels foram cuidadosamente trabalhadas para serem autoexplicativas; a estrutura da informação teve prioridade para que o fluxo de leitura fosse intuitivo, descomplicando o ambiente para usuários com diferentes níveis de conhecimento fiscal.
Diretriz de Cor (Jus de Cor)
Motivação: O produto originalmente era white label — cada cliente personalizava sua paleta, o que gerava inconsistência e problemas de acessibilidade.
Decisão: A partir de uma pesquisa com clientes, definimos uma escala fixa de cores para áreas críticas, como textos, indicadores e navegação. Assim, protegemos cores essenciais (por exemplo, verde para ações de sucesso, vermelho para erros) mesmo que o cliente mantivesse sua identidade nas áreas secundárias.
Essas diretrizes não eram apenas documentos internos; elas se tornaram a base para todas as futuras iterações e para a comunicação com os stakeholders.
Construção da Biblioteca de Componentes no Figma
Com as diretrizes definidas, partimos para a execução prática: criar uma biblioteca de componentes que refletisse a nova identidade visual definida pelo VIA.
Checklist e Observação
Checklist de design: Elaboramos um documento detalhado listando todos os componentes necessários — desde formulários, botões, variações tipográficas, tabelas até elementos secundários, como checkboxes.
Pesquisa de referência: Estudamos Design Systems como o Polaris e outros que funcionavam bem em produtos B2B, para extrair melhores práticas e adaptar ao nosso contexto.
Execução no Figma
Construção dos componentes: Usamos o Figma com foco no Auto Layout para construir componentes modulares e responsivos.
Iteração rápida: Em duas a três semanas, conseguimos montar toda a biblioteca. Essa fase foi fundamental para consolidar a identidade visual e criar uma fonte da verdade que serviria como base para novas interfaces.
Prova de Conceito (POC) e Validação com Usuários
Para verificar a eficácia do novo design system, montamos uma POC utilizando a tela ROM — uma das mais críticas da plataforma.
Criação de Versões
A tela original (baseline);
Uma versão com ajustes pontuais;
Uma versão com a aplicação completa dos componentes do VIA.
Objetivo: Garantir que a nova interface mantivesse a funcionalidade sem alterar o fluxo conhecido pelos usuários.
Testes de Usabilidade
Ferramenta: Usamos o Maze para realizar um Teste de Desejabilidade, onde os usuários atribuíam adjetivos a cada versão.
Participantes: Testamos com 10 clientes críticos que tinham grande influência no produto.
Feedback: A versão completa do VIA foi a preferida, confirmando que a modernização e o refinamento visual não prejudicavam a usabilidade, mas a enriqueciam.
Hand-off com Engenharia e Rollout em Ambiente de Teste
Com a POC validada, chegou a hora de alinhar o trabalho com a engenharia para trazer o VIA para o código.
Processo de Hand-off
Reuniões detalhadas: Realizamos sessões extensas para explicar os componentes, funcionalidades e documentação do design system.
Ferramenta e tecnologia: O time de engenharia usava Ruby on Rails, e o objetivo era que eles implementassem os componentes conforme os padrões definidos.
Ambiente de Teste e Estratégia de Rollout
Ambiente controlado: Inicialmente, implementamos a POC num ambiente de testes acessível a 20 clientes críticos.
Toogle: Criamos um mecanismo (Toogle) que permitia aos usuários alternar entre a versão antiga e a nova interface, minimizando riscos e garantindo segurança na transição.
Coleta de Feedback: Durante um mês, monitoramos o uso, realizamos reuniões e enviamos comunicados para entender como os usuários reagiam à mudança.
Implantação Gradual e Aceitação do Mercado
Após obter a aprovação dos clientes críticos, iniciamos o rollout para o restante dos 80 clientes.
Rollout Gradual
Notificação ativa: Mantivemos uma comunicação constante com os clientes, explicando os benefícios da nova interface e como a transição seria suave.
Monitoramento: Durante os primeiros três meses de produção, analisamos métricas de uso, feedbacks e a adesão dos usuários.
Desativação da antiga interface: Quando ficou claro que os usuários estavam confortáveis com a nova interface, desativamos o fallback para a versão antiga, consolidando o VIA como padrão.
Resultados
Adoção e Consistência: O design system permitiu que a equipe de engenharia implementasse novos módulos com agilidade, utilizando os componentes padronizados.
Redução de Erros: A consistência visual melhorou a experiência do usuário e reduziu os problemas de usabilidade.
Validação com Stakeholders: A aceitação pelos clientes e a aprovação dos stakeholders foram fundamentais para a continuidade e expansão do sistema.
Desafios, Aprendizados e Reflexões Finais
Desafios
Comunicação e Integração: A maior dificuldade foi lidar com a mudança dentro de uma startup – desde alinhar a visão entre design e engenharia até convencer os clientes da necessidade da mudança.
Aspecto Político: O processo de “vender” a nova interface para os stakeholders e clientes exigiu sensibilidade, empatia e uma comunicação clara.
Tempo e Recursos: Em um ambiente ágil como o de uma startup, conseguir desenvolver um design system robusto sem sacrificar a velocidade de entrega foi um desafio constante.
Aprendizados
Processo Contínuo: A senioridade não é estar 100% pronto ou saber tudo, mas sim reconhecer que o aprendizado e iterações contínuas são fundamentais para crescer.
Valor do Checklist: Documentar meticulosamente cada etapa (como no checklist de design) foi decisivo para organizar o trabalho e manter a equipe alinhada.
Flexibilidade: Mesmo tendo um sistema padronizado, permitir customização para atender a demandas específicas (como o aspecto white label) foi crucial para o sucesso.