SaaS B2B para gestão de viagens corporativas
Situação
Um desafio de redesign para um software de gestão de viagens corporativas. O objetivo era modernizar a home/dashboard principal, garantindo uma experiência clara e escalável.
O produto original tinha uma arquitetura confusa, baixa hierarquia visual e ausência de padrões de design documentados.
Tarefa
Ações
->
->
Definição de fluxos principais solicitados.
->
Prototipagem das telas principais em alta fidelidade
Criação de core tokens e estilos globais de UI.
Pesquisei plataformas B2B e padrões de UI para dashboards e fluxos de aprovação. Usei referências de mercado e ferramentas de “vibe-coding” (GPT + Lovable) para acelerar iterações e validar direções visuais.
Criar guia de estilo
Mapeei padrões de fontes, espaçamentos, grids, efeitos recorrentes e iconografia para definir a base do UI Kit, garantindo consistência entre as telas e fluxos.
Cores primitivas
Defini tokens de cor primários e secundários, documentando variações de estado e contraste. As decisões visuais foram baseadas em padrões de legibilidade e acessibilidade WCAG.
Atoms components
Construí os primeiros átomos do sistema — botões, inputs, toggles e selects — definindo variáveis de espaçamento, raio e tipografia para facilitar escalabilidade.
Major components
Evoluí para componentes compostos (cards, tabelas, modais e sidebars), assegurando padronização de camadas, tokens e hierarquia visual dentro do Figma.
Por que?
Percebi inconsistências visuais e falta de padronização nos componentes do sistema, o que dificultava o alinhamento entre times e aumentava o tempo de entrega de novas telas.
Para que?
O objetivo foi construir uma base sólida de design system, com tokens e componentes reutilizáveis, garantindo escalabilidade, consistência visual e maior eficiência no desenvolvimento.
Resultado
Com os átomos e componentes consolidados, reduzi o tempo de iteração e prototipagem, além de aumentar a coerência visual e a clareza entre os fluxos do produto.
Definição de core workflows
Mapeei e construí os fluxos principais da aplicação, definindo etapas, regras e interações para representar o funcionamento real do sistema e apoiar decisões de produto.
Configurar membros aprovadores
Defini o processo de aprovação de viagens, indicando quais membros precisavam autorizar solicitações antes da reserva.
Configurar políticas de viagem
Estabeleci as regras que determinam quais viagens podiam ser reservadas sem aprovação e quais exigiam validação prévia (ex: voos acima de um valor limite).
AS IS
Prototipagem em alta fidelidade
Tela de políticas atual
TO BE
Home - Dashboard projetado
Tela de políticas projetada
Validação final
Realizei uma rodada de testes focada na harmonia visual, consistência e clareza funcional do produto.
Além da revisão de padrões e tokens, validei fluxos críticos com o gerente de produto para garantir alinhamento entre usabilidade, viabilidade e objetivos de negócio.
O resultado foi um sistema visual escalável, que reduziu retrabalho e aumentou a confiança da equipe nas próximas iterações.
Resultados
Clareza e consistência
aprimoradas
A nova linguagem visual reduziu ambiguidades entre telas e reforçou a coerência da experiência em fluxos complexos.
Redução de 40% no
tempo de iteração e revisão
Com tokens e componentes validados, a equipe pôde evoluir novas telas de forma mais ágil e previsível.
Base sólida para
evolução do produto
O guia de estilo serviu como estrutura para expansões futuras e otimizações de jornada, facilitando testes A/B e iterações em novas features.