Giulia Bins

Trabalhos / OLX

Repensando a navegação

A OLX cresceu funcionalidade por funcionalidade, e a navegação não acompanhou. Web, Android e iOS tinham cada um um menu diferente, com nomes diferentes pras mesmas coisas. Liderei o redesenho da navegação global, do mapa do site até uma navegação inferior testada.

Papel
UX Strategy Lead, Global Experience
Quando
2021 a 2024
Produto
OLX Brasil, web, Android e iOS
Status
Testado com usuários e em A/B
  • +430%cliques em Explorar no teste A/B
  • +51,9%cliques em Conta
  • +23,3%cliques pra inserir anúncio
  • 10usuários particulares e profissionais no teste de usabilidade

Contexto

Eu liderava o time de Global Experience da OLX Brasil. Nossa missão era cuidar da experiência entre dispositivos e categorias, e criar diretrizes pra toda vertical, de carros a imóveis, parecer um produto só.

A navegação principal nunca tinha sido pensada pro tanto que o produto cresceu:

  • Menu hambúrguer na web e no Android, barra de abas no iOS, e atalhos diferentes em cada cabeçalho.
  • O menu só crescia, e nenhum time cuidava dele.
  • Funcionalidades de vendedor profissional e de OLX Pay ficavam junto de todo o resto, sem diferença.
  • Pra buscar, era preciso voltar pra Home, e navegar entre categorias era difícil.
  • Toda versão nova do cabeçalho tinha que ser atualizada na mão em cada instância.

Uma navegação só, pensada a partir de como as pessoas pensam, pra todas as plataformas.

Entendendo o problema

  • Dores ao longo das jornadas. Partimos da nossa biblioteca de pesquisa e mapeamos as dores nas jornadas de compra e venda, particular e profissional. Um fórum com os designers escolheu quais atacar.
  • O mapa do site como era. Mapeamos web, web mobile, iOS e Android. Só o mapa já mostrava que as pessoas não achavam o mesmo item no mesmo lugar.
  • Palavras. Um estudo de taxonomia achou a mesma funcionalidade com nomes diferentes em cada plataforma.

Onde os menus antigos quebravam regras básicas

  • Mais de 7 itensnum mesmo menu
  • Palavras repetidasentre os itens
  • Mais de 2 palavraspor item
  • Mais de 25 caracterespor item
As checagens de UX writing que fizemos no menu de cada plataforma.

Desenhando e testando

Com um grupo de designers, montamos o mapa do site ideal. Depois conduzi workshops de ideação, mobile first, porque a tela pequena era a restrição mais difícil pra nova estrutura. Duas rodadas de crítica com todos os times que a navegação ia afetar trouxeram riscos, dados e ideias antes de irmos pros usuários.

Testamos palavras e estrutura com card sorting, entrevistas e testes de cloze. Depois, dez usuários particulares e profissionais passaram por um teste de usabilidade do conceito.

  • Navegação por abas, e os nomes das cinco abas
  • Mensagens e notificações num lugar só
  • Uma Home dividida entre anúncios e serviços pra quem vende
  • A Conta como vitrine, com ações rápidas
  • Um lugar só pra pagamentos
Redesenhado: as cinco abas, e o que o teste de usabilidade validou.

Do teste pro código

Depois de refinar o visual com o time de design system, entregamos em ondas, começando por uma navegação responsiva na web. Componentes novos entraram no design system: navegação inferior, header 2.0, nav bar, uma nova página de conta e o card de anúncio.

Pro teste A/B ser justo, a navegação nova tinha que entrar em todas as páginas ao mesmo tempo. Foi aí que complicou. Uma reestruturação dissolveu o nosso time, stakeholders importantes foram desligados, e alguns times não estavam prontos pra atualizar as páginas. O teste rodou com falhas de experiência que a gente não conseguiu corrigir.

O que o teste mostrou

Mesmo assim, os números se mexeram. Nos apps, todas as abas subiram: cliques em Explorar cresceram 430%, Conta 51,9%, inserir anúncio 23,3% e Chat 17,8%. Na Home da web, a nav bar nova aumentou o uso da navegação global em 23%.

Um número pedia cuidado: inserir anúncio a partir da Home da web caiu 25%, sem impacto na inserção de anúncios no site todo. Era a principal métrica a estabilizar antes de lançar.

A navegação nunca foi pro ar do jeito que testamos. Mas depois a OLX adotou a navegação inferior que desenhamos nos apps e na web mobile.

O que eu levei comigo: mudar a navegação mexe na página de todos os times ao mesmo tempo, então trazer cada time junto é tão parte do trabalho quanto o design.