Itatiaia: Página de cupons

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 regras de uso.

Cliente

Itatiaia

SEGMENTO

Móveis e eletrodomésticos

MEU PAPEL

UX/UI Designer

SOLUÇÃO

Filtro e card de cupom

Ano

2026

O cliente

A loja oficial da Itatiaia vende cozinhas, eletroportáteis, móveis, fogões e peças.

O problema

Cupons espalhados são fáceis de perder e difíceis de comparar. Sem uma página dedicada, o cliente precisava procurar entre diferentes canais para descobrir qual benefício poderia usar, se ainda estava ativo e quais eram suas regras.

O desafio era centralizar essas ofertas e criar uma experiência de descoberta mais simples, usando categorias e filtros para ajudar o usuário a encontrar rapidamente o cupom certo para sua compra.

MINHA ATUAÇÃO

Atuei na estruturação e no design da página de cupons, organizando as ofertas de forma clara e criando uma navegação orientada à descoberta. Trabalhei na definição dos filtros e categorias, na hierarquia das informações e na apresentação das regras de cada cupom, facilitando a identificação e utilização do benefício ao longo da jornada de compra.

Do cupom em destaque ao código copiado

A página começa pela oferta mais forte, depois os filtros e a grade com todos os cupons.
As dúvidas mais frequentes ficam no fim, mas um botão logo no início leva direto a elas.

O card de cupom

O card é a peça central da página. Ele precisa responder, em poucos segundos, três perguntas: quanto eu economizo, até quando vale e o que eu preciso fazer para usar.

Anatomia

A hierarquia segue a ordem da decisão: primeiro o desconto, depois a validade e a linha de produtos, depois o código e as condições. As saídas para mais detalhes ficam no fim.

A validade muda de tom

Um mesmo selo com três formatos. Quanto mais perto do fim, mais urgente ele fica: primeiro uma data calma, depois um aviso, e por fim um cronômetro que conta os segundos.

Mais de 5 dias

selo Data limite

Data limite

Selo verde com a data: “Válido até 30/09”.

Entre 5 e 3 dias

selo Aviso

Aviso

Só a mensagem: “expira em x dias”.

Menos de 2 dias

selo Cronômetro

Cronômetro

Dias, horas, minutos e segundos contando até o fim.

Ativo, esgotado ou expirado

Um cupom que acabou não some da grade: ele vira um card esmaecido com a mensagem do motivo. O cliente entende que perdeu aquela oferta, e o filtro “Ocultar expirados” tira esses cards de vista quando ele quiser.

card Ativo

Ativo

card Esgotado

Esgotado

card Expirado

Expirado

Botão de copiar

botão Padrão

Padrão

botão Hover

Hover

botão Copiado!

Copiado!

O botão confirma a ação trocando o texto para “Copiado!”. Sem esse retorno, o cliente clicaria de novo ou colaria o código sem saber se ele foi copiado.

Filtrar sem esforço

Os atalhos de ordenação respondem às intenções mais comuns: o que está em destaque, o que é novo, o que está acabando e o que dá mais desconto. “Quentes”, “Filtrar por” e “Categoria” abrem menus para refinar, e “Ocultar expirados” limpa a grade.

Barra de ordenação e filtros

barra de filtros
menu Quentes

Quentes

Recorte por período: quentes de hoje, da semana ou do mês.

menu Filtrar por

Filtrar por

Tipo de benefício: desconto em %, em R$, no frete ou brinde.

menu Categoria

Categoria

Todas as categorias da loja, de cozinhas a tanquinhos.

Ocultar expirados: desligado

grade, Ocultar expirados: desligado

Ocultar expirados: ligado

grade, Ocultar expirados: ligado

Com o toggle desligado, os cupons esgotados e expirados aparecem na grade; ligado, a grade prioriza os cupons que ainda dá para usar.

Versão mobile

No celular, os filtros rolam na horizontal e a grade vira duas colunas de cards compactos.
O card mantém a mesma hierarquia: desconto, validade e o botão de copiar sempre visível.

Do cupom perdido ao
código copiado

O cliente encontra os cupons num só lugar, filtra pelo que importa, entende as condições no próprio card e copia o código com um clique.

Pedido

Página de cupons com filtros

Componentes

Card de cupom, selo de validade, botão de copiar, filtros e FAQ

Estados

Ativo, esgotado e expirado; 3 formatos de validade

DESENVOLVIDO POR

b8one

EQUIPE

UI Design

Próximo projeto

Lattafa

Levar a Lattafa, perfumaria árabe de luxo, ao Brasil com a sofisticação que a marca pede, dentro de um template proprietário e com um prazo curto.

UI Design

E-commerce

Componentes

→

White Martins, capa do projeto

Itatiaia: Página de cupons

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 regras de uso.

Cliente

Itatiaia

SEGMENTO

Móveis e eletrodomésticos

MEU PAPEL

UX/UI Designer

SOLUÇÃO

Filtro e card de cupom

Ano

2026

O cliente

A loja oficial da Itatiaia vende cozinhas, eletroportáteis, móveis, fogões e peças.

O problema

Cupons espalhados são fáceis de perder e difíceis de comparar. Sem uma página dedicada, o cliente precisava procurar entre diferentes canais para descobrir qual benefício poderia usar, se ainda estava ativo e quais eram suas regras.

O desafio era centralizar essas ofertas e criar uma experiência de descoberta mais simples, usando categorias e filtros para ajudar o usuário a encontrar rapidamente o cupom certo para sua compra.

MINHA ATUAÇÃO

Atuei na estruturação e no design da página de cupons, organizando as ofertas de forma clara e criando uma navegação orientada à descoberta. Trabalhei na definição dos filtros e categorias, na hierarquia das informações e na apresentação das regras de cada cupom, facilitando a identificação e utilização do benefício ao longo da jornada de compra.

Do cupom em destaque ao código copiado

A página começa pela oferta mais forte, depois os filtros e a grade com todos os cupons.
As dúvidas mais frequentes ficam no fim, mas um botão logo no início leva direto a elas.

Navegação

Header e breadcrumb

Destacar

Banner da campanha

Abre a página com o tema da campanha, sem pedir nada do cliente.

Destacar

Título e cupom em destaque

A melhor oferta vem primeiro, com cronômetro e botão de copiar à mão.

Filtrar

Ordenação e filtros

Seis atalhos de ordenação, categoria e “Ocultar expirados”.

Escolher

Grade com todos os cupons

Três cards por linha e “Carregar mais” no fim.

ApoiO

Dúvidas frequentes

Responde o que impede o uso do cupom; o botão do topo é uma âncora para cá.

O card de cupom

O card é a peça central da página. Ele precisa responder, em poucos segundos, três perguntas: quanto eu economizo, até quando vale e o que eu preciso fazer para usar.

Anatomia

A hierarquia segue a ordem da decisão: primeiro o desconto, depois a validade e a linha de produtos, depois o código e as condições. As saídas para mais detalhes ficam no fim.

01

Selo de estado

“Cupom ativo” no canto da foto: o estado aparece antes de qualquer outra informação.

02

Desconto

O maior texto do card. É o motivo do clique.

03

Validade

Muda de formato conforme o prazo: data, “expira em x dias” ou cronômetro.

04

Linha de produtos

Para qual linha o cupom vale.

05

Código e botão de copiar

O código fica visível e o botão copia com um clique, com o feedback “Copiado!”.

06

Condições

Categoria, valor mínimo e limite de uso em tags curtas.

07

Regras do cupom

Abre um modal com as regras completas, sem sair da página.

08

Produtos participantes

Leva para os produtos onde o cupom vale.

A validade muda de tom

Um mesmo selo com três formatos. Quanto mais perto do fim, mais urgente ele fica: primeiro uma data calma, depois um aviso, e por fim um cronômetro que conta os segundos.

Mais de 5 dias

selo Data limite

Data limite

Selo verde com a data: “Válido até 30/09”.

Entre 5 e 3 dias

selo Aviso

Aviso

Só a mensagem: “expira em x dias”.

Menos de 2 dias

selo Cronômetro

Cronômetro

Dias, horas, minutos e segundos contando até o fim.

Ativo, esgotado ou expirado

Um cupom que acabou não some da grade: ele vira um card esmaecido com a mensagem do motivo. O cliente entende que perdeu aquela oferta, e o filtro “Ocultar expirados” tira esses cards de vista quando ele quiser.

card Ativo

Ativo

card Esgotado

Esgotado

card Expirado

Expirado

Botão de copiar

botão Padrão

Padrão

botão Hover

Hover

botão Copiado!

Copiado!

O botão confirma a ação trocando o texto para “Copiado!”. Sem esse retorno, o cliente clicaria de novo ou colaria o código sem saber se ele foi copiado.

Filtrar sem esforço

Os atalhos de ordenação respondem às intenções mais comuns: o que está em destaque, o que é novo, o que está acabando e o que dá mais desconto. “Quentes”, “Filtrar por” e “Categoria” abrem menus para refinar, e “Ocultar expirados” limpa a grade.

Barra de ordenação e filtros

barra de filtros
menu Quentes

Quentes

Recorte por período: quentes de hoje, da semana ou do mês.

menu Filtrar por

Filtrar por

Tipo de benefício: desconto em %, em R$, no frete ou brinde.

menu Categoria

Categoria

Todas as categorias da loja, de cozinhas a tanquinhos.

Ocultar expirados: desligado

grade, Ocultar expirados: desligado

Ocultar expirados: ligado

grade, Ocultar expirados: ligado

Com o toggle desligado, os cupons esgotados e expirados aparecem na grade; ligado, a grade prioriza os cupons que ainda dá para usar.

Versão mobile

No celular, os filtros rolam na horizontal e a grade vira duas colunas de cards compactos.
O card mantém a mesma hierarquia: desconto, validade e o botão de copiar sempre visível.

Do cupom perdido ao
código copiado

O cliente encontra os cupons num só lugar, filtra pelo que importa, entende as condições no próprio card e copia o código com um clique.

Pedido

Página de cupons com filtros

Componentes

Card de cupom, selo de validade, botão de copiar, filtros e FAQ

Estados

Ativo, esgotado e expirado; 3 formatos de validade

DESENVOLVIDO POR

b8one

EQUIPE

UI Design

Próximo projeto

Lattafa

Levar a Lattafa, perfumaria árabe de luxo, ao Brasil com a sofisticação que a marca pede, dentro de um template proprietário e com um prazo curto.

UI Design

E-commerce

Componentes

→

White Martins, capa do projeto