Modernizando um Sistema de Varejo de 30 Anos para uma Experiência Tablet-First
TIPO DE PROJETO
Sistema Legado
Ferramenta Interna
CONTRIBUIÇÃO
Protótipo de alta fidelidade
Mapeamento de fluxos legados
Refatoração de interface
Handoff para engenharia
MEU PAPEL
UX/UI Designer
RESULTADO
Refatoração de fluxos críticos da loja
20+ funções de SWO reorganizadas
USUÁRIOS-ALVO
Funcionários da loja
PERÍODO
2026
Consultores de serviço
Times de operação em loja
VISÃO GERAL
Resumo
Redesenhei fluxos críticos de um sistema interno de varejo automotivo com mais de 30 anos, durante sua migração de um executável desktop para uma experiência browser-based e tablet-first.
O trabalho começou como uma modernização de UI, mas as revisões com stakeholders mostraram que uma atualização visual não resolveria o problema real: fluxos críticos estavam sobrecarregados, difíceis de escanear e ainda dependentes de comportamentos legados.
Minha contribuição focou na refatoração de telas complexas, melhoria da hierarquia, reorganização de ações, aplicação de padrões de design system e alinhamento de cada decisão com as restrições de engenharia.
Contexto
O produto era um sistema interno usado por equipes de lojas de varejo automotivo para gerenciar vendas, serviços, peças, sourcing, ações de inventário e operações diárias da loja.
O sistema original havia sido usado por décadas como uma aplicação desktop. A nova direção era migrá-lo para uma experiência browser-based em tablet, tornando o produto mais fácil de atualizar, escalar e usar em loja.
A principal restrição era que o comportamento do backend e a lógica central de negócio estavam, em grande parte, fixos. Com mais de 400 telas, pouca documentação e desenvolvimento já em andamento, o redesign precisava melhorar a usabilidade sem quebrar as regras operacionais por trás da interface.
%20(1)_edited.png)
Minha contribuição
Trabalhei na refatoração de interface, UI de alta fidelidade, uso do design system e handoff pronto para desenvolvimento.
Minhas responsabilidades incluíram mapear fluxos legados, identificar ações ocultas, reorganizar telas sobrecarregadas, documentar estados de interação e validar a viabilidade com engenheiros frontend.
Como o sistema era altamente orientado pelo backend, meu papel não era apenas deixar as telas mais limpas. Eu precisava decidir onde a experiência poderia ser simplificada, quais comportamentos existentes deveriam ser preservados e como tornar fluxos complexos mais fáceis de entender dentro de limites técnicos reais.
PROBLEMA
Definindo o problema
Telas sobrecarregadas
Fluxos críticos exibiam muitas ações ao mesmo tempo, dificultando a compreensão do que deveria receber atenção primeiro.
Ações ocultas
Funções importantes existiam, mas eram difíceis de descobrir sem conhecimento prévio do sistema legado.
_edited.png)
Lógica fixa de backend
Alguns fluxos não podiam ser totalmente redesenhados porque estavam vinculados a APIs, estruturas de dados e regras de negócio existentes.
Transição tablet-first
A interface precisava funcionar melhor em loja, em uma experiência browser-based para tablet, sem reconstruir o produto do zero.
Objetivo
“Como modernizar fluxos críticos da loja sem quebrar a lógica legada por trás deles?”
PROCESSO
Decisões-chave
Melhorar a clareza antes de reduzir etapas
Em muitos fluxos, o principal problema não era apenas o número de cliques. Os usuários tinham dificuldade para entender quais ações existiam, onde elas estavam localizadas e em qual estado o pedido se encontrava.
Por isso, primeiro foquei em agrupamento, hierarquia, rótulos mais claros e visibilidade das ações.
Simplificar apenas onde o sistema permitia
Alguns fluxos podiam ser reduzidos de forma mais agressiva. Outros precisavam preservar comportamentos legados, porque alterá-los criaria risco técnico.
Isso ajudou o time a evitar redesigns irreais e focar em melhorias que realmente poderiam ser implementadas.
Usar o design system como ferramenta de entrega
O design system não era apenas uma camada visual. Ele ajudou a tornar o redesign mais consistente, mais fácil de entregar para engenharia e mais realista de construir.
SOLUÇÃO DE DESIGN
Refatoração do Service Work Order
Antes
A tela original de Service Work Order expunha muitas ações ao mesmo tempo. Itens comprados, serviços solicitados, atribuição de técnico, impressão, ações do pedido e tarefas de conclusão ficavam muito próximas entre si, sem uma hierarquia clara.
Os usuários tinham acesso às funções necessárias, mas a interface dependia demais do conhecimento prévio do sistema legado.
_edited.png)
Depois
Reorganizei mais de 20 funções em um modelo de interação mais claro, agrupando ações relacionadas a serviços, peças e tarefas do pedido.
O objetivo não era remover profundidade funcional, mas tornar a tela mais fácil de escanear e operar. Ações principais passaram a ficar acessíveis em no máximo três interações, preservando a lógica de backend por trás do fluxo.
Fluxo de Sourcing
Antes
O sourcing abria em uma camada web hospedada separadamente dentro da aplicação desktop. Isso fazia com que tarefas relacionadas a estoque e inventário parecessem desconectadas do restante do fluxo.
Os usuários precisavam alternar mentalmente entre experiências durante a mesma tarefa operacional.
Depois
A tela final em produção não está disponível devido a restrições de acesso e confidencialidade do projeto, então recriei a direção do fluxo como um diagrama simplificado.
Ajudei a integrar o sourcing à experiência browser-based, fazendo com que ele parecesse parte do mesmo fluxo operacional, e não um sistema separado.
Isso criou uma experiência mais contínua para as equipes de loja, mantendo cliente, veículo, estoque e ações de inventário conectados dentro do mesmo fluxo de tarefa.
Simplificação do Fluxo de Oil Change
Antes
O fluxo de Oil Change exigia 12 etapas, mesmo para uma tarefa de serviço relativamente focada. O processo funcionava, mas era fragmentado sem necessidade em pontos onde o sistema permitia simplificação.
Depois
Reduzi o fluxo de 12 etapas para 4 onde o sistema permitia.
Isso se tornou um bom exemplo da abordagem do projeto: simplificar quando fosse tecnicamente viável, preservar quando necessário e equilibrar melhorias de usabilidade com risco de implementação.
IMPACTO
Fase 1
Esta fase ainda não passou por validação completa em campo, então evito apresentá-la como um resultado totalmente mensurado.
Ainda assim, o redesign criou melhorias claras de produto e entrega:
20+ funções reorganizadas
As ações do Service Work Order foram agrupadas em um modelo de interação mais claro.
Fluxos operacionais mais claros
Telas críticas se tornaram mais fáceis de escanear, discutir e entregar para engenharia.
Base mais escalável
A direção browser/tablet criou uma base mais forte para futuras releases.
RECONHECIMENTO
Reconhecimento Interno do Time
O time do projeto recebeu reconhecimento interno pela colaboração e excelência na entrega durante a iniciativa ShopX NextGen.
Reflexão
Este projeto me ensinou que redesenhar sistemas legados não significa substituir tudo que parece ultrapassado.
Bom design também significa entender dependências, respeitar restrições e escolher onde a mudança gera valor real.