2023–2024

Percorrer corredores que não existem

A navegação por categorias do app Bemol tinha crescido por acúmulo, não por desenho. Este redesign a reconstruiu em torno de como as pessoas de fato procuram, testado dentro de loja física, com clientes e funcionários.

Empresa
Bemol Digital
Papel
Senior Product Designer
Escopo
Product Design · Pesquisa
Canais
App Bemol
Status
Lançado · 2024

A navegação redesenhada

  • Navegação de categorias redesenhada no app do Bemol

A premissa

Quem anda pelos corredores de uma loja física encontra coisas que não estava procurando. O app não tinha equivalente: a árvore de categorias tinha crescido por acúmulo, espelhando a estrutura interna da empresa e não o jeito como se compra.

Um menu mais bonito teria passado ao largo do problema. O objetivo era fazer a navegação parecer caminhada, onde a descoberta acontece no caminho para outra coisa.

Três problemas, nomeados separadamente

  1. Problema 1

    A árvore espelhava a empresa, não o cliente

    Os departamentos seguiam a organização dos times de compra do Bemol. Quem procurava um ventilador precisava saber se aquilo contava como eletrodoméstico ou conforto para casa, uma distinção que só existe internamente.

  2. Problema 2

    A profundidade punia os caminhos mais usados

    As categorias mais acessadas estavam tão fundo quanto as que quase ninguém abria. Frequência de uso nunca tinha entrado como critério na estrutura.

  3. Problema 3

    Nenhum sinal do que havia dentro

    As entradas eram rótulos de texto puro. Nada indicava tamanho, faixa de preço ou o que a seção realmente continha, então escolher entre dois caminhos plausíveis virava chute.

De onde veio a estrutura

Quatro fontes, deliberadamente de naturezas diferentes: uma de mercado, uma de alinhamento, uma de comportamento e uma de linguagem.

Nenhuma delas sozinha decidia a árvore. O que cada uma fazia era eliminar um tipo de erro que as outras não pegavam.

Benchmark · varejo brasileiro e internacional

  • Benchmark de apps de varejo brasileiros e internacionais

Mostrou as convenções que o cliente já traz de outros apps. Quebrar isso sem motivo custa mais do que rende.

Matriz CSD · com stakeholders e engenharia

  • Matriz CSD construída com stakeholders e engenharia

Separou o que sabíamos do que estávamos supondo, e trouxe as limitações técnicas à tona antes de virarem retrabalho.

UX Cam · comportamento real

  • Análise de UX Cam das categorias mais acessadas

Disse quais categorias eram de fato abertas, em que profundidade e onde as pessoas desistiam. Foi esse dado que reordenou a árvore.

Crítica de design · entre departamentos

  • Sessão de crítica de design entre departamentos

Pegou os rótulos em jargão interno: aqueles que quem está dentro da empresa lê como óbvio e mais ninguém.

Testamos dentro de loja física, com clientes e funcionários. Quem responde 'onde eu acho isso?' o dia inteiro foi o crítico mais afiado da estrutura.

Cinco funcionários e oito clientes

O funcionário entra no teste por um motivo prático: na loja física, é ele que o cliente procura primeiro, e em muito caso é ele que ensina o aplicativo. Se a estrutura não fecha na cabeça de quem está no corredor, ela não chega inteira em quem ele atende.

E o funcionário rende além do roteiro. Ele passa o dia com o cliente na frente, então no meio de uma tarefa começa a contar o que já viu dar errado. É o tipo de coisa que quem trabalha de casa ou do escritório, sem contato direto, não tem como saber.

Teste de usabilidade na loja

  • Sessão de teste de usabilidade dentro da loja

Sessões conduzidas dentro da loja, não em laboratório.

O conjunto completo de categorias

  • O conjunto completo das telas de categoria redesenhadas

A árvore redesenhada de ponta a ponta: todos os departamentos na estrutura nova.

O que sabemos, e o que não

A evidência aqui é qualitativa, e veio do chão de loja. Os números de comportamento ficaram com o time de produto.

Redução de tap depth até a categoria· pendente
Variação na taxa de entrada em categoria· pendente

O que não foi para produção

  • Imagem própria para cada categoria

    Produzir e manter arte para centenas de categorias não tinha dono depois do lançamento. Entregar pela metade pareceria defeito, então ficou de fora.

  • Ordenação personalizada por histórico

    O serviço de recomendação não podia ser chamado naquele ponto do fluxo sem um custo de latência que não valia pagar logo na tela de entrada.

  • Fundir dois departamentos sobrepostos

    A estrutura pedia, mas a divisão espelha como os times de compra se organizam. Isso é decisão de organização, não de design. Apontado e deixado quieto.

Quem fez o quê

Christofer

  • Arquitetura de informação da nova árvore de categorias
  • Benchmark e matriz CSD, facilitados com stakeholders
  • Análise de UX Cam e a reordenação que ela motivou
  • Roteiro do teste de usabilidade e condução dentro da loja

Com o time

  • Rodadas de crítica com designers de outros departamentos
  • Implementação de front-end, com o time do app
  • Revisão da taxonomia de categorias, com os times de compra

Reflexões

A melhor pesquisa aqui não foi pesquisa.

O retorno mais afiado veio dos funcionários de loja. Eles respondem 'onde eu acho isso?' dezenas de vezes por dia e tinham um modelo mental da linguagem do cliente que nenhum benchmark produziria.

Se eu refizesse, arrumaria a medição antes do redesign. O caso qualitativo é sólido e o número ficou para depois, que é exatamente o erro que o projeto de Fulfillment foi desenhado para evitar.