Victor Vernilli

acessibilidade

Motivação

Durante o tempo que trabalhei na In Loco Media, participei da equipe de Ads Innovation. Essa equipe era responsável por desenvolver novos formatos de anúncios e melhorar os formatos já existentes. E para isso utilizamos metodologias de design centrado no usuário para alcançar nossos objetivos. Um desses novos formatos que criamos seria o carroussel ad ou galeria.

Processo

Pesquisa e Ideação

Antes de desenvolver o formato em si, era preciso decidir QUAL formato deveria ser feito. Listamos quais os formatos nós já oferecíamos aos nossos clientes na época, e vimos quais podiam ser desenvolvidos. Levantamos pontos fortes e fracos de cada formato e identificamos o objetivo e segmentação que combinava melhor com cada um.

A partir disso, vimos quais poderiam ser os objetivos que nosso portfólio não atacava ou não dava um bom suporte. Um exemplo: campanhas para anunciar vários produtos não era suportado pelos nossos anúncios.

Com essas informações internas, começamos a pesquisar sobre formatos que alguns concorrentes - como Facebook, Instagram, Google, etc - ofereciam e qual o melhor valor que podíamos levar para nossos clientes.

Depois dessa análise, encontramos o anúncio em formato de galeria ou carroussel. Esse novo formato adicionaria algo novo ao nosso portfólio e que nossos clientes conseguiriam enxergar valor.

Alguns formatos de alguns competidores Alguns formatos de alguns competidores

Alguns formatos de alguns competidores

Prototipação

Depois de decidido o formato, partimos para a etapa de prototipação. Queríamos criar algo que provesse uma boa experiência para os usuários, que eles não ficassem em dúvidas sobre o que estava sendo anunciado nem o que aconteceria após o clique no mesmo.

Durante a análise de concorrentes, vimos alguns recursos que eram mais utilizados e difundidos no mercado atual de mídia digital. Listamos alguns elementos que seriam necessários para conseguir entregar o valor para nossos clientes.

Criamos vários esboços desse novo formato, com o objetivo de identificar variações dos elementos, posição, dimensões, textos, etc. Uma das características era que a peça pudesse ser responsiva, se adaptando a tela do usuário não importa a posição do celular, seja “em pé” ou “deitado”.

Esboços de algumas ideias para o anúncio em carroussel

Esboços de algumas ideias para o anúncio em carroussel

Desenvolvimento

Para o desenvolvimento, seria necessário utilizar pacote front-end - HTML, CSS e JS - para criação da peça, que nesse caso é chamada pelo mercado de rich media. Para desenvolvimento de anúncios, é preciso sempre pensar que a peça poderá aparecer nos mais diversos tipos de telas e dispositivos.

Então a preocupação com performance e carregamento são de extrema importância, o que leva ao desenvolvimento de peças leves mas que consigam passar seu objetivo e valor. Levantamos algumas opções para o desenvolvimento, que foram: criar o formato todo do zero; ou utilizar um framework novo, o AMP. Decidimos desenvolver os dois e testar qual deles teria uma performance melhor, tanto de carregamento quanto de cliques.

Alguns protótipos em alta fidelidade

Alguns protótipos em alta fidelidade

Agora era preciso decidir qual métricas precisaríamos levantar, para conseguir analisar se o novo formato daria certo ou não. Levantamos alguns, como:

  • Tempo de carregamento
  • Tempo de visualização
  • Quantidade de arrastes para lado(swipes)
  • Quantidade de imagens vistas

Para capturar esses dados, além de utilizar os dados da própria rede de anúncios utilizada, foi utilizado o Mixpanel, uma ferramenta de analytics baseada em eventos, com ele é possível identificar como foi o comportamento de um usuário dentro de uma página, quais itens ele interagiu, etc. Assim seria possível receber esses dados complementares para entender o comportamento de uso do novo formato.

Resultado

Ao final de todo esse ciclo, criamos um formato novo, o carroussel ad, um formato para marcas anunciarem mais conteúdo ocupando menos espaço de tela, seja para vários produtos, seja para criar uma história sobre um único produto. Para conseguir ver mais conteúdo, o usuário precisa apenas arrastar os itens para o lado. Foram realizados vários testes, utilizando as duas versões, variando os elementos gráficos, etc.

A versão que decidimos colocar pra frente foi utilizando o AMP, pois ele carregava mais rápido o primeiro frame do anúncio, não fazendo o usuário esperar demais e enquanto o usuário via a primeira imagem, as outras imagens eram carregadas em segundo plano.

A versão com AMP teve mais tempo de visualização, ou seja, as pessoas ficavam mais tempo olhando o anúncio, o que gerou um número maior de interações dos usuários, além de mais conteúdo visto.

...