Portuguese

Carrinho de compras | Buscapé

Carrinho de compras | Buscapé

Múltiplas telas de smartphones exibindo página do lojista dentro do Buscapé e tela do carrinho de compras.
Múltiplas telas de smartphones exibindo página do lojista dentro do Buscapé e tela do carrinho de compras.
Múltiplas telas de smartphones exibindo página do lojista dentro do Buscapé e tela do carrinho de compras.

Projeto

Projeto

Projeto

Buscapé, um marketplace cada vez
mais completo

Buscapé, um marketplace cada vez mais completo

Em 2024, o marketplace do Buscapé foi priorizado como um dos pontos-chave do planejamento. Após a reformulação do checkout e de toda a área logada de pedidos, era necessário avançar para a próxima etapa: incorporar um carrinho de compras à jornada, alinhando a experiência do Buscapé aos padrões do mercado

Em 2024, o marketplace do Buscapé foi priorizado como um dos pontos-chave do planejamento. Após a reformulação do checkout e de toda a área logada de pedidos, era necessário avançar para a próxima etapa: incorporar um carrinho de compras à jornada, alinhando a experiência do Buscapé aos padrões do mercado

Objetivo

Objetivo

Objetivo

Adicionar um carrinho de compras à jornada, garantindo consistência com o restante do produto; permitir a funcionalidade de carrinho multi-seller, possibilitando compras em diferentes lojas simultaneamente e de múltiplos produtos de um mesmo vendedor, superando as limitações atuais, onde o usuário só pode adquirir mais de uma unidade de um único item por vez

Adicionar um carrinho de compras à jornada, garantindo consistência com o restante do produto; permitir a funcionalidade de carrinho multi-seller, possibilitando compras em diferentes lojas simultaneamente e de múltiplos produtos de um mesmo vendedor, superando as limitações atuais, onde o usuário só pode adquirir mais de uma unidade de um único item por vez

Atuação

Atuação

Atuação

Durante o projeto, atuei na etapa de “descobrir” com a realização de um benchmarking e de um estudo da literatura específica sobre o tema.

Agora, o projeto está na etapa de “definir”.
O levantamento de informações foi compartilhado com os stakeholders, e, embora ainda faltem definições de negócios e tecnologia, o impacto do carrinho em toda a jornada do site e do app ficou claro.

Para facilitar a decisão e dimensionar corretamente o escopo, criei um concept que ilustra as páginas e seções a serem alteradas, ajudando os envolvidos a visualizar o projeto em seu contexto completo. Para o desenho da UI, contei com o auxílio de outros dois designers.

Durante o projeto, atuei na etapa de “descobrir” com a realização de um benchmarking e de um estudo da literatura específica sobre o tema.

Agora, o projeto está na etapa de “definir”.
O levantamento de informações foi compartilhado com os stakeholders, e, embora ainda faltem definições de negócios e tecnologia, o impacto do carrinho em toda a jornada do site e do app ficou claro.

Para facilitar a decisão e dimensionar corretamente o escopo, criei um concept que ilustra as páginas e seções a serem alteradas, ajudando os envolvidos a visualizar o projeto em seu contexto completo. Para o desenho da UI, contei com o auxílio de outros dois designers.

+

Benchmarking

Benchmarking

+

Desk Research

Desk Research

+

Design de interface

Design de interface

+

Reuniões de design critique

Reuniões de design critique

+

Prototipagem

Prototipagem

Foto de Layane Souza

Layane Souza

Layane Souza

Product Designer Jr.
Product Designer Jr.
Foto de Robson Freitas

Robson Freitas

Robson Freitas

Product Designer Jr.
Product Designer Jr.

Benchmarking • Tabela comparativa

Benchmarking • Tabela comparativa

Tabela comparativa de benchmarking grandes ecommerces do mercado brasileiro. A tabela não compara o Buscapé, pois ele não tem um carrinho de compras e, por isso, não há o que comparar. Foram analisados 17 aspectos, que se dividem em login, frete, variedade de pagamento, venda cruzada, personalização, etc.
Tabela comparativa de benchmarking grandes ecommerces do mercado brasileiro. A tabela não compara o Buscapé, pois ele não tem um carrinho de compras e, por isso, não há o que comparar. Foram analisados 17 aspectos, que se dividem em login, frete, variedade de pagamento, venda cruzada, personalização, etc.

Oportunidade em destaque

Oportunidade em destaque

1

Listar as ofertas por loja, detalhando o frete de cada lojista

Listar as ofertas por loja, detalhando o frete de cada lojista

2

Destacar incentivo a frete grátis de ofertas habilitadas

Destacar incentivo a frete grátis de ofertas habilitadas

3

Permitir a visualização do uso de saldo da carteira para pagamento no carrinho

Adicionar futuramente a opção de cancelamento automático, atualmente qualquer cancelamento é feito de forma manual e só pode ser solicitado via e-mail

4

Incluir sugestões de produtos personalizadas de acordo com os produtos selecionados

Incluir sugestões de produtos personalizadas de acordo com os produtos selecionados

Benchmarking

Benchmarking

Novo projeto

Novo projeto

Novo projeto

Site amp do projeto do carrinho que conta com: tela do carrinho de compras que pode estar vazia ou com produtos e página do lojista
Site amp do projeto do carrinho que conta com: tela do carrinho de compras que pode estar vazia ou com produtos e página do lojista

Nova UI

Nova UI

Nova UI

Visão da tela de um carrinho de compras online, com dois itens adicionados. A imagem mostra detalhes como nome dos produtos, preço unitário, quantidade, valor total, frete, indicativo de valor a ser atingido para entrega gratuita e informações sobre o vendedor. Além disso a página conta com uma indicação de quanto o usuário receberá de cashback com a compra total daquele carrinho.

Carrinho de compras

Página de carrinho vazia, motra trilho de produtos personalizados de acordo com o histórico de busca do usuário, principais categorias e ofertas do dia, incentivando novas compras

Carrinho vazio

Página do lojista com as principais ofertas, cupons daquela loja, categorias em destaque e informações sobre a confiabilidade das lojas

Página do lojista

Carrinho cheio

Carrinho cheio

1. Cashback total

1. Cashback total

Pílula informativa do ganho total de cashback com a compra

Pílula informativa do ganho total de cashback com a compra

2. Listagem de lojas

2. Listagem de lojas

Produtos separados por loja e com indicação de seus respectivos fretes

Produtos separados por loja e com indicação de seus respectivos fretes

3. Frete grátis

3. Frete grátis

Componente visual de progresso incentivando compras adicionais para obter frete grátis + link para página
do lojista

Carrinho com produtos

Carrinho com produtos

Primeiro scroll da página do carrinho de compras com destaque para três itens: 1. pílula informativa de cashback, 2. card de produto e 3. indicação do frete
Primeiro scroll da página do carrinho de compras com destaque para três itens: 1. pílula informativa de cashback, 2. card de produto e 3. indicação do frete

1. Cashback total

1. Cashback total

Pílula informativa do ganho total de cashback com a compra

2. Listagem de lojas

2. Listagem de lojas

Produtos separados por loja e com indicação de seus respectivos fretes

3. Incentivo a frete grátis

3. Incentivo a frete grátis

Componente visual de progresso incentivando compras adicionais para obter frete grátis + link para página
do lojista

4. Uso de saldo

4. Uso de saldo

4. Uso de saldo

Permite o usuário habilitar o uso de saldo da carteira para compra

Permite o usuário habilitar o uso de saldo da carteira para compra

5. Banco PAN

5. Banco PAN

5. Banco PAN

Oferta de serviços/produtos PAN na jornada de compra

Oferta de serviços/produtos PAN na jornada de compra

6. Personalização

6. Personalização

Personalização

Recomendação de produtos relacionados com a compra

Segundo scroll da página do carrinho de compras com destaque para três itens: 1. toogle de uso de saldo de cashback, 2. banner do cartão estelar do banco PAN e 3. trilho de produtos recomendados
Segundo scroll da página do carrinho de compras com destaque para três itens: 1. toogle de uso de saldo de cashback, 2. banner do cartão estelar do banco PAN e 3. trilho de produtos recomendados
Segundo scroll da página do carrinho de compras com destaque para três itens: 1. toogle de uso de saldo de cashback, 2. banner do cartão estelar do banco PAN e 3. trilho de produtos recomendados

Carrinho vazio

Carrinho vazio

Tela de carrinho vazio que utiliza recomendações personalizadas e categorias populares para engajar o usuário, incentivando a navegação e compras adicionais.



→ Trilho de últimos produtos vistos

→ Principais categorias acessadas




→ Ofertas recomendadas com base em histórico de busca e compra

→ Principais cashbacks da semana

Tela de carrinho vazio que utiliza recomendações personalizadas e categorias populares para engajar o usuário, incentivando a navegação e compras adicionais.



→ Trilho de últimos produtos vistos

→ Principais categorias acessadas




→ Ofertas recomendadas com base em histórico de busca e compra

→ Principais cashbacks da semana

Carrinho vazio

Carrinho vazio

Duas telas com o primeiro e segundo scroll da página de carrinhos vazia. Apresenta um link para as ofertas do dia, trilho de últimos produtos vistos, principais categorias acessadas, ofertas recoemndadas e cashbacks da semana
Duas telas com o primeiro e segundo scroll da página de carrinhos vazia. Apresenta um link para as ofertas do dia, trilho de últimos produtos vistos, principais categorias acessadas, ofertas recoemndadas e cashbacks da semana

Tela de carrinho vazio que utiliza recomendações personalizadas e categorias populares para engajar o usuário, incentivando a navegação e compras adicionais.



→ Trilho de últimos produtos vistos

→ Principais categorias acessadas




→ Ofertas recomendadas com base em histórico de busca e compra

→ Principais cashbacks da semana

Página do lojista

Página do lojista

Página do lojista

Primeiro scroll da página de lojista. Principais categorias e ofertas cronometradas.
Segundo scroll da página de lojista. Trilho de produtos por até R$50,00, últimos cupons adicionados e trilho de eletrônicos.
Terceiro e último scroll da página de lojista. Trilho de produtos para casa e seção sobre confiabilidade da loja Casas Bahia, indica a quantidade de cupons ativos, a quantidade de ofertas disponiveis da loja, qual cupon está em destaque além de um texto sobre confiabilidade

Desktop

Desktop

Incentivo de instalação do app em interfaces web

Página desktop do carrinho que apresenta o toogle de uso de saldo de cashback desabilitado. Se o usuário clicar no toggle, é apresentada uma modal com um QR code personalizado do Buscapé, pois a opção só está disponível no app Buscapé. Assim temos um incentivo de instalação do aplicativo.
Página desktop do carrinho que apresenta o toogle de uso de saldo de cashback desabilitado. Se o usuário clicar no toggle, é apresentada uma modal com um QR code personalizado do Buscapé, pois a opção só está disponível no app Buscapé. Assim temos um incentivo de instalação do aplicativo.
Página desktop do carrinho vazio com trilho de últimos produtos vistos, principais categorias acessadas, ofertas recomendadas e cashbacks destacados da semana
Página desktop do carrinho vazio com trilho de últimos produtos vistos, principais categorias acessadas, ofertas recomendadas e cashbacks destacados da semana

Próximos passos

Próximos passos

Próximos passos

O concept do carrinho de compras foi apenas o início de um projeto mais amplo, que seguirá após as definições de negócio.

Este projeto impactará diretamente componentes fundamentais da jornada, incluindo o header, a página de produto, os cards de produto, a navbar, o checkout e a área logada dos pedidos. Ajustes que serão essenciais para garantir uma experiência consistente e integrada em todo o ecossistema do marketplace.

O concept do carrinho de compras foi apenas o início de um projeto mais amplo, que seguirá após as definições de negócio.

Este projeto impactará diretamente componentes fundamentais da jornada, incluindo o header, a página de produto, os cards de produto, a navbar, o checkout e a área logada dos pedidos. Ajustes que serão essenciais para garantir uma experiência consistente e integrada em todo o ecossistema do marketplace.

quatro componentes soltos do projeto estão destacados: banner notifiction de quando um produto é adicionado ou removido do carrinho, botão do carrinho no header e ícone de frete.
quatro componentes soltos do projeto estão destacados: banner notifiction de quando um produto é adicionado ou removido do carrinho, botão do carrinho no header e ícone de frete.

Vamos criar algo incrível juntos?

Sem cerimônia! Fique à vontade para me mandar uma mensagem,

bater um papo e trocar ideias

Vamos criar algo incrível juntos?

Sem cerimônia! Fique à vontade para me mandar uma mensagem,

bater um papo e trocar ideias

Vamos criar algo incrível juntos?

Sem cerimônia! Fique à vontade para me mandar uma mensagem, bater um papo e trocar ideias