Como melhorar a experiência de compras dos usuários do iFood Mercado?
A saga de fazer compras em supermercado pelo iFood que deu origem a um estudo de UX
Esse case está sendo desenvolvido durante as reuniões do grupo UX em Casa.
Maio de 2021, cheguei de viagem às 21h de uma quinta-feira. Foram seis longas horas de máscara e sem comer dentro do ônibus entre São Paulo e Rio. Tudo que queria era chegar em casa, sentir a liberdade única de tirar a máscara PFF2 do rosto e comer tudo que existia dentro da geladeira.
Cheguei, me libertei da PFF2 e pronto: nada na geladeira. Divido apartamento com a Isabela e ela, por estar sozinha em casa, decidiu não fazer compras e pedir comida por delivery de restaurantes nas quatro semanas que passei fora.
Conversamos sobre fazer as compras do mês e ela disse: “Vamos ao mercado, mas não quero fazer compras pelo iFood outra vez não”. Isabela pede comida por delivery no iFood, mas mesmo em tempos de COVID-19 (onde sair de casa significa colocar a própria vida em risco) ela prefere ir até o mercado, ter contato com outras pessoas e voltar carregando peso das compras ao fazer um compras de supermercado pelo aplicativo. A primeira coisa que pensei foi: a experiência que Isabela teve fazendo compras de supermercado pelo iFood foi realmente ruim.
A primeira vez que a Isabela fez compras de mercado usando o iFood foi há uns meses, já em tempos de pandemia. Lembro até hoje de como achamos graça da banana solitária que recebemos no meio de vários produtos trocados ou em quantidades absurdas. Era uma única banana, mas queríamos uma dúzia. O seletor do aplicativo dizia “1”, a Isabela no mercado compra UMA dúzia e assim a confusão estava feita.
No dia seguinte, ainda sem nada pra comer mas com preguiça de ir até o mercado, decidi pedir as compras pelo iFood. Abri o aplicativo atenta para não cometer os mesmos erros que a Isabela cometeu. Na minha lista de compras, entre outros itens, estavam: 7 salsichas e 2 cabeças de alho.
Quando vou ao mercado, peço “sete salsichas” para o atendente da área de frios. Quando quero alho, pego duas cabeças na montanha de alhos e vou para o caixa. Mas no aplicativo eu precisava selecionar o peso desses itens. Selecionei, paguei, esperei a entrega. Acho que não preciso dizer que confundi tudo outra vez.
Fiquei pensando: será que eu sou muito ruim com as medidas de peso ou esse é um problema que outros usuários encontram quando fazem compras em supermercados pelo iFood? Trouxe essa história para o meu grupo de estudos e propus um desafio:
Como conseguimos transformar a experiência de compras em supermercados pelo iFood em uma experiência mais fluida e próxima da que temos quando vamos pessoalmente a um supermercado?
Levantamento de dados e geração de hipóteses
Fizemos uma desk research para levantar dados sobre os hábitos de consumo de clientes de supermercado, tanto daqueles que compram online quanto dos que fazem compras de forma presencial. Nesse momento, buscamos informações sobre quais são os itens mais comprados, como os pagamentos são feitos, quais são as maiores insatisfações dos clientes que fazem compras de supermercado online e como todo a experiência de compra foi impactada pelo avanço da pandemia de COVID-19. Depois da desk research organizamos as informações e dúvidas mais relevantes para o nosso estudo em uma Matriz CSD.
Enquanto levantávamos essas informações, conversei com alguns amigos para entender se eles tinham passado por algum problema ao fazer compras pelo iFood. Perguntei a eles “qual foi a maior dificuldade que vocês encontraram quando fizeram compras de supermercado pelo iFood?”. Essas foram algumas das respostas:
Planejamento da pesquisa
A partir da análise dos dados coletados na desk research elencamos nossas principais dúvidas e hipóteses:
Os usuários do iFood sentem a necessidade de usar mais de uma forma de pagamento no mesmo pedido, podendo dividir em mais de um cartão de crédito, em cartão + dinheiro ou dividindo com outra pessoa?
Em compras grandes pelo iFood, o usuário não tem um controle sobre a quantidade de itens que colocam no carrinho (em compras nos supermercados físicos o carrinho fica sempre no campo de visão do cliente, facilitando esse controle).
O usuário do iFood muitas vezes não consegue usar os seletores de quantidade site de uma forma eficiente sem se confundir ao selecionar a quantidade de produtos
Decidimos dividir o nosso processo de descoberta em duas etapas: uma pesquisa quantitativa e testes de usabilidade. Na pesquisa quantitativa, buscamos entender os hábitos de pagamento dos clientes de supermercados. Nos testes de usabilidade, vamos propor uma série de tarefas a serem realizadas por usuários na versão web do iFood e as mesmas tarefas serão realizadas no protótipo que criamos com algumas alterações na interface, a fim de validar as nossas hipóteses.
Pesquisa quantitativa
Participaram da pesquisa 70 pessoas. Dessas:
- 61,4% tem entre 19 e 30 anos;
- 15,9% divide o pagamento das compras em mercados presenciais em duas ou mais formas de pagamento (mais de um cartão, cartão + dinheiro…);
- 41,4% divide as contas de supermercado com outras pessoas (familiares, amigos…);
- 17,1% das divisões das contas de supermercado são feitas no ato da compra.
A nossa pesquisa confirmou uma das nossas hipóteses: um número considerável de clientes de supermercado divide suas compras em mais de uma forma de pagamento ou com outras pessoas. Atualmente o iFood não permite que um pedido seja feito em grupo direto pelo aplicativo. Ao comprar em restaurantes essa divisão pode ser feita na entrega, ao fazer o pagamento pela máquina do entregador. Isso não é possível ao fazer compras de supermercado porque a plataforma web só aceita pedidos pagos diretamente pelo site.
Transformando o iFood Mercado em… Um mercado (online)
O iFood foi pensado para ser uma plataforma de delivery, mas a experiência de compras em um delivery de restaurantes é diferente da experiência de compras em um delivery de mercado. Cada um dos processos possui as suas particularidades. Enquanto nos restaurantes o cliente seleciona pratos, nos mercados os clientes selecionam itens com pesos e em quantidades variadas.
Atualmente, a versão web do iFood separa os itens dos mercados em “corredores”:
Em um mercado físico os corredores são organizados de uma forma lógica, facilitando o processo de compra e, ao mesmo tempo, estimulando os consumidores a comprarem determinados itens (que estão em promoção, que são mais caros ou que estão com a data de vencimento próxima). O mercado é dividido em setores, esses setores em corredores e esses corredores em prateleiras. É por existir uma lógica de organização que nós, clientes, conseguimos nos achar quando entramos em um mercado que não conhecemos.
Essa é uma das formas mais usadas na organização dos setores de supermercado:
- Itens mais vendidos no fim do corredor (assim as pessoas passam por todos os produtos antes de chegar no que estão buscando);
- Setor de promoções no meio do corredor, em destaque;
- Cereais e grãos na entrada;
- Frutas, legumes e vegetais na entrada;
- Congelados nos fundos.
Pensando nisso, alteramos a disposição dos corredores para que fiquem organizados de uma forma mais parecida com os de um mercado físico, assim os fluxo de seleção de produtos fica mais intuitivo e parecido com o fluxo de seleção de produtos em um supermercado.
Ao selecionar os produtos na página do iFood, encontramos dificuldades para entender a quantidade de itens que estão sendo selecionados, principalmente nas telas de produtos a granel (frutas, legumes, vegetais…). Atualmente, as telas de seleção do iFood são assim:
Essa é a tela expandida, com as informações sobre o item. Também é possível adicionar os itens direto dos corredores. Dessa forma, não se vê informações sobre o peso selecionado.
Ao clicar em “Adicionar” na tela expandida do item, aparece um seletor de quantidade. O valor aparece abaixo do nome do produto, assim como o preço do quilo e o preço estimado por item. Ao comprar no mercado, selecionamos os itens a granel por quantidade e eles são pesados depois, quando passam pela balança do caixa ou do setor. Já no iFood, o usuário seleciona o item pelo peso e para entender a quantidade aproximada de itens o usuário precisa fazer um cálculo.
Para facilitar esse processo e evitar que o usuário fique confuso em relação a quantidade de itens que selecionou, propomos que essa seleção seja feita dessa maneira:
Aqui, o usuário clica em adicionar e um seletor de quantidade abre. Ao selecionar o peso dos itens, o iFood mostra uma quantidade aproximada de itens de acordo com o peso unitário do produto. Ao cadastrar um novo produto, o mercado pode cadastrar o seu peso unitário, permitindo que essa conta seja feita dentro da plataforma.
Abaixo da seleção aparece uma mensagem avisando que essa quantidade é uma estimativa, já que esse produtos têm pesos e tamanhos variados.
Antes de finalizar a compra o usuário precisa ter certeza de que selecionou todos os itens que precisava. Ele então abre o carrinho para verificar. A tela do carrinho de compras do iFood é assim:
Existe uma caixa na parte superior do carrinho que diz ao usuário o quanto falta para que ele não precise pagar pela entrega. Abaixo, o nome do supermercado, um link para o catálogo e um campo com os itens que foram adicionados ao carrinho. Esse campo é confuso porque ele não se destaca de forma alguma do restante da tela. Existe um divisor entre os setores e os alimentos selecionados que é do mesmo tamanho e cor dos outros divisores da tela, o que faz parecer que é só mais um item de texto dentro da tela do carrinho. Ao lado, quase imperceptível, vemos uma barra de rolagem. Esse screenshot foi tirado com o zoom do navegador em 100% e o carrinho aparece assim em telas com diferentes resoluções. Ao diminuir o zoom, os itens do carrinho ficaram mais evidentes, mas ainda confusos por não haver uma hierarquia clara na divisão dos itens da página.
Propomos então a seguinte mudança:
A caixa de itens no carrinho agora aparece com um fundo cinza e com uma barra de rolagem com mais contraste, deixando claro que existe mais texto além do que aparece na tela. Também é importante entender que, pensando em acessibilidade, essa alteração é significante. Pessoas com baixa visão podem ter dificuldades quando os elementos de uma página não são contrastantes. Para ganhar um pouco de espaço e aumentar o tamanho dessa caixa, diminuímos o campo de adicionar o código de cupom e tiramos o fundo da informação sobre o frete, mantendo o destaque dessa informação usando a cor azul.
No checkout, acrescentamos a opção de dividir valor. Ao clicar, o usuário consegue selecionar um contato da sua lista para dividir o valor final da compra diretamente pelo aplicativo, como já é feito pela Rappi, Uber e 99. Essa funcionalidade atende as pessoas que costumam dividir o valor final da compra com familiares e amigos.
UX Writing — Revendo e alterando alguns textos para promover uma boa experiência
Segundo as três melhores práticas de UX writing definidas pela Google, os textos no seu produto devem:
- Ser claros, sem termos complexos;
- Ser concisos e eficientes;
- Ser úteis e ajudar seu usuário sobre seus próximos passos.
Pensando nisso, buscamos entender se havia a necessidade de alterar algum texto dentro da plataforma para ajudar o usuário a atingir o seu objetivo.
No site do iFood, ao lado do nome do supermercado, podemos encontrar um link com o texto “Ver mais”. Ao clicar, o usuário tem acesso a informações importantes como o endereço do supermercado, os horários de funcionamento e formas de pagamento aceitas.
Perguntei a alguns usuários do IFood o que eles esperavam que aconteça caso cliquem em “Ver mais”. Essas foram as respostas:
“Uma bio? Outros produtos? Outros mercados parecidos? Não sei.”
“Outros mercados similares?”
“Acho que eles sugerem outros mercados.”
“Endereço do supermercado, telefone deles.”
“Promoções?”
Ao alterar o “Ver mais” para “Sobre o supermercado” e refazer a mesma pergunta, os usuários responderam:
“Nesse ai parece que é um botão que fala uma bio do mercado.”
“Esse ai são as informações sobre horário de funcionamento, telefone, contato.”
“Endereço do supermercado, deve ter o telefone também.”
Além disso, trocamos o texto do botão “Ver mais” que ficava ao lado dos destaques da página inicial por textos mais explicativos, como “Ver todos os itens do último pedido” para o “Peça de novo” e “Ver mais promoções” para o “Corredor de promoções”. Assim garantimos que a ação que o usuário vai executar ao clicar está clara, além de tornar a página mais acessível para pessoas que utilizam leitores de tela.
Testes de usabilidade, aprendizados e próximos passos
Quando montamos nosso cronograma, planejamos realizar dois testes de usabilidade, cada um com três pessoas. Os dois testes seriam realizados em paralelo e serviriam para confirmar as seguintes hipóteses:
Em compras grandes pelo IFood, o usuário não tem um controle sobre a quantidade de itens que colocam no carrinho (em compras nos supermercados físicos o carrinho fica sempre no campo de visão do cliente, facilitando esse controle)
O usuário do IFood muitas vezes não consegue usar os seletores de quantidade site de uma forma eficiente sem se confundir ao selecionar a quantidade de produtos
Nossa ideia era realizar os testes em paralelo e, posteriormente, cruzar os dados para validar ou não as nossas hipóteses. Gastamos nossos esforços planejando e desenhando as telas e, durante isso, algumas pequenas alterações foram feitas na interface web do iFood Mercado. A mais expressiva foi em relação a visibilidade do carrinho. A primeira alteração feita foi a separação dos itens por tipo (antes os itens eram listados na ordem que eram colocados, sem separação de itens por grupos). A segunda foi a reorganização dos elementos no box onde está o carrinho, aumentando o espaço e melhorando a visibilidade. Agora o carrinho aparece assim:
Com essa atualização, percebemos que seria mais eficiente fazer o teste usando a interface do iFood que estava no ar antes de planejar qualquer alteração. Assim poderíamos utilizar os dados coletados para fundamentar as nossas escolhas. Mesmo assim, as atualizações feitas pelo time de design do iFood mostram que nossas hipóteses sobre o carrinho do site estavam corretas.
Ainda temos algumas considerações sobre as interfaces, principalmente em relação a acessibilidade. Como próximos passos, queremos verificar se o site do iFood está de acordo com a Lei 13.146 que estabelece que todos os sites brasileiros devem ser acessíveis. De acordo com o Siteimprove Acessibility Checker, foram encontradas algumas ocorrências de falhas relacionadas a acessibilidade, como a falta de contraste entre alguns elementos, ausência do focus visible ao utilizar o tab para navegar pelo site, textos alternativos idênticos ao texto do link e links com textos idênticos levando para destinos diferentes dentro do site. Vamos estudar sobre acessibilidade e analisar a interface para propor alterações que tornem o iFood um produto mais inclusivo e acessível.
A você que leu até aqui: muito obrigada pelo seu tempo e atenção 💜. Ficaria muito feliz em poder trocar uma ideia ou receber um feedback! Se quiser conversar, pode me chamar no LinkedIn. 😄
