Pauta Distribuição: Redesign de Portal B2B com regras críticas de negócio

Visão geral

• Role: UX/UI Designer

• Tipo: Portal B2B / Ecommerce para revendas

• Stack: Figma (design system, componentes, handoff documentado)

• Foco:

  • Regras de negócio complexas

  • Checkout em etapas obrigatórias

  • Precificação por UF

  • Experiência para usuários logados e deslogados

• Projeto desenvolvido em 2022: Algumas telas refletem decisões e contexto da época.

Redesign completo de um portal de ecommerce B2B com fluxo de checkout rígido, múltiplas regras fiscais e variação de preço por estado (UF).

O desafio não era reinventar a experiência — era tornar utilizável um sistema que não podia mudar sua estrutura.

Contexto

A Pauta Distribuição opera um portal de vendas para revendedores com regras comerciais e fiscais rígidas. O sistema legado impunha restrições críticas:

• Fluxo de checkout fixo e não editável

• Múltiplos cenários de faturamento

• Variação de preço por estado (UF)

• Restrições para usuários não autenticados

Antes :

Depois:

Problemas principais

• Checkout sem progresso → usuários se perdiam e abandonavam

• Falta de distinção entre cenários → erros de faturamento

• Tabela de preços por UF ilegível → alta carga cognitiva

• Fluxo rígido → impossível simplificar estruturalmente

• Catálogo bloqueado → impacto em aquisição e SEO

• Falta de responsividade → experiência inconsistente

Cada abandono de carrinho representava perda direta de receita e aumento da carga operacional do time comercial.

Objetivo

Reduzir fricção no processo de compra e tornar o fluxo mais claro, previsível e utilizável. Respeitando as limitações do sistema.

Estratégia de UX/UI

A abordagem foi incremental, focada em melhorar a experiência sem alterar a estrutura existente.

Princípios:

• Clareza acima de simplificação impossível

• Hierarquia visual como ferramenta de entendimento

• Feedback constante ao usuário

• Separação explícita de contextos

• Revelação progressiva de informação

Percurso

1. Diagnóstico

O portal concentrava múltiplas etapas em páginas longas e pouco estruturadas. Usuários não sabiam:

• onde estavam no fluxo

• o que faltava concluir

• quais decisões impactavam o pedido

2. Decisão sobre responsividade

Os dados indicavam uso majoritário em desktop.

A decisão foi:

• Não adotar mobile-first

• Não tratar mobile como secundário

• Projetar

  desktop e mobile em paralelo

Cada tela foi desenhada simultaneamente para ambos os contextos, respeitando comportamento, leitura e limitações.

Resultado: duas experiências consistentes (não adaptações).

3. Colaboração com engenharia

Trabalho contínuo com o time da Tiki:

• Validação técnica antecipada

• Ajustes de interface com base no backend

• Redução de retrabalho

Design e desenvolvimento evoluíram juntos ao longo do projeto.

Trabalhando com restrições

O checkout era o ponto mais crítico.

A estrutura obrigatória era:

Carrinho → Transportadora → Pagamento → Cliente → Faturamento

Essa sequência não podia ser alterada.

Solução:

Em vez de mudar o fluxo, melhoramos a compreensão do fluxo:

• Indicador visual de progresso

• Etapas claramente separadas

• Feedback de etapa ativa e concluída

• Organização vertical das informações

• Redução de ambiguidade nas decisões

Soluções implementadas

1. Novo checkout estruturado

• Stepper visual com progresso claro

• Resumo da compra persistente

• Separação lógica entre etapas

2. Separação de cenários de faturamento

Escolha explícita entre:

• Comprar para revenda

• Comprar para cliente final

Incluindo:

• Busca de cliente

• Cadastro

• Regras de comissão

3. Catálogo com revelação progressiva

Deslogado:

• Produtos sem preço

Logado:

• Preços por UF

• Quantidade direto na listagem

4. Redesign dos cards de produto

Antes:

• Tabelas densas e difíceis

Depois:

• Estrutura por linha

• Hierarquia visual clara

• Leitura mais rápida

5. Design System

• Componentes reutilizáveis

• Padronização de estados

• Estrutura escalável

Entregáveis

• Design system completo

• Protótipos navegáveis

• Checkout redesenhado

• Componentização pronta

• Handoff documentado

Entregáveis

Mesmo sem métricas pós-lançamento, validações qualitativas indicaram:

• Redução da confusão no checkout

• Usuários completaram pedidos sem ajuda

• Fluxo mais previsível

• Melhor entendimento das etapas

Além disso:

• Redução de erros de faturamento

• Base pronta para evolução do produto

• Estrutura escalável para regras complexas

Aprendizados

• Clareza é mais importante que simplificação em sistemas complexos

• Nem todo fluxo pode ser reinventado, mas pode ser melhor compreendido

• Parceria com engenharia define a qualidade do resultado

• Design system é infraestrutura, não estética

Conclusão

Esse projeto reforçou que design não é apenas criar experiências ideais, é tornar sistemas complexos utilizáveis dentro da realidade existente.

A melhoria não veio da mudança das regras, mas da forma como elas foram apresentadas.