Milium: Nossas lojas

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.

Cliente

Milium

SEGMENTO

Construção, papelaria e utilidades

MEU PAPEL

UX/UI Designer

SOLUÇÃO

Filtro e card de loja

ano

2026

O cliente

A Milium é uma rede de lojas físicas de materiais de construção, utilidades para casa, ferramentas e decoração, com lojas em Santa Catarina e no Paraná.

O problema

Com uma rede de 85 lojas, o cliente precisava de uma experiência que fosse além de apresentar endereços por textos. A página deveria facilitar a busca pela unidade mais conveniente por meio de filtros, além de permitir a consulta de horários, serviços disponíveis e possibilidade de retirada de pedidos em loja física.

MINHA ATUAÇÃO

Atuei na estruturação e no design da página de lojas, organizando informações, filtros e pontos de contato para tornar a busca pela unidade mais rápida e intuitiva.

O objetivo foi reduzir o caminho entre encontrar uma loja e realizar uma ação, como consultar a localização no mapa, verificar informações da unidade ou entrar em contato pelo WhatsApp, mantendo a experiência clara e funcional em cada etapa.

Da pergunta à loja certa

A página segue a ordem em que o usuário pensa. Primeiro ele filtra, depois vê quantas lojas sobraram e compara os cards. Só depois aparecem os blocos que servem a marca: o convite para comprar online e retirar na loja e o texto para busca.

A estrutura do filtro

Três perguntas principais para deixar a busca mais específica para o usuário e encontrar a loja que procura. Cada escolha reduz a lista e prepara a próxima, e o contador mostra a quantidade de lojas encontradas.

Anatomia

Cada campo usa o controle certo para o tamanho da escolha: radio para dois estados solicitado pelo próprio cliente, lista para as cidades e seleção múltipla para os serviços.

Funcionalidade do filtro

Os quatro estados desenhados mostram como a lista se comporta a cada escolha.
O contador acima dos cards confirma a quantidade de resultados antes mesmo do usuário rolar a página.

lojas

Sem filtro

A página abre com todas as lojas.
A cidade aparece desabilitada, porque é necessário escolher primeiro o Estado.

lojas

Estado: Paraná

Escolher o estado libera o campo de cidade e já reduz a lista para as lojas do Paraná.

loja

Paraná + Curitiba

Com a cidade, a busca chega a uma única loja: o cliente vai direto ao card.

lojas

Serviços: Eletrônicos e Retirada disponível

Os serviços também filtram sem estado nem cidade. Cada serviço escolhido vira um chip removível, e “Remover todos os filtros” volta à lista completa.

O card da loja

O card responde às perguntas na ordem em que o cliente as faz: onde fica, se dá para retirar o pedido ali, quando está aberta e como falar com a loja. As duas ações ficam no fim, depois que a decisão está tomada.

Selo de retirada

Versão em mobile

No celular, os três campos empilham e o botão ocupa a largura toda. O contador fica logo abaixo, então o cliente vê o resultado da busca sem rolar.

85 lojas, três escolhas

O cliente sai de uma lista longa para a loja certa com estado, cidade e serviço. Cada card já traz o que ele precisa para ir até lá ou falar com a loja, e mostra se dá para retirar ali o que ele comprou no site.

Pedido

Página com todas as lojas físicas e filtro

Filtro

Estado, cidade e serviços, com chips

Componentes

Filtro, menus, card de loja e selo de retirada

DESENVOLVIDO POR

b8one

EQUIPE

UI Design

Próximo projeto

Itatiaia

Uma página que reúne os cupons da loja em um só lugar, com filtros para achar o melhor desconto e cards que mostram na hora se o cupom está ativo, quanto tempo falta e como usar.

UX/UI Design

E-commerce

Filtros & Navegação

Descoberta

→

Ver case

Ver todos os projetos

→

Milium: Nossas lojas

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.

Cliente

Milium

SEGMENTO

Construção, papelaria e utilidades

MEU PAPEL

UX/UI Designer

SOLUÇÃO

Filtro e card de loja

ano

2026

O cliente

A Milium é uma rede de lojas físicas de materiais de construção, utilidades para casa, ferramentas e decoração, com lojas em Santa Catarina e no Paraná.

O problema

MINHA ATUAÇÃO

Da pergunta à loja certa

Navegação

Header e navegação da loja

Encontrar

Hero com o filtro sobreposto

O filtro aparece na primeira dobra: é a primeira ação que o cliente pode fazer.

Comparar

Contador e grade de lojas

Três cards por linha e “Mostrar mais lojas” no fim, em vez de 85 cards de uma vez.

Marca

Compre online e retire na loja

Liga a loja física ao e-commerce no momento em que o cliente já escolheu a unidade.

Marca

SEO

Conteúdo para busca orgânica, fora do caminho principal.

A estrutura do filtro

Anatomia

Cada campo usa o controle certo para o tamanho da escolha: radio para dois estados solicitado pelo próprio cliente, lista para as cidades e seleção múltipla para os serviços.

Estado

Radio com as duas opções à vista: Paraná e Santa Catarina. Uma escolha só, sem abrir menu.

Cidade

Fica desabilitada até o estado ser escolhido. Depois mostra só as cidades desse estado.

Serviços

Seleção múltipla. O campo resume a escolha: “2 serviços selecionados”.

Buscar lojas

Botão na cor da marca, no fim da linha, onde a leitura termina.

Chips de filtro

Cada serviço escolhido vira um chip com X para remover sem reabrir o menu.

Remover todos

Volta para as 85 lojas em um clique.

Funcionalidade do filtro

Os quatro estados desenhados mostram como a lista se comporta a cada escolha.
O contador acima dos cards confirma a quantidade de resultados antes mesmo do usuário rolar a página.

lojas

Sem filtro

A página abre com todas as lojas.
A cidade aparece desabilitada, porque é necessário escolher primeiro o Estado.

lojas

Estado: Paraná

Escolher o estado libera o campo de cidade e já reduz a lista para as lojas do Paraná.

loja

Paraná + Curitiba

Com a cidade, a busca chega a uma única loja: o cliente vai direto ao card.

lojas

Serviços: Eletrônicos e Retirada disponível

Os serviços também filtram sem estado nem cidade. Cada serviço escolhido vira um chip removível, e “Remover todos os filtros” volta à lista completa.

O card da loja

Foto da fachada

O cliente reconhece a loja quando chega na rua.

Estado e nome da loja

Estado em caixa-alta acima, nome da unidade em destaque.

Selo de retirada

Diz de cara se dá para retirar ali o pedido feito no site.

Endereço

Com ícone de localização, em até duas linhas.

Horário

Semana, sábado e domingo separados, sem precisar ligar.

Telefone

Para quem prefere ligar.

Serviços

Texto curto sobre o que a loja oferece.

Ações

Abrir no mapa e Chamar no WhatsApp: os dois próximos passos.

Selo de retirada

Versão em mobile

No celular, os três campos empilham e o botão ocupa a largura toda. O contador fica logo abaixo, então o cliente vê o resultado da busca sem rolar.

85 lojas, três escolhas

Pedido

Página com todas as lojas físicas e filtro

Filtro

Estado, cidade e serviços, com chips

Componentes

Filtro, menus, card de loja e selo de retirada

DESENVOLVIDO POR

b8one

EQUIPE

UI Design

Próximo projeto

Itatiaia

Uma página que reúne os cupons da loja em um só lugar, com filtros para achar o melhor desconto e cards que mostram na hora se o cupom está ativo, quanto tempo falta e como usar.

UX/UI Design

E-commerce

Filtros & Navegação

Descoberta

→

Ver case

Ver todos os projetos

→