E-commerce · Moda masculina · Streetwear de luxo
METRO — E-commerce de streetwear de luxo
Loja virtual completa para uma boutique de streetwear masculino: vitrine, categoria com filtros, página de produto, carrinho e checkout, em desktop e mobile.
- Segmento
- Moda masculina · Streetwear de luxo
- Solução
- E-commerce
- Atuação
- UX, UI, Design System
- Ferramentas
- Figma
01
Visão geral
A METRO é uma boutique de streetwear masculino de luxo, com marcas como BAPE, Human Made, Off-White e Amiri. O projeto cobre a jornada de compra completa, da vitrine ao pedido confirmado, em versões desktop (1920 px) e mobile (430 px).
02
Meu papel
Entregas presentes no arquivo do Figma
- Home, página de categoria, resultado de busca e página de produto (desktop e mobile)
- Filtros em gaveta lateral (desktop) e bottom sheet (mobile), além de ordenação
- Mini carrinho, carrinho vazio e fluxo de checkout: login, identificação, cadastro, pagamento, retirada na loja e pedido confirmado
- Componentes de navegação e estados de hover documentados
- Variáveis de cor, tipografia, tamanhos e pesos (fonte principal: Agrandir)
03
Decisões de design
Decisão 01
Preço completo em cada card de produto
Decisão
Cada card mostra preço “de/por”, desconto à vista no PIX e parcelamento em 12x sem juros, além de selos como “Edição limitada”, “Últimas peças” e “Pronta entrega”.
Decisão 02
Filtros que respondem às dúvidas de compra
Decisão
Filtros por categoria, marca, tamanho e cor, com atalhos para “Pronta entrega” e “Frete grátis”. O botão mostra quantos produtos sobram (“Ver 128 produtos”). No mobile, os filtros viram bottom sheet.
Decisão 03
Guia de compra dentro da categoria
Decisão
A página de categoria traz perguntas frequentes (“Como escolher o tamanho certo?”, “Como identificar uma peça original?”) e um CTA “Fale com um stylist”.
Decisão 04
Checkout em três etapas, com resumo sempre visível
Decisão
Identificação, pagamento e confirmação, com indicador de progresso, escolha entre receber ou retirar na loja, opções de frete com prazo e o resumo da compra fixo ao lado.
Decisão 05
Sistema visual em variáveis
Decisão
Cores nomeadas por função (Texto, Fundo, Borda, Ícone), com dourado #A68763 como cor de ação e grafite #3D3434 para texto, mais escala tipográfica e pesos da Agrandir definidos como variáveis.
04
Solução final
