Aqui
tem
desconto
Contexto
O desafio de trabalhar com a integração das compras O2O (online to offline) nos levou a mais uma oportunidade nas Lojas Americanas: a criação do Aqui tem desconto, uma feature do app que apresenta descontos para o cliente e reduz o tempo de espera em loja. Tínhamos o objetivo macro de aumentar a taxa de download do app da Americanas, que estava atrelado a um dos OKRs da companhia. E dentro do nosso produto, o Modo Loja, uma espécie de assistente de loja, nosso objetivo era reter esses usuários, fazendo com que, cada vez mais, eles quisessem estar ali conferindo novas promoções e ativando descontos para usar na loja física.
Oportunidade
O app já contava com a opção de comprar online e pegar na loja física e muitas vezes os clientes, quando na loja, se deparavam com cupons de desconto oferecidos para quem fizesse download do app. Porém, passar por esse fluxo é frustrante para as pessoas pois o tempo de duração dessa jornada pode ser muito maior do que o os 5 minutos que se espera levar pra realizar uma compra no caixa.
Foi então que essa feature, vencedora de um Hackathon na companhia, e que chegou a rodar como um MVP, mas precisou ser interrompida antes que mudanças significativas de tecnologia que inviabilizassem seu funcionamento, ganhou novamente os holofotes e vimos a oportunidade de construir do zero uma feature mais robusta, que atendesse ainda melhor nossos usuários.
Desafio
Acabar com o tempo de espera gerado pela compra online quando o cliente está na loja, possibilitando que esse usuário ative os descontos no app e, na mesma hora, leve seus produtos ao caixa para comprar.
Discovery
Pesquisas anteriores
Acessamos os insumos das pesquisas já feitas para entender os resultados obtidos anteriormente e reunimos alguns insights como:
usuários têm necessidade de organizar os produtos por departamento
anseio por ofertas personalizadas
clientes gostariam de ver mais informações do produto
clientes recorrem ao Facebook da loja para ver ofertas
a feature suscita sentimento de orgulho por "saber encontrar promoções"
promoções descentralizadas na loja
Blueprint da jornada | backstage
Traduzi alguns esquemas gráficos no blueprint na jornada focado no backstage, a ideia foi usar essa ferramenta para termos mais clareza de como se dá o funcionamento e integração dos sistemas que fazem possibilitam a existência da feature. Esta etapa foi fundamental para entendermos a importância do CPF do usuário estar atrelado à oferta, afinal é isto que possibilita a identificação dos descontos disponíveis para o usuário.
Clique na imagem para ampliar
Benchmark
Agora que já havíamos entendido como se dava o uso dos descontos e a importância de ter o CPF atrelado ao sistema, fomos em busca de outros players no mercado que oferecessem produtos parecidos. Esta etapa foi importantíssima para que pudéssemos extrair insights das jornadas que iam se desenhando a cada bench realizado. Trouxe três dos mais relevantes para o projeto:
Zona Sul
Aqui há duas formas de obter descontos, ambas para clientes logados no app. A primeira é comprando os produtos que têm desconto para clientes cadastrados, sem necessidade de ativar as ofertas. A segunda forma é usar o ”Minhas Ofertas”, onde o cliente escolhe até 10 itens para ativar 15% de desconto e a oferta fica válida para o CPF dele por 7 dias.
Destaco o "Minhas Ofertas". Com um passo a passo sucinto, e uma rica sessão de perguntas e respostas, o app traz o único serviço que possibilita a escolha dos itens que estarão em promoção.
Clique na imagem para ampliar
Prezunic
Neste aplicativo o cliente logado confere todos os tipos de ofertas disponíveis e ativa as ofertas que quer usar.
O destaque aqui vai para o totem colocado na porta do mercado para que o usuário, mesmo sem acesso à internet, consiga se cadastrar no clube de compras do mercado.
O serviço promete, ainda, dar acesso ao wi-fi da loja para os integrantes do clube, solucionando uma dor dos usuários que é não ter internet para acessar o app na hora das compras.
Clique na imagem para ampliar
Pão de Açúcar
Aqui os produtos em oferta são agrupados e exibidos em cards que sinalizam a mesma porcentagem de desconto para aquele grupo. O cliente logado no app ativa os descontos que quer usar um a um ou pode ativar todos de uma vez.
O destaque aqui vai para a sinalização de consumo da oferta. A feature mostra o limite de uso da oferta e quantos itens daquele grupo eu já comprei, indicando que eu ainda poderia comprar mais com os 20% de desconto oferecidos, dentro da data de validade da oferta.
Clique na imagem para ampliar
Prototipação
Cards de produto e componente
Algumas informações eram fundamentais para o card de produto nesse momento:
Depois de estudar diversas soluções e definir como seria a v1 do card, fiz mais alguns estudos e então trouxe o card para o componente, que abrigava também outros itens:
Teste de usabilidade v1
Enquanto trabalhávamos na home do Aqui tem desconto, levamos o componente para o primeiro teste de usabilidade. Eu e Thais, pesquisadora do meu squad, realizamos o teste nas Lojas Americanas do shopping Nova América, nosso objetivo era testar cada versão com 5 pessoas que estivessem em busca de descontos.
Duas versões do componente foram levadas para o primeiro teste. Como havia um histórico do uso da cor verde para o Aqui tem Desconto, tínhamos a hipótese de que o uso da cor ajudaria na encontrabilidade do componente.
Além disso, testamos também o entendimento do texto criado para o modal explicativo, que tinha a função de dizer ao usuário o que ele precisaria fazer para obter os descontos.
Resultados do teste de usabilidade v1
Algumas verbalizações enfatizaram a importância da comunicação nesse projeto:
Ativei... Ah, eu tenho que me dirigir ao caixa... Mas, onde está esse caixa?
Não dá pra saber se é para pagar pelo app ou dentro da loja.
Outros resultados importantes para seguimos em frente foram:
-
O background verde ou branco foi indiferente para a encontrabilidade do componente;
-
Os usuários não encontraram o tooltip;
-
As pessoas não encontraram o botão de "ativar todos";
-
As pessoas esperam ver uma página com os produtos em desconto ao clicar em "ver mais descontos";
-
Os usuários tiveram dificuldade de compreender o passo a passo necessário para ativação dos descontos, no modal;
-
A maioria das pessoas clicou no card de produto esperando ver mais informações;
-
Muitos usuários clicaram no card de produto esperando ver mais informações sobre o produto e o desconto.
Prototipação
Home Aqui Tem Desconto
A ideia para a primeira versão da home era trazer todos os produtos em desconto, como esperado pelos usuários, organizados em categorias.
Utilizando componentes do design system, como as tabs e o campo de busca, prototipei a tela para, antes de levarmos pra teste de usabilidade, compartilharmos com todos os integrantes do time de UX Writing.
Critique de writing
Depois de realizar alguns ajustes na v1 do componente levada para teste de usabilidade, como a troca do tooltip por um botão com texto, a retirada do botão de ativar todos, a transformação do card de vertical para horizontal e o faseamento das informações do modal explicativo, passamos por essa importante etapa de validação.
Agora já com a home, a tela de detalhes do produto e um novo modal, que aparece na primeira ativação de desconto, compartilhamos o projeto com todo time de writing e, em dinâmica realizada pela UX Writer do meu squad, a Giane, e ganhamos feedbacks valiosíssimos, como:
-
Faz sentido, nos modais, especificar que a ativação é no app;
-
Na tela detalhes do produto, podemos complementar o botão para “ativar desconto”, por ter mais espaço e para dar mais contexto à ação, já que a página é uma PDP e a ação esperada poderia ser um “comprar”;
-
É importante contextualizar o usuário sobre a busca pois ela pode ser referente tanto aos produtos com desconto quanto a produtos da loja em geral;
-
As tags embaixo da barra de busca talvez confundam os usuários, pois temos tags relacionadas a descontos e a produtos/categorias. Para facilitar a compreensão, talvez seja uma boa acrescentar um complemento em “todos”, tipo “todos os descontos”.
-
No modal Como funciona, o ideal é trocar "Informe seu CPF ao atendente." por "Informe seu CPF à pessoa atendente.", para usarmos gênero neutro.
Teste de usabilidade v2
Realizamos alguns ajustes no protótipo:
-
Horizontalização do card de produto, visando ocupar menos espaço na tela;
-
Faseamento do texto do modal;
-
Criação um novo modal, exibido na primeira ativação;
-
Substituição do tooltip belo botão com texto;
-
Retirada do botão "ativar todos", que agora integraria a tela do Aqui tem desconto.
E entendemos também que trazer o review do produto poderia ajudar na tomada de decisão do nosso usuário, então, junto com os feedbacks do critique de writing e os resultados da v1 do teste de usabilidade, essa feature também fez parte do protótipo que levamos para a segunda leva de testes de usabilidade.
Resultados do teste de usabilidade v2
Tivemos novamente algumas verbalizações destacaram a importância da comunicação nesse projeto e solidificaram a ideia de que é frustrante para o usuário saber que há um review e não ter acesso a ele. Para esse produto ficou claro que, quando há interesse pelo o review, o usuário anseia pelo conteúdo. Já nos casos em que o usuário não sente necessidade de consultar o review, como quando ele vai comprar um chocolate que já conhece, ele também não se importa se não tiver acesso à nota dada por outras pessoas. O que nos levou ao entendimento de que, se trouxéssemos a feature, teríamos que trazer a página interna também, com o conteúdo.
Esperava que eu pudesse ver a avaliação das outras pessoas, o que está escrito.
Eu esperava primeiro ver os outros descontos e não os que eu tenho ativos.
Finalizaria a compra pelo site, porque geralmente sai mais barato
Outros resultados importantes foram:
-
O modal de primeira ativação não precisa ter botão de fechar pois o usuário pode fechá-lo ao clicar fora do modal ou no botão "ok, entendi", assim há mais chances de que o passo a passo seja lido;
-
Fasear o texto do modal de primeira ativação também seria importante para que fosse melhor entendido;
-
Ao final do carrossel no componente, tínhamos a oportunidade inserir um atalho para a home;
-
Na aba "todos os descontos" os produtos precisam estar divididos em categorias;
-
Não vale a pena ter o componente de review se não formos trazer a tela com comentários pois clicar nas estrelinhas e não receber nenhum feedback é frustrante para os usuários;
-
O card explicativo na PDP poderia se tornar mais um espaço para esclarecer o funcionamento da feature, já que essa comunicação se mostrava cada vez mais importante para o projeto.
MVP
Como o projeto é grande, realizamos um versionamento, assim poderíamos lançar o MVP para irmos testando e iterando enquanto trabalhávamos na construção da tela de review e fazíamos os ajustes provenientes do último teste.
Como a essa altura já sabíamos o que era fundamental para o produto rodar sem maiores perdas para a usabilidade, levamos para o nosso MVP:
-
Onboarding explicativo, visto que agora o acesso ao Aqui tem desconto não se daria mais pelo componente, e sim pela home ou pelo menu do app da Americanas. O onboarding ganhou também uma versão "empty state", ou seja, exibiríamos uma segunda versão do onboarding caso não houvesse nenhum produto cadastrado no momento em que o usuário acessasse a feature, desta forma conseguimos economizar mais um tempo de desenvolvimento;
-
Cards de produtos informando porcentagem de desconto, nome e foto do produto, preço de/para, disclaimer sobre limite de compra, validade da oferta e botão de ativar oferta;
-
Home com produtos divididos por categorias;
-
Possibilidade de ativar todos os descontos ao mesmo tempo;
-
Botão "como funciona" agora na home, pois o componente não era fundamental agora e seria desenvolvido posteriormente;
-
Modal explicativo atualizado com novos textos e padronizado de acordo com o DS;
-
Modal de primeira ativação também atualizado, agora com o texto faseado para melhor compreensão dos usuários;
-
Modal de primeira ativação exibido quando o usuário passa mais de 20 dias sem fazer uma ativação.
Fluxo MVP
Disponibilizei junto com o handoff o fluxo para o MVP, desta forma o time de desenvolvimento não teria maiores problemas ao entender cada detalhe e o restante dos stakeholders também poderia consultar a ferramenta quando fosse necessário.
Clique na imagem para ampliar
Teste de usabilidade v3
Agora que nossa feature já estava quase em produção, seguimos em frente com a evolução do MVP. Todos os nossos contatos com os usuários até então deixaram clara a necessidade de possibilitar que eles buscassem por produtos em desconto, além disso, por questões jurídicas, traríamos também o acesso à tela de termos e condições para emissão de cupons de desconto.
Outro importante passo que daríamos em seguida seria a divisão dos produtos pelas tabs de categorias. Depois de muita troca com outros designers e alinhamentos com o time do design system, eu trouxe o componente de tabs atualizado para esse teste e aproveitamos para validá-lo para que fosse atualizado no DS.
Como a feature pode ser usada em qualquer uma das Lojas Americanas, estávamos nos deparando também com o cenário em que o produto não teria o preço no card, pois poderia não refletir a realidade de todas as lojas. Então levamos mais esse cenário para teste.
Resultados do teste de usabilidade v3
-
Não houve dificuldade de compreensão do funcionamento das tabs;
-
Alguns usuários clicaram nas tabs ao tentar clicar no como funciona;
-
100% dos usuários reclamaram de não ter o preço no card, mas o disclaimer não foi entendido como um erro do app e sim como um aviso mesmo;
-
Não houve dificuldade de acesso à tela de termos e condições para emissão de cupons de desconto.
Teste de usabilidade v4
Nossa maior preocupação agora era validar a PDP, página do produto, que aqui estamos chamado de tela de detalhe do produto, e a tela de review. Levamos para o teste duas versões da PDP que foram baseadas nas duas PDPs que tinhamos hoje em produção no app.
Novidades da PDP
-
Versões com e sem o preço;
-
Componente de review com acesso à tela de review do produto.
Versão 1
Card de preço logo após o nome do produto
Versão 2
Card de preço fixo na parte inferior da tela
Página de review
Muito semelhante à tela da esquerda, que estava em produção na época, porém, traz algumas particularidades pois a ideia aqui era que o usuário não enveredasse pelo fluxo de fazer um review do produto, mas sim que ele pudesse acessar os reviews já feitos pra ajudar na sua tomada de decisão.
O que trouxemos de diferente:
-
Não tem o botão "avaliar produto";
-
Não tem o gráfico de barra com a quantidade de avaliações de cada nível;
-
Não é possível sinalizar se a avaliação foi útil.
Resultados do teste de usabilidade v4
-
No card explicativo da PDP, as pessoas muitas vezes não chegavam no terceiro tópico, que nesse momento pra gente era o mais importante, pois é o que mais ajuda a entender como se dá essa experiência de compra;
-
Confirma-se que não vale a pena trazer review sem a página interna;
-
Na v1, não houve nenhum ruído na compreensão do valor do produto;
-
Na versão sem preço da v1, vale a pena reforçar que o preço deve ser conferido na prateleira, dizer somente ”na loja” ficou muito vago;
-
Na v2, alguns usuários não viram o preço na parte inferior da tela;
-
Na versão sem preço da v2, maioria dos usuários não encontrou a informação sobre como encontrar o preço.
Evolução do projeto
Produto em destaque
Em uma de nossas reuniões com stakeholders, conversamos sobre a necessidade do time de negócio destacar um ou mais produtos do Aqui tem desconto.
Desta forma, fiz uma análise dos fluxos da Americanas em que destacamos produtos e realizei um benchmark focado em produtos em destaque em outros players como Mercado Livre, Shopee e Amazon.
Realizei alguns estudos e conversei com a equipe de desenvolvimento, chegamos então à conclusão de que o mais viável no momento seria a ideia de trazer uma versão do card horizontal, anteriormente construído para o componente, cujo desenvolvimento já havia se iniciado.
Próximos passos
Assim como o desenvolvimento da parte de ofertas em destaque, outras fases estão previstas no roadmap do projeto, como a inclusão das tabs, a PDP e tela de review.
Métricas
Em cada fase do projeto definimos métricas para entender o comportamento do usuário. Alguns eventos são disparados quando o usuário clica no card de produto e no botão de ativar, por exemplo, assim como estamos medindo também o tempo que os usuários estão mantendo os modais abertos, nesse caso a ideia é entender se o modal está permanecendo aberto tempo suficiente para que a pessoa leia o texto. Métricas como pageviews também estão sendo levadas em consideração no projeto hoje, muito porque ainda não temos o componente em produção, então há dois pontos de entrada para a feature no app.
O produto foi lançado em outubro de 2022 e, entre o período de outubro a janeiro, conta com uma média mensal de resgates por ativações de 12,3%. Análises recentes evidenciam a importância da comunicação em loja para efetividade do produto, pois quando conseguimos esse reforço, durante a campanha do Dia das Crianças em outubro, o produto chegou a contar, no dia 8/10, com um impressionante índice de 69,4% de resgates por ativações.
Conclusão
Trabalhar com O2O e seu desafio de trazer o online para o offline foi muito enriquecedor para a minha jornada, inclusive do ponto de vista da designer de serviço que habita em mim, rs. Este projeto foi um dos meus maiores desafios mas, sem dúvidas, a forma como nos organizamos foi o que possibilitou, por exemplo, a entrega de um MVP robusto e já com um roadmap de próximas features estabelecido. Sou muito grata à Gi, UX Writer, e à Thais, pesquisadora do meu time, conseguimos para projeto firmar uma parceria incrível. Rodamos testes de usabilidade durante um dia e iteramos já no dia seguinte, um sucesso! :)