Desenhando uma nova página de anúncio

Como redesenhamos a página do anúncio para torná-la mais flexível e melhorar a experiência de busca na OLX

Por Alice Wanderley e André Dias

Versão em inglês →

Tendo uma plataforma com mais de 9 milhões de anúncios ativos e 12 categorias tão distintas quanto “Agro e Indústria”, “Imóveis” ou “Telefones e celulares”, a OLX precisa que as páginas de seus anúncios sejam flexíveis para comportar toda a diversidade de conteúdo produzido por seus usuários.

Com mais de 48 milhões de acessos diários (dados de setembro/2018), ela é a 2ª página mais visitada do nosso site mobile e, por este motivo, foi escolhida pelo time de Content Discovery para ser a primeira página mobile a ser redesenhada.

Nosso desafio, então, era desenhar uma página que funcionasse bem para todas as categorias e que fosse flexível para permitir algum nível de customização de acordo com a categoria onde o anúncio está publicado.

Ponto de Partida

Fazendo testes e entrevistas com usuários, identificamos problemas na usabilidade e na hierarquia dos elementos que dificultavam o consumo das informações dos anúncios:

1. Pouca relevância para elementos importantes como fotos do anúncio e preço.
2. Impossibilidade de ampliar as imagens.
3. Pouca relevância para os dados estruturados do anúncio inseridos pelos anunciantes.
4. Pouco destaque para os botões de contato com o anunciante (Ligar, Enviar mensagem ou Chat).

Desenhando e compartilhando

Considerando as dores e oportunidades levantadas, exploramos alternativas para resolvê-las. A partir da investigação de como outros produtos de sucesso resolviam as mesmas questões, fizemos sketches que serviram como ponto de partida para sessões de cocriação com integrantes de outros times da empresa.

Prototipação e validação

Após incorporar os inputs recebidos às soluções desenhadas, preparamos protótipos de alta fidelidade (neste caso usamos o Principle) para coletar feedback dos usuários em testes no formato de guerrilha.

A partir de uma tarefa simples de busca de um anúncio específico, o nosso objetivo era verificar a compreensão dos usuários sobre alguns dos elementos textuais e visuais que estávamos propondo.

Foram identificados alguns pontos importantes de mudança:

1. Inclusão do label “Anunciante” na área que fica fixada à parte inferior da tela, para facilitar a compreensão desta informação.
2. Alteração do texto “Desapegando desde Dezembro de 2016” para “Na OLX desde Dezembro de 2016”. O texto inicial havia sido interpretado pelos participantes como sendo o tempo do anúncio no site e estava causando a impressão de que o anúncio era antigo.

Solução Final

Todas as alterações de interface tinham como objetivo facilitar o consumo das informações e, assim, apoiar o usuário em sua tomada de decisão.

#1 Fotos e preço do anúncio

As fotos do anúncio e o preço são os principais elementos responsáveis pela tomada de decisão por parte do usuário interessado em comprar ou negociar. Por este motivo, demos a eles maior destaque na página.

#2 Galeria de fotos

Tendo percebido a importância das imagens no processo de decisão, a impossibilidade de ampliá-las impedia que o usuário visse mais detalhes do produto antes de entrar em contato com o anunciante. Na nova página, foi incluído um componente de fotos em que é possível navegar entre as fotos sem sair do contexto do anúncio e também ampliá-las e vê-las com mais detalhes.

#3 Descrição e dados estruturados

As descrições são informações inseridas pelos próprios anunciantes e que possuem um limite de 6000 caracteres. Descrições muito longas “empurravam” o conteúdo para baixo, despriorizando os dados estruturados que são importantes para o consumo da informação e a comparação entre anúncios. Buscando otimizar o espaço do anúncio, limitamos a descrição em 3 linhas e incluímos a opção “Ver descrição completa” para o usuário ver o restante caso tenha interesse.

#4 Botões de contato

Os botões para entrar em contato com o anunciante são extremamente importantes para os vendedores e compradores. Visando torná-los disponíveis durante toda a navegação pelo anúncio, o fixamos na parte inferior da página, na área quente de toque dos dispositivos móveis.

#5 Área do anunciante

A área do anunciante, antes inexistente, estava sendo desenhada por outro time e foi incluída na página do anúncio para que o interessado tenha mais informações sobre o anunciante antes de entrar em contato. Também incluímos dicas de segurança contextuais, que variam de acordo com a categoria onde o anúncio se encontra.

Resultados

A solução final já está disponível para 100% dos usuários que acessarem a plataforma pelo navegador dos seus celulares.

Por meio destas melhorias de interface e arquitetura da informação, conseguimos obter um incremento de 6.5% no total de contatos realizados nesta plataforma e mais 4.5% de aumento no número de páginas de anúncios visitados.

Muito obrigado pela leitura! Esperamos que tenham gostado. Se tiver algum feedback ou dúvida, adoraríamos saber. 😉

Say hello at: alice.wanderley@olxbr.com ou andre.dias@olxbr.com