Isabel Marlasca UX/UI Designer

Select Language

Portuguese

Isabel Marlasca

Checkout | Buscapé

Imagem das de algumas telas do novo projeto de checkout, nelas, podemos ver a nova seção de pagamentos, a modal de resumo da compra (com todos os valores listados) e pílulas explicativas sobre a confiabilidade do marketplace Buscapé.

Projeto

Buscapé, mais que um comparador de preços

O Buscapé é uma plataforma referência de comparação de preços que há 25 anos conecta consumidores a diversas lojas.

Apesar da tradição, seu ambiente interno de marketplace sofria com grandes taxas de abandono no checkout, apresentava algumas inconsistências de marca e tinha seu nível de consciência baixo pelos usuários, causando desconfiança quanto à confiabilidade de lojas menos conhecidas

Objetivo

Otimizar o checkout, simplificando etapas com uma experiência fluida e alinhada à marca; contextualizar melhor a confiabilidade e seleção das lojas, aumentar a concentração/share de pedidos e rentabilidade do marketplace

Atuação

Durante o projeto, atuei junto a dois designers: um no discovery e outro no desenho da UI, assegurando uma abordagem coesa em ambas as etapas

Benchmarking

Pesquisa quantitativa

Blueprint com stakeholders

Teste de usabilidade

Design de interface e prototipagem

Documentação

Laryssa Bolele

Product Designer Pl.

Thiago Almeida

Product Designer Sr.

Dados

Inicialmente, observamos um checkout com muitas etapas, algumas repetições e um grande abandono ao longo da experiência de compra, representado no gráfico abaixo*

*Por confidencialidade do projeto, não serão divulgados dados sensíveis

Inicialmente, observamos um checkout com muitas etapas, algumas repetições e um grande abandono ao longo da experiência de compra, representado no gráfico abaixo*

*Por confidencialidade do projeto, não serão divulgados dados sensíveis

Gráfico ilustrando o funil de abandono de checkout. Um grande círculo no início representa o número total de visitantes que iniciam o processo de compra, enquanto os círculos menores subsequentes representam a diminuição do número de usuários que completam cada etapa, até chegar à conversão final.

Benchmarking • Tabela comparativa

Tabela comparativa de benchmarking entre o Buscapé e seus principais concorrentes. Os resultados sugerem que o Buscapé precisa melhorar seu desempenho em diversas áreas para alcançar a paridade com os líderes do mercado.

A imagem apresenta um gráfico de linhas coloridas, onde cada linha representa uma marca. A imagem destaca as etapas do checkout onde o Buscapé pode melhorar para aumentar suas vendas.

Oportunidade em destaque

Login obrigatório • Criação de conta

Aplicação de cupons • Diversificação dos meios de pagamento

Benchmarking

Teste de usabilidade

Marketplace Buscapé

Marketplace

Marketplace Buscapé

Usuários desconheciam o marketplace Buscapé, mas reforçavam que a ferramenta é facilitadora, uma vez que elimina a necessidade de criar múltiplas contas em diferentes sites

Confiabilidade

Usuários se mostraram desconfiados ao comprar de lojas menos conhecidas sem avaliações, desejando garantias de compra como as oferecidas por concorrentes

Novo checkout

Página de checkout do Buscapé, mostrando as etapas para finalizar uma compra: dados pessoais, endereço de entrega, forma de pagamento e resumo do pedido. Esses blocos estão em uma página única, o usuário consegue ver tudo de uma vez, sem clicar em várias telas separadas. Ao final, tomos textos explicativos sobre a garantia de compra e confiabilidade das lojas

Login: login obrigatório, remoção da compra como convidado

Single page: todo o checkout é visualizado em uma página única, com redução de etapas

Confiança: textos explicativos sobre as garantias e seleção das lojas

Tela de checkout de um aplicativo de compras, mostrando apenas três blocos empilhados: o primeiro de dados pessoais, com informações do usuário como e-mail, CPF e telefone; o segundo bloco de frete, com endereço preenchido e opção de frete selecionada e, por último, o método de pagamento, de visibilidade parcial por é necessário dar um scroll na tela para ver completamente. Ao final da tela, ainda é possível ver a modal de resumo da compra. Ela é fixa na parte inferior da tela e apresenta o valor total a ser pago na compra.

Dados salvos:

Se o usuário já tem conta e cadastro de endereço, segue diretamente para o frete

Dados salvos:

Se o usuário já tem conta e cadastro de endereço, segue diretamente para o frete

Tela de checkout com foco na seção de pagamento. Há a opção de utilizar o saldo de cashback disponível na carteira do usuário e o usuário pode habilitar ou desabilitar essa possibilidade. Em seguida, são apresentadas duas opções de pagamento: Pix com desconto e cartão de crédito com parcelamento, em que o usuário pode completar a compra caso o uso de saldo não seja suficiente para cobrir todo o valor. A opção de Pix está selecionada e por isso as instruções para pagamento estão visíveis. Ao final da tela, temos a modal de resumo da compra fixa, que apresenta o valor total a ser pago.

Resumo da compra:

Durante toda a jornada, usuário pode acessar os detalhes da compra na modal de resumo

Resumo da compra:

Durante toda a jornada, usuário pode acessar os detalhes da compra na modal de resumo

A terceira tela e também a última é o resumo da compra. Em dispositivos mobile a modal, sempre fixa e fechada na parte inferior da página, é aberta com todos os detalhes do pedido para que o usuário verifique e finalize o pagamento. São apresentada informações como: produto, informações de SKU, valor da compra, descontos aplicados, uso do saldo de cashback caso habilitado, valor de cashback ganho com a compra caso tenha e opção para cadastro de cupom.

Revisão da compra:

Antes da finalização, a modal é aberta para que o usuário confira os valores e confirme

Revisão da compra:

Antes da finalização, a modal é aberta para que o usuário confira os valores e confirme

Uso de saldo

Inclusão do uso saldo de cashback para compras no aplicativo Buscapé

Feedback Pix

O pagamento via Pix agora tem uma tela de feedback quando a transação é confirmada, antes, a comunicação era feita exclusivamente via e-mail

Uso de saldo

Inclusão do uso saldo de cashback para compras no aplicativo Buscapé

Duas telas de um aplicativo de compras: a primeira tela solicita a confirmação do pagamento via PIX, exibindo um código para copiar e suas instruções. A segunda tela confirma o pedido e apresenta um resumo da compra, incluindo o número do pedido, produtos e valor total.

Feedback Pix