Parceiros de distribuição e equipes internas precisavam de uma forma mais ágil e confiável de processar pedidos B2B, substituindo um fluxo manual que gerava retrabalho, erros, atrasos e baixa rastreabilidade.
Empresa nacional do setor de eletrodomésticos, com atuação nos mercados residencial e industrial e presença internacional. O projeto foi desenvolvido para parceiros B2B (varejistas, distribuidores e representantes comerciais) que precisavam realizar pedidos com mais autonomia, previsibilidade e controle sobre o processo.
Atuei na estruturação da jornada B2B, conectando necessidades dos parceiros às regras comerciais, logísticas e operacionais do negócio. Conduzi discovery com usuários e stakeholders, entrevistas, mapeamento de fluxos, prototipação e testes de usabilidade, transformando um processo manual em uma experiência digital mais clara, eficiente e escalável.
O discovery foi conduzido com base na lógica do Double Diamond, começando por uma investigação ampla do processo manual de pedidos B2B. Além das informações trazidas pelo time, foram consideradas pesquisas qualitativas com parceiros de distribuição, dados internos, depoimentos de funcionários e percepções das áreas comercial, compras e logística.
Mapeamento da jornada e do Backstage
Mapeando a experiência além da interface
Antes de desenhar a solução, foi necessário entender a jornada de ponta a ponta e como as ações dos parceiros se conectavam aos processos internos da empresa.
O mapeamento relacionou o frontstage, com as etapas realizadas por distribuidores, varejistas e representantes comerciais, ao backstage, envolvendo Comercial, Financeiro, Logística, faturamento e ERP. O fluxo anterior passava por contato, envio de informações, negociação, definição logística, validações, formalização, digitação e acompanhamento do pedido.
Essa visão tornou mais claras as dependências, handoffs, regras e pontos de retrabalho do processo e ajudou a definir o que poderia ser automatizado, quais informações precisavam aparecer para o parceiro e quais validações continuariam acontecendo internamente.
Síntese de insights e oportunidades
Em seguida, os achados foram organizados com apoio do modelo de Atomic UX Research, estruturando evidências, padrões, insights e oportunidades de produto. Essa síntese ajudou o time a priorizar melhorias como autosserviço, centralização de informações, visibilidade de status, regras comerciais mais claras, cálculo de frete assistido e maior integração com os processos internos.
Após a etapa de Discovery, a fase de Ideação teve como objetivo transformar os achados de pesquisa em hipóteses de solução, definindo quais padrões de navegação, fluxos e funcionalidades fariam sentido para uma experiência B2B mais eficiente.
O desafio era equilibrar familiaridade e complexidade: a solução precisava se aproximar de uma experiência de e-commerce, para facilitar a adoção pelos parceiros, mas também contemplar regras específicas do contexto B2B, como pedido mínimo (MOQ), condições comerciais, estoque (visível para o usuário), frete (CIF/FOB), crédito, aprovações e diferentes perfis de cliente.
Benchmarking e referências B2B
Antes de desenhar as interfaces, conduzi um benchmarking de soluções B2B e plataformas de autosserviço para analisar padrões de navegação, catálogo, recompra, regras comerciais, status e organização de pedidos.
A análise ajudou a identificar padrões que poderiam reduzir a curva de aprendizado dos usuários e oportunidades para adaptar a experiência ao contexto B2B, combinando familiaridade de e-commerce com recursos como condições por cliente, disponibilidade, logística, pagamento e acompanhamento do pedido.
Nessa etapa, a intenção foi validar a arquitetura geral da experiência antes de avançar para fluxos mais complexos. Esses wireframes ajudaram a alinhar com o time quais partes da experiência poderiam manter uma lógica próxima ao
e-commerce tradicional e quais pontos precisariam de regras específicas para atender distribuidores, varejistas e representantes comerciais.
A partir dos fluxos principais, foi definido um MVP com foco nas funcionalidades essenciais para a compra B2B: busca de produtos, configuração de quantidades, revisão de condições comerciais e conclusão do pedido com menor dependência dos times internos.
A solução contemplava web e aplicativo mobile, considerando contextos de uso diferentes. Na web, a interface favorecia uma visão mais completa do pedido; no mobile, a experiência foi organizada de forma mais progressiva, com leitura rápida e ações objetivas em cada etapa.
Uma das principais decisões de design foi estruturar o checkout como um fluxo adaptativo, ajustado ao perfil do cliente e à complexidade do pedido. A jornada diferenciava clientes PME e corporativos, reduzindo etapas em pedidos simples e mantendo validações quando havia regras comerciais, crédito ou aprovações envolvidas.
O mapeamento foi construído em colaboração com PM e engenharia, tornando visíveis os pontos de decisão da jornada e evitando que regras complexas surgissem apenas no final do processo.
Wireframes do checkout B2B
Com o fluxo validado, foram criados wireframes web e mobile organizados em etapas progressivas, com stepper para orientar o avanço do pedido. No carrinho, priorizei informações essenciais para a decisão B2B, como variação do produto, quantidade por volume, pedido mínimo, estoque, preço unitário e subtotal.
Na versão web, o resumo do pedido permaneceu visível para apoiar a conferência de valores, frete, descontos, condições comerciais e possíveis aprovações. No mobile, a mesma lógica foi adaptada para uma navegação mais linear, com cards, hierarquia clara e CTAs persistentes.
Visual Design e Padronização
Antes da implementação de um design system mais completo, foi criado um guia de estilo para documentar os principais padrões visuais da solução. O material reunia diretrizes de marca, tipografia, cores, grid, espaçamentos, ícones, sombras, botões e componentes de seleção, funcionando como uma base inicial de consistência para as interfaces web e mobile.
Essa documentação também apoiou o handoff com desenvolvimento e ajudou a orientar decisões de acessibilidade, hierarquia visual, estados de interação e uso de cores semânticas ao longo da experiência.
Decisões de UX no checkout
Para reduzir a complexidade da experiência, o checkout foi desenhado com lógica de divulgação progressiva: o usuário visualiza apenas as informações e validações necessárias para o seu contexto.
No fluxo PME, a prioridade foi simplificar a jornada, reduzir carga cognitiva e acelerar a conclusão do pedido. Já no fluxo corporativo, a experiência contemplava regras adicionais, como limite de crédito, condições comerciais, múltiplos endereços, frete CIF/FOB, pagamento combinado e aprovações internas.
Também foram aplicados recursos como resumo persistente do pedido, feedbacks de status, separação entre decisões logísticas e financeiras e subfluxos condicionais para exceções. Isso ajudou a manter o contexto visível e reduzir erros, retrabalho e dependência do atendimento interno.
Resultado e Impacto
O protótipo foi validado internamente e testado com usuários, permitindo ajustes na jornada, na hierarquia das informações e nos fluxos antes da evolução da solução. Nos meses seguintes à implementação, testes de usabilidade, feedbacks no produto e métricas operacionais indicaram ganhos relevantes na experiência e na eficiência do processo.
Principais resultados observados:
Redução do tempo de processamento de pedidos de aproximadamente 5–6 horas para 10–15 minutos, uma queda estimada de até 95% no esforço operacional.
Diminuição de erros de digitação, retrabalho, atrasos e inconsistências causadas por trocas manuais.
Menor dependência da equipe comercial em etapas como consulta de produtos, validações, condições comerciais e acompanhamento do pedido.
Melhora de até 16% em indicadores relacionados à facilidade de compra e atendimento (CES), considerando feedbacks de distribuidores e representantes.
Conclusão
O projeto demonstrou que digitalizar um processo B2B não significa apenas criar uma interface de compra, mas traduzir regras operacionais complexas em uma experiência clara, guiada e confiável.
Ao estruturar o checkout como um fluxo adaptativo, foi possível equilibrar simplicidade e controle: clientes com pedidos menos complexos avançavam com mais rapidez, enquanto cenários corporativos mantinham as validações necessárias para o negócio.
A solução contribuiu para aumentar a autonomia dos parceiros, reduzir esforço operacional e tornar o processo de pedidos mais previsível, escalável e eficiente.