CRM · Força de Vendas · Sisloc
Redesenhando um fluxo de vendas B2B complexo
Redesenhando um fluxo crítico de vendas sem simplificar a complexidade do negócio
- Product Design
- B2B SaaS
- Enterprise
- Web + Mobile
Overview
O Força de Vendas é o CRM da Sisloc para empresas de locação e venda de equipamentos. A criação de propostas é um dos fluxos mais críticos do produto.
The challenge
Migrar um fluxo construído em Delphi para web e mobile sem perder anos de regras de negócio.
- Role
- Product Designer
- Company
- Sisloc
- Platform
- Web + Mobile
- Scope
- CRM · Proposal workflow
Um fluxo comercial cercado por regras
A criação de propostas era um fluxo crítico do CRM B2B da Sisloc. Para chegar ao catálogo e montar o carrinho, o vendedor precisava lidar com contexto comercial, empresa, conta, tabela, período e condições específicas da operação.
Produtos de locação e venda ainda envolviam regras de composição, cálculos de impostos, quantidades e valores comerciais. O redesign precisava melhorar a operação preservando as dependências que sustentavam o negócio.
Esse mesmo fluxo também deveria funcionar no celular durante visitas a clientes.
Meu papel
Atuei no redesign do fluxo de ponta a ponta, da arquitetura da experiência à especificação de comportamentos e prototipação para desktop e mobile.
Analisei o sistema legado, estruturei o novo fluxo, discuti regras de negócio com Produto e Desenvolvimento e transformei decisões de UX em especificações claras o suficiente para orientar a implementação.
A mesma etapa de negócio exigia comportamentos diferentes
- Desktoppainel lateral stickyMobilefaixa fixa de progresso
- Desktoptabela de propostasMobilecards
- Desktopedição inlineMobilebottom sheet
- Desktopdrag and drop com mouseMobilelong press
No desktop, painel sticky, tabela, edição inline e interações com mouse aproveitavam o espaço disponível. No mobile, progress strip, cards, bottom sheet e gestos adequados ao toque mantinham a mesma progressão da proposta em outro contexto de uso.
O contexto colapsável liberou espaço para a tarefa
Uma das primeiras questões no mobile era a quantidade de contexto necessária para montar uma proposta.
A solução inicial mantinha essas informações permanentemente visíveis em chips. Na tela pequena, elas competiam com a tarefa principal daquele momento: encontrar e adicionar produtos.
Antes
Informação secundária competia com a tarefa principal: encontrar e adicionar produtos.
Depois
O contexto continua disponível, mas deixa de ocupar continuamente a tela.
- Scroll
- ↓ recolhe↑ reaparece colapsada
- Toque
- tap → expande para edição
Transformei o contexto em uma área colapsável. As informações continuaram acessíveis sem ocupar permanentemente o espaço dedicado à tarefa principal.
O componente também ganhou comportamentos independentes para scroll e interação direta, documentados separadamente para evitar conflitos entre os dois estados.
Complexidade não precisa desaparecer. Ela precisa aparecer no momento certo.
Buscar produtos ganhou presença permanente
Outro debate surgiu em torno da busca do catálogo.
Em outros módulos, a busca ficava atrás de um ícone. No catálogo, buscar produtos era uma tarefa central e recorrente, por isso o campo permaneceu visível.
Outros módulos
busca atrás de ícone
Catálogo
busca permanentemente visível
No catálogo, buscar é tarefa principal, não função secundária.
A lista vertical favoreceu leitura e comparação
Alternativa
Grid 2 colunas
- nomes longos de equipamentos truncavam
- preços perdiam hierarquia
- controle de quantidade ficava apertado
Decisão
Lista vertical
- imagem à esquerda
- informação à direita
- separadores
- maior legibilidade
Fechar a busca devolveu visibilidade ao carrinho
No fluxo existente, a busca permanecia aberta depois da adição e cobria parte do carrinho. Usuários perdiam visibilidade dos itens selecionados, duplicavam produtos ou esqueciam o que já haviam incluído.
- buscar→
- selecionar produto→
- adicionar→
- busca fecha→
- carrinho volta ao foco→
- confirmação da ação
Manter busca abertamais velocidade para adição sequencial
Fechar buscamais visibilidade e controle
Passei a fechar a busca após cada adição, devolvendo a visão do carrinho e uma confirmação da ação. A decisão reduziu a velocidade de adições consecutivas, mas aumentou o controle sobre o estado atual da proposta.
Quantidade calculada, valor comercial editável
Uma das partes mais complexas do fluxo era a composição de produtos.
Determinados itens possuem fórmulas que calculam automaticamente suas quantidades. A especificação inicial dizia que, quando houvesse fórmula, tanto quantidade quanto valor deveriam ficar bloqueados.
No alinhamento com a liderança técnica, identificamos que a regra real era diferente.
Interpretação inicial
Regra real
A fórmula controla a quantidade, enquanto o vendedor pode alterar o valor por razões comerciais: quantidade calculada e bloqueada; valor comercial editável.
Esse alinhamento aconteceu antes da implementação e evitou que uma interpretação incorreta da regra de negócio fosse incorporada à nova interface.
Do Figma à especificação de comportamento
Alguns componentes reuniam estados, cálculos e interações que uma composição estática no Figma não explicava adequadamente.
Usei protótipos interativos e pequenos experimentos em código para especificar cálculo reativo, expansão de conteúdo, organização de composições e adaptação entre plataformas.
Também trabalhei com Desenvolvimento em decisões como o footer de ações do carrinho. Em monitores menores, os botões principais desapareciam abaixo da viewport conforme o conteúdo crescia.
Antes
Depois
A solução foi fixar o footer para manter as ações do wizard previsíveis e acessíveis independentemente da altura do conteúdo.
O que preservar, simplificar e adaptar
- Delphi→Web + Mobile
- Conhecimento implícito→Regras explícitas
- Especificação estática→Comportamentos documentados
- Ambiguidade→Alinhamento antes do desenvolvimento
Projetar para um sistema B2B complexo exigiu distinguir o que poderia ser simplificado, o que precisava continuar visível, o que era regra de negócio e o que deveria mudar conforme dispositivo e contexto de uso.