English

Shopping cart | Buscapé

Shopping cart | 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.

Project

Project

Project

Buscapé, an increasingly complete marketplace

Buscapé, an increasingly complete marketplace

In 2024, the Buscapé marketplace was prioritized as one of the key points in the planning. After the redesign of the checkout and the entire logged-in order area, it was necessary to move on to the next step: incorporating a shopping cart into the journey, aligning the Buscapé experience with market standards.

In 2024, the Buscapé marketplace was prioritized as one of the key points in the planning. After the redesign of the checkout and the entire logged-in order area, it was necessary to move on to the next step: incorporating a shopping cart into the journey, aligning the Buscapé experience with market standards.

Objective

Objective

Objective

Add a shopping cart to the journey, ensuring consistency with the rest of the product; enable multi-seller cart functionality, allowing purchases from different stores simultaneously and multiple products from the same seller, overcoming the current limitations where the user can only purchase more than one unit of a single item at a time.

Add a shopping cart to the journey, ensuring consistency with the rest of the product; enable multi-seller cart functionality, allowing purchases from different stores simultaneously and multiple products from the same seller, overcoming the current limitations where the user can only purchase more than one unit of a single item at a time.

My role

My role

My role

During the project, I worked on the “discover” stage by conducting benchmarking and a study of the specific literature on the subject.

Now, the project is in the “define” stage.
The information gathering was shared with the stakeholders, and although there are still missing business and technology definitions, the impact of the cart on the entire journey of the site and the app was clear.

To facilitate the decision and correctly scope the project, I created a concept that illustrates the pages and sections to be changed, helping those involved visualize the project in its complete context. For the UI design, I received help from two other designers.

+

Benchmarking

Benchmarking

+

Desk Research

Desk Research

+

Interface design

Interface design

+

Design critique meetings

Design critique meetings

+

Prototyping

Prototyping

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 • Comparative table

Benchmarking • Comparative table

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.

Featured opportunity

Featured opportunity

1

List the offers by store, detailing the shipping of each retailer

List the offers by store, detailing the shipping of each retailer

2

Highlight the incentive for free shipping on eligible offers

Highlight the incentive for free shipping on eligible offers

3

Allow viewing the wallet balance usage for payment in the cart

Allow viewing the wallet balance usage for payment in the cart

4

Include personalized product suggestions based on the selected products

Include personalized product suggestions based on the selected products

Benchmarking

Benchmarking

New project

New project

New project

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

New UI

New UI

New 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.

Shopping cart

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

Empty cart

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

Merchant page

Shopping cart full

Shopping cart full

1. Total cashback

1. Total cashback

Informative pill about the total cashback earned with the purchase

Informative pill about the total cashback earned with the purchase

2. Store Listing

2. Store Listing

Products separated by store and indicating their respective shipping costs

Products separated by store and indicating their respective shipping costs

3. Frete grátis

3. Frete grátis

Visual progress component encouraging additional purchases to obtain free shipping + link to the seller's page

Cart with products

Cart with products

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. Total cashback

1. Total cashback

Informative pill of the total cashback gain with the purchase

2. Store listing

2. Store listing

Products separated by store with indication of their respective shipping costs

3. Free shipping incentive

3. Free shipping incentive

Visual progress component encouraging additional purchases for free shipping + link to the merchant's page

4. Use of balance

4. Use of balance

4. Use of balance

Allows the user to enable the use of wallet balance for purchase

Allows the user to enable the use of wallet balance for purchase

5. PAN Bank

5. PAN Bank

5. PAN Bank

PAN service/product offer in the buying journey

PAN service/product offer in the buying journey

6. Personalization

6. Personalization

Personalization

Recommendation of products related to the purchase

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

Empty cart

Empty cart

Empty cart screen that uses personalized recommendations and popular categories to engage the user, encouraging browsing and additional purchases.



→ Trail of last viewed products

→ Main categories accessed




→ Recommended offers based on search and purchase history

→ Main cashbacks of the week

Empty cart screen that uses personalized recommendations and popular categories to engage the user, encouraging browsing and additional purchases.



→ Trail of last viewed products

→ Main categories accessed




→ Recommended offers based on search and purchase history

→ Main cashbacks of the week

Empty cart

Empty cart

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

Empty cart screen that uses personalized recommendations and popular categories to engage the user, encouraging browsing and additional purchases.



→ Last viewed products track

→ Main accessed categories




→ Recommended offers based on search and purchase history

→ Main cashbacks of the week

Merchant page

Merchant page

Merchant page

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

Incentive for app installation on web interfaces

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

Next steps

Next steps

Next steps

The concept of the shopping cart was just the beginning of a broader project, which will continue after the business definitions.

This project will directly impact fundamental components of the journey, including the header, the product page, the product cards, the navbar, the checkout, and the logged-in orders area. Adjustments that will be essential to ensure a consistent and integrated experience across the entire marketplace ecosystem.

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.

Shall we create something amazing together?

Feel free to message me, have a chat, and exchange ideas!

Shall we create something amazing together?

Feel free to message me, have a chat, and exchange ideas!

Shall we create something amazing together?

Feel free to message me, have a chat, and exchange ideas!