MPricing

O MPricing é a ferramenta em que os vendedores do Grupo MCassab consultam estoque, alteram condições e fecham a venda e o fornecimento de matéria-prima aos clientes. É um sistema de uso diário, com grandes volumes de dados e processos complexos. O projeto foi conduzido pela 7COMm, consultoria onde eu atuava como UX/UI Designer.

Quem usa é um vendedor experiente, com muitos anos de estrada e pouco tempo para reaprender uma ferramenta.

O sistema legado era confuso e já não atendia às exigências do momento da empresa: muitos dados e pouca linearidade. O redesenho precisava deixar o atendimento mais rápido, reduzir erros na venda, facilitar a evolução do sistema e trazer a marca do grupo para dentro da ferramenta.

O desafio era melhorar a experiência de consulta e venda sem quebrar a memória de uso de quem opera o sistema todos os dias.

Para entender o cenário, conduzi:

• Entrevistas com vendedores que usam o sistema no dia a dia
• Mapeamento dos passos dos usuários
• Levantamento de todas as funções do fluxo de atividades
• Proto-persona para manter a restrição visível

Também desenhei os wireframes, o protótipo e o style guide. Trabalhei com o gestor de projeto da 7COMm e com os desenvolvedores, e o time do MCassab validava as entregas ao longo do projeto.

Foi aplicado um efeito em algumas imagens para manter a confidencialidade das informações internas da empresa.

As entrevistas e o mapeamento da jornada apontaram três problemas, que também aparecem como dores da proto-persona.

Antes · sistema anterior

1. 01 Fluxo não linear Consulta, alteração e venda eram processos difíceis de navegar, com muitos elementos complexos na tela.
2. 02 Informação difícil de encontrar O vendedor demorava para achar o que precisava na hora de atender o cliente.
3. 03 Sem tempo para treinamento Qualquer mudança grande exigiria reaprender a ferramenta, e não sobrava tempo para treinar.

Proto-persona construída a partir das entrevistas; não é uma persona validada.

Três decisões definiram o redesenho, todas a partir da mesma restrição. As três propostas foram minhas; o limite das mudanças veio do cliente, que pediu que o sistema não mudasse drasticamente.

• 03 Sem tempo para treinamento

Preservar a memória de uso

O sistema é usado todos os dias no atendimento, e não havia tempo para treinar os vendedores.

Minha proposta

Manter a lógica de funcionamento que os usuários já conheciam e atacar os pontos críticos do fluxo, em vez de redesenhar o sistema do zero.

Concessão

As telas continuaram densas. Os dados foram reorganizados, não reduzidos, para não mudar a forma de trabalho dos vendedores.

Critério

O público é experiente e sem tempo para reaprender a ferramenta: a familiaridade era um ativo a preservar.

Alternativas

Redesenhar o sistema do zero, descartado porque exigiria treinar os vendedores.

• 01 Fluxo não linear
• 02 Informação difícil de encontrar

Transformar o fluxo em uma sequência lógica

Os processos eram difíceis de navegar, e a informação demorava a aparecer na hora de atender.

Minha proposta

Reorganizar consulta e venda em uma sequência lógica, com telas em padrão consistente e menos elementos complexos.

Concessão

O volume de informação não diminuiu. A sequência mudou onde cada dado aparece, não quanto aparece.

Critério

Resolver os problemas citados nas entrevistas sem mudar o que os vendedores já sabiam fazer.

• Manutenção futura

Criar um style guide para o que viesse depois

O sistema continuaria recebendo melhorias e manutenções depois do redesenho.

Minha proposta

Um guia de estilos com cores, campos, botões e tipografia.

Concessão

Nenhuma relevante. O guia partiu dos componentes do Angular Material que o sistema já usava, com algumas customizações, e por isso foi absorvido pelo time e aplicado como desenhado.

Critério

Garantir consistência, acelerar futuras melhorias e manter a comunicação da marca dentro do sistema.

Os wireframes reduziram a quantidade de elementos complexos e facilitaram o acesso às opções, respondendo aos problemas 01 e 02. No protótipo final, as telas seguiram um padrão consistente, e o fluxo passou a seguir uma sequência lógica sem mudar o que os vendedores já conheciam, como pedia o problema 03.

Wireframes: acompanhamento de carteira e consulta.

Style guide

Protótipo final

Cotação e acompanhamento de carteira.

Estoque e histórico de pedidos.

Sinais observados

O projeto foi concluído, aprovado e bem recebido pelo cliente. Até onde acompanho, o sistema redesenhado segue em uso anos depois.

O time do MCassab validou os wireframes e o protótipo ao longo do projeto, e os vendedores deram retorno positivo sobre as novas telas.

Foi a reformulação mais significativa que conduzi até aquele momento. Com mais experiência hoje, identifico áreas em que o projeto poderia ir além.

Com quem o redesenho foi construído

Gestão

• Gestor de projeto

Engenharia

• Devs

Cliente

• Time do MCassab

Usuários

• Vendedores

Três ideias iam além do escopo do redesenho, todas voltadas ao dia a dia do vendedor.