Balaroti: Monte seu kit

Transformar a página de produto em uma experiência completa de montagem de kit, sem interromper a jornada de compra.

Cliente

Balaroti

SEGMENTO

Materiais de construção

Meu papel

UX/UI Designer

SOLUÇÃO

Monte seu Kit desktop e mobile

ano

2026

O cliente

A Balaroti é uma das tradicionais redes brasileiras de materiais de construção, acabamento e decoração. Atende diferentes etapas de construção e reforma.

O problema

O desafio era permitir que o cliente montasse seu kit diretamente na página de produto, escolhendo cada item e acompanhando o valor total da compra em tempo real, sem precisar navegar entre diferentes páginas ou etapas.

A solução precisava tornar essa experiência simples e intuitiva, reduzindo fricções durante a montagem do kit e dando mais clareza sobre as escolhas e o valor final. Ao centralizar toda a jornada em uma única página, o objetivo era facilitar a tomada de decisão e criar uma experiência mais fluida, com potencial para aumentar a quantidade de itens adicionados ao carrinho e, consequentemente, o valor da compra.

MINHA ATUAÇÃO

Atuei na estruturação e no design da experiência de montagem do kit, transformando a necessidade de negócio em uma interface clara e funcional.

Fui responsável por definir a organização dos elementos na página, os estados de seleção dos produtos, a atualização do valor total e os principais pontos de interação da jornada, buscando equilibrar facilidade de uso e clareza das informações.

Estrutura do Kit completo

A página já tinha três zonas: a imagem, as informações do produto e a área de compra. O kit entrou na coluna do meio, logo abaixo da descrição: é onde o cliente está decidindo, e fica na mesma altura do preço e do botão de comprar, que mostram o efeito de cada escolha.

O componente

Cada detalhe responde a uma dúvida que o cliente teria na hora de montar o kit: o que já está incluído, quanto custa cada item e quanto vou pagar no total.

Anatomia

O componente usa as peças que a página já tinha (checkbox, selo de desconto, preço de e por) em uma lista compacta. Nada de novo para o cliente aprender.

Como o total responde

Marcar ou desmarcar um item atualiza o preço da área de compra na hora, sem botão de aplicar. O cliente vê o custo do kit enquanto monta, e não só no carrinho.

2 itens no kit

kit com 2 itens

↓

área de compra, total

Arandela R$ 153,90 + lâmpada Espiga R$ 27,90 = R$ 181,80

4 itens no kit

kit com 4 itens, lista rolada

↓

área de compra, total

Arandela R$ 153,90 + Espiga R$ 27,90 (acima, na rolagem) + Globo R$ 64,90 + Hue R$ 340,90 = R$ 587,60

Duas abordagens

Desenhei duas versões para o cliente decidir quanto do kit mostrar e como ele se relaciona com a quantidade.

Versão A

Lista completa com rolagem

Versão A, kit e área de compra

Todos os itens do kit (5 no exemplo)

Três visíveis, o resto com scroll

Sem seletor de quantidade na compra

Versão B

Lista curta com quantidade

Versão B, kit e área de compra

Só o produto atual e mais 1 ou 2 itens

Nada escondido atrás de rolagem

Seletor de quantidade na área de compra

Versão mobile

Na versão mobile as colunas viram uma sequência: informações, kit e logo abaixo o preço e o botão. O cliente marca um item e, com uma rolagem curta, já vê o total atualizado.

Um kit completo sem sair
da página

O cliente não precisa descobrir sozinho qual produtos são os complementares e buscar item por item. A loja sugere o conjunto, mostra o preço de cada peça e o total muda automaticamente.

Pedido

Montar o kit completo na página de produto

Entregas

Componente, 2 versões de PDP e 2 de mobile

Estados

Lista no topo e lista rolada

DESENVOLVIDO POR

b8one

EQUIPE

UI Design

Próximo projeto

Milium

Uma página que reúne as 85 lojas físicas da rede e ajuda o cliente a encontrar a mais próxima em três escolhas: estado, cidade e os serviços de que ele precisa.

UX/UI Design

E-commerce

Busca & Filtros

Localizador de Lojas

→

Lattafa, capa do projeto

Balaroti: Monte seu kit

Transformar a página de produto em uma experiência completa de montagem de kit, sem interromper a jornada de compra.

Cliente

Balaroti

SEGMENTO

Materiais de construção

Meu papel

UX/UI Designer

SOLUÇÃO

Monte seu Kit desktop e mobile

ano

2026

O cliente

A Balaroti é uma das tradicionais redes brasileiras de materiais de construção, acabamento e decoração. Atende diferentes etapas de construção e reforma.

O problema

O desafio era permitir que o cliente montasse seu kit diretamente na página de produto, escolhendo cada item e acompanhando o valor total da compra em tempo real, sem precisar navegar entre diferentes páginas ou etapas.

A solução precisava tornar essa experiência simples e intuitiva, reduzindo fricções durante a montagem do kit e dando mais clareza sobre as escolhas e o valor final. Ao centralizar toda a jornada em uma única página, o objetivo era facilitar a tomada de decisão e criar uma experiência mais fluida, com potencial para aumentar a quantidade de itens adicionados ao carrinho e, consequentemente, o valor da compra.

MINHA ATUAÇÃO

Atuei na estruturação e no design da experiência de montagem do kit, transformando a necessidade de negócio em uma interface clara e funcional.

Fui responsável por definir a organização dos elementos na página, os estados de seleção dos produtos, a atualização do valor total e os principais pontos de interação da jornada, buscando equilibrar facilidade de uso e clareza das informações.

Estrutura do Kit completo

A página já tinha três zonas: a imagem, as informações do produto e a área de compra. O kit entrou na coluna do meio, logo abaixo da descrição: é onde o cliente está decidindo, e fica na mesma altura do preço e do botão de comprar, que mostram o efeito de cada escolha.

1

Decidir

Imagem, galeria e medidas. Aqui o cliente entende o produto principal; o kit não compete com essa área.

2

Completar

O kit fica logo abaixo da descrição, incentivando a compra dos itens complementares do produto.

3

Comprar

O total e o botão ficam na mesma dobra do kit. Cada item marcado automaticamente muda o valor que
o cliente vê ao lado.

O componente

Cada detalhe responde a uma dúvida que o cliente teria na hora de montar o kit: o que já está incluído, quanto custa cada item e quanto vou pagar no total.

Anatomia

O componente usa as peças que a página já tinha (checkbox, selo de desconto, preço de e por) em uma lista compacta. Nada de novo para o cliente aprender.

01

Título e instrução

Diz o que fazer em uma frase: clicar para selecionar ou remover.

02

Produto atual, fixo

Já vem marcado e desabilitado: é o item da página, não dá para tirá-lo do kit.

03

Preço de e por

Cada item mostra o preço cheio riscado e o preço atual, como no resto da loja.

04

Selo de desconto

O percentual ajuda a perceber a vantagem de levar o conjunto.

05

Item selecionado

Checkbox na cor de destaque da marca: fácil ver o que entrou no kit.

06

Item disponível

Sem marcação, só com nome, foto e preço: um convite, não uma imposição.

07

Rolagem

Na versão com mais itens, três ficam visíveis e o resto aparece com scroll.

Como o total responde

Marcar ou desmarcar um item atualiza o preço da área de compra na hora, sem botão de aplicar. O cliente vê o custo do kit enquanto monta, e não só no carrinho.

2 itens no kit

kit com 2 itens

↓

área de compra, total

Arandela R$ 153,90 + lâmpada Espiga R$ 27,90 = R$ 181,80

4 itens no kit

kit com 4 itens, lista rolada

↓

área de compra, total

Arandela R$ 153,90 + Espiga R$ 27,90 (acima, na rolagem) + Globo R$ 64,90 + Hue R$ 340,90 = R$ 587,60

Duas abordagens

Desenhei duas versões para o cliente decidir quanto do kit mostrar e como ele se relaciona com a quantidade.

Versão A

Lista completa com rolagem

Versão A, kit e área de compra

Todos os itens do kit (5 no exemplo)

Três visíveis, o resto com scroll

Sem seletor de quantidade na compra

Versão B

Lista curta com quantidade

Versão B, kit e área de compra

Só o produto atual e mais 1 ou 2 itens

Nada escondido atrás de rolagem

Seletor de quantidade na área de compra

Versão mobile

Na versão mobile as colunas viram uma sequência: informações, kit e logo abaixo o preço e o botão. O cliente marca um item e, com uma rolagem curta, já vê o total atualizado.

Um kit completo sem sair
da página

O cliente não precisa descobrir sozinho qual produtos são os complementares e buscar item por item. A loja sugere o conjunto, mostra o preço de cada peça e o total muda automaticamente.

Pedido

Montar o kit completo na página de produto

Entregas

Componente, 2 versões de PDP e 2 de mobile

Estados

Lista no topo e lista rolada

DESENVOLVIDO POR

b8one

EQUIPE

UI Design

Próximo projeto

Milium

Uma página que reúne as 85 lojas físicas da rede e ajuda o cliente a encontrar a mais próxima em três escolhas: estado, cidade e os serviços de que ele precisa.

UX/UI Design

E-commerce

Busca & Filtros

Localizador de Lojas

→

Lattafa, capa do projeto