sobre
Smart B2B é um sistema de pedidos inteligente voltado para empresas atacadistas. Nele, onde o usuário acessa o catálogo de produtos e faz os pedidos através de uma aplicação PWA.
Usando inteligência de dados, o sistema sugere produtos e quantidades para a compra, tornando a experiência de fazer pedidos muito mais rápida.
Meu papel foi desenhar soluções para os problemas de usabilidade pensando em uma interface escalável para diversas marcas.
Esse projeto foi adaptado em seu estilo e marca a pedido do cliente.
cliente
Empresa de soluções de tecnologia B2B
período
1 mês (2023)
minha função
UX designer
ferramentas
Figma, FigJam, Maze
Em fase de desenvolvimento, o produto apresentou problemas de usabilidade após os primeiros testes. A equipe apontou como principais causas:
A interface tem problemas de experiência em telas pequenas, a área de visualização atual dificulta o acesso a informações básicas e botões de ação.
Componentes precisam ser ajustados, e até mesmo criados, a cada novo cliente da aplicação. Isso dificulta o desenvolvimento e gera altos custos.
Não existe um padrão de interface, o que dificulta a usabilidade, estética e escalabilidade do produto.
Definimos que o objetivo é criar uma versão de interface que resolva esses problemas. E, como requisitos. usar preferencialmente componentes Tailwind, biblioteca de já usada pela equipe. Além disso, que seja white label, pensada para diferentes marcas.
A interface inicial era da seguinte forma:
Optamos por seguir o processo de design em paralelo com as Sprints da equipe de desenvolvimento. Dessa forma, poderíamos rapidamente testar no ambiente de homologação. Organizamos da seguinte forma:
Semana 1: Catálogo
Semana 2: Página do produto
Semana 3: Busca e categorias
Semana 4: Carrinho e check-out
O primeiro passo foi entender como funciona o produto. Quais são as necessidades de negócio dos clientes? Quais as tarefas a serem cumpridas?
Montamos fluxogramas e analisamos o passo a passo das ações e o que se espera de cada uma. Dessa forma, ficamos a par das mesmas informações e aprendizados.
Analisando as variáveis de fluxo, percebi que cada cliente tinha necessidades diferentes. Por exemplo:
Exibir preços com descontos
Percentual de cashback
Valor de compras disponível
Valor de compra mínima
Em seguida, para encontrar problemas de usabilidade, realizei uma análise de heurísticas, que ajudou a identificar os principais problemas de usabilidade.
Como o projeto tinha um prazo curto, foi importante realizar essa análise com rapidez e realizar uma priorização junto com a equipe.
Como podemos melhorar a interface? Primeiramente, fiz rascunhos à mão pensando em como organizar o layout para cada etapa da jornada: fazer um pedido.
A partir dos fluxos, pensei em soluções para como os componentes poderiam ser adaptados para diferentes necessidades dos clientes.
Também fiz uma análise de competidores diretos indiretos, para explorar mais possiblidades e pensar que variáveis os clientes poderiam ter, pensando em escalabilidade.
Como resultado, criei uma interface com componentes adaptáveis, que podem ter diferentes funcionalidades dependendo das necessidades e regras de negócio. Por exemplo: cashback, descontos, limites de compra, pedido mínimo, tags, picking, e outros.
Em cada semana sprint, montei pequenos protótipos para testar funcionalidades básicas de cada fluxo. Ao final, realizamos um teste de usabilidade da tarefa principal: fazer um pedido.
Resultados
Com a entrega que realizei, o cliente estimou uma redução de pelo menos 1 mês de desenvolvimento. Que, também resultou em um processo mais assertivo, devido ao processo de design que adotamos e a documentação entregue.
Para os próximos passos, penso que seria importante monitorar e analisar os dados de uso e para identificar possibilidades de melhoria. Além disso, criar e manter documentação e padrões de interface, pensando em novos componentes e funcionalidades, a fim de manter consistência.
