SNEAK.coRedesign de E-Commerce e Foco em Conversão

Duração Julho 2023 – Novembro 2023
Papel UX/UI Designer
Ferramentas Figma, FigJam, Design Tokens, Hotjar Specs, Shopify / React Specs
Serviços UX Strategy, Redesign E-Commerce, e Design System
SNEAK.co Banner Principal - Redesign da Vitrine e Checkout Mobile
Contexto

Visão Geral do Projeto

Como UX/UI Designer neste projeto de e-commerce de tênis e sneakers (SNEAK.co), liderei o redesenho completo da plataforma focado em otimização da taxa de conversão (CRO), redução de devoluções e melhoria da experiência de compra mobile.

O mercado de cultura streetwear e sneakers de edição limitada exige um equilíbrio perfeito entre o desejo visual e a agilidade técnica. A plataforma anterior sofria com fricção no checkout, navegação confusa em lançamentos (drops) e alto índice de dúvidas sobre o tamanho correto do calçado, gerando abandono de carrinho.

Minha missão foi transformar o e-commerce em uma vitrine moderna e altamente conversiva, introduzindo o recomendado de tamanho inteligente (Fit Finder), fotos em alta fidelidade com visualização "On-Feet" e um checkout de 1-clique otimizado para dispositivos móveis.

Declaração do problema

O Desafio e Objetivos

O Desafio

68% dos clientes abandonavam a compra na página do produto ou no checkout mobile por receio de escolher a numeração errada (devido às variações de forma entre marcas) ou pela lentidão de preenchimento dos dados de pagamento nos momentos de lançamentos de tênis exclusivos.

O Objetivo

Redesenhar a jornada de compra mobile e desktop aumentando a taxa de conversão em 55%, reduzindo o abandono de carrinho em 45%, reduzindo trocas por tamanho incorreto em 70% através da ferramenta Fit Finder e acelerando a conclusão de compra para menos de 10 segundos via Express Checkout.

Metodologia

Design Process

Para reestruturar o e-commerce de sneakers unindo a estética da cultura streetwear com máxima eficiência de conversão e clareza de dados, conduzi o projeto utilizando a metodologia de Design Thinking dividida em 5 etapas iterativas: Empathize, Define, Ideate, Prototype e Test.

Esquema do Processo de Design Thinking (Empathize, Define, Ideate, Prototype, Test)
Empatia

Análise Competitiva de Mercado

Para identificar os melhores padrões internacionais do mercado de sneakers e oportunidades de inovação em CRO, analisei quatro grandes plataformas globais e nacionais:

GOAT App
Sneaker Marketplace
Pontos Fortes
  • Fotografia de produto em altíssima qualidade e padronizada
  • Sensação de autenticidade e segurança no processo
Pontos Fracos
  • Navegação burocrática para compradores casuais
  • Frete e taxas de importação elevados
Marketplace High Visuals
StockX
Bid e Ask Exchange
Pontos Fortes
  • Métricas de mercado e preços em tempo real
  • Grande variedade de modelos raros
Pontos Fracos
  • Interface poluída com excesso de dados numéricos
  • Falta de recomendações intuitivas de tamanho
Data Heavy Complex UI
Droper App
Local Streetwear
Pontos Fortes
  • Forte presença na comunidade local de streetwear
  • Catálogo atualizado de lançamentos no Brasil
Pontos Fracos
  • Checkout mobile engessado com muitas etapas
  • Ausência de guia comparativo de tamanhos entre marcas
Community Slow Checkout
Nike SNKRS
Official Brand Drop
Pontos Fortes
  • Storytelling envolvente em cada lançamento
  • Identidade visual marcante e exclusiva
Pontos Fracos
  • Sistema de sorteios frustrante para o consumidor
  • Constante falta de estoque e indisponibilidade
Brand Story Stock Out
Pesquisa de usuário

Entrevistas e Achados Chave

Realizei testes de usabilidade, análise de mapas de calor (Hotjar) e entrevistas com compradores casuais e sneakerheads colecionadores para mapear as principais barreiras de conversão:

74%

Dúvidas Sobre o Caimento e Variações de Marca

74% dos usuários hesitavam em concluir a compra por não saberem se a forma daquele modelo específico (ex: Jordan x Yeezy x Air Force) era maior ou menor que o habitual. E para resolver isso, criamos o Fit Finder: ferramenta interativa na página do produto que compara o modelo desejado com o tênis que o cliente já usa no dia a dia.

82%

Fricção e Abandono nos Momentos de Lançamento

82% dos colecionadores desistiam de comprar durante os lançamentos concorridos devido à exigência de preencher novamente cartão e endereço no mobile. E para resolver isso, implementamos o Express Checkout de 1-Clique com suporte nativo a Apple Pay, Google Pay e carteiras salvas.

65%

Fotos Estáticas sem Contexto de Uso

65% dos clientes procuravam fotos externas no Instagram antes de comprar para ver a textura real do couro/camurça e como o tênis fica no pé. E para resolver isso, incluímos galerias "On-Feet" com modelos reais, zoom tátil de alta resolução e badges informativos de materiais.

Arquétipos de usuários

Personas de Usuário

Gabriel Lima
Gabriel "Gabe" Lima
24 anos, Sneakerhead e Colecionador
São Paulo, SP
"Se eu perder o drop do tênis porque o site travou no checkout ou pediu meu cartão de novo, vou comprar em outro lugar."
Sobre

Gabriel acompanha o calendário de lançamentos de tênis semanalmente. Busca modelos raros e valoriza a autenticidade, velocidade na compra e exclusividade.

Objetivos Principais
  • Garantir a compra de edições limitadas nos primeiros segundos do drop
  • Finalizar o pagamento no mobile via Apple Pay sem preencher formulários
  • Receber alertas de restock e novos lançamentos no celular
Dores e Frustrações
  • Sites lentos que travam no momento do lançamento do tênis
  • Checkout longo que faz perder o estoque do produto
Motivações
Checkout em 1-Clique
Exclusividade de Drops
Garantia de Autenticidade
Mariana Costa
Mariana Costa
31 anos, Compradora Casual de Streetwear
Rio de Janeiro, RJ
"Adoro tênis modernos, mas morro de medo de pedir um 37 e ficar apertado. Preciso saber exatamente como ele veste antes de pagar."
Sobre

Mariana compra tênis para usar no trabalho e em saídas casuais. Procura modelos confortáveis, fotos reais no pé e segurança total na escolha da numeração.

Objetivos Principais
  • Acertar o tamanho do calçado logo na primeira compra
  • Visualizar fotos reais do tênis sendo usado (On-Feet)
  • Opções fáceis de parcelamento e frete transparente
Dores e Frustrações
  • Receio de comprar a numeração errada e enfrentar trocas burocráticas
  • Tabelas de tamanho teóricas e difíceis de compreender
Motivações
Recomendador Fit Finder
Fotos no Pé (On-Feet)
Facilidade de Troca
Estrutura de ideação

POV e Como Podemos (HMW)

POV 01 · Conversão e Velocidade de Checkout

Compradores de sneakers precisam de um processo de checkout no mobile ultrarrápido para não perder produtos com estoque limitado.

HMW 01 (+55% Conversão)

Como podemos criar um fluxo de Express Checkout de 1-clique para eliminar formulários e aumentar a taxa de conversão em 55%?

POV 02 · Redução de Incerteza no Tamanho

Consumidores de e-commerce precisam de clareza absoluta sobre a forma do tênis para comprar a numeração correta sem medo de troca.

HMW 02 (-70% Devoluções)

Como podemos desenhar uma ferramenta comparativa de tamanho (Fit Finder) na página do produto para reduzir trocas por tamanho em 70%?

POV 03 · Experiência Visual e Desejo

Clientes apaixonados por moda urbana precisam ver detalhes reais dos materiais e caimento no pé para tomar a decisão de compra.

HMW 03 (+45% Engajamento)

Como podemos estruturar galerias dinâmicas "On-Feet" com zoom de alta fidelidade para aumentar o engajamento na página do produto em 45%?

Alinhamento estratégico

Matriz de Objetivos do Projeto

Objetivos de Negócio

  • Aumentar a Taxa de Conversão direta (CR) do e-commerce de 1.8% para +3.2% (+55% de ganho)
  • Reduzir em 70% os custos operacionais com trocas e logística reversa de calçados
  • Reduzir a taxa de abandono de carrinho no checkout mobile em 45%

Objetivos do Usuário

  • Finalizar a compra no smartphone em menos de 10 segundos no momento do drop
  • Descobrir a numeração exata do tênis comparando com calçados que já possui
  • Visualizar detalhes de couro, costuras e caimento no pé antes de decidir

Considerações Técnicas

  • Desenvolvimento de Design System modular com tokens focados em e-commerce (Shopify / React Specs)
  • Otimização de imagens WebP com carregamento progressivo para evitar lentidão
  • Integração direta com APIs nativas de carteiras digitais (Apple Pay / Google Pay / PIX 1-Clique)
Arquitetura

User Flow

Mapeei o resumo do User Flow com o fluxo principal para melhor entendimento da jornada de conversão (CRO): desde a chegada por lançamentos ou busca direta, passando pelo recomendador de tamanho inteligente Fit Finder na PDP, até o carrinho em formato Drawer e o checkout de 1-clique.

User Flow Diagram Sneakers CRO Funnel
Design System

Identidade Visual

Desenvolvi o Design System com estética escura e moderna (Dark Theme) pontuada por acentos em laranja elétrico (#FF4D00), transmitindo a energia da cultura streetwear e dando total destaque às cores dos produtos.

Paleta de Cores e Tokens

#FF4D00 Electric Orange
100 200 300 400 500 600 700 800 900
#22C55E In-Stock Green
100 200 300 400 500 600 700 800 900
#737373 Neutral Gray
100 200 300 400 500 600 700 800 900
#FAFAFA Pure Light
100 200 300 400 500 600 700 800 900
#111111 Preto / Neutro
100 200 300 400 500 600 700 800 900
#10B981 Success
100 200 300 400 500 600 700 800 900
#F59E0B Warning
100 200 300 400 500 600 700 800 900
#EF4444 Error
100 200 300 400 500 600 700 800 900
Tipografia oficial
Urbanist e Outfit
As tipografias escolhidas para o e-commerce de sneakers são Urbanist (para títulos marcantes e números de preço) e Outfit (para corpo de texto e especificações), garantindo proporções geométricas limpas e perfeita leitura visual no mobile.
Headline 1
Font Urbanist
Weight Bold (700)
Size 64px
Letter spacing -1.5px
Headline 2
Font Urbanist
Weight SemiBold (600)
Size 48px
Letter spacing -1px
Headline 3
Font Urbanist
Weight SemiBold (600)
Size 32px
Letter spacing -0.5px
Headline 4
Font Urbanist
Weight Medium (500)
Size 24px
Letter spacing 0px
Paragraph — O rápido mocho-galego voa sobre o vale à noite, explorando a interface.
Font Outfit
Weight Regular (400)
Size 16px
Letter spacing 0px
Small / Caption — Tamanhos Disponíveis, Preço e Estoque
Font Outfit
Weight SemiBold (600)
Size 13px
Letter spacing 0.5px

Espaçamento

4px | Detalhes space-1
8px | Padding apertado space-2
12px | Padding interno space-3
16px | Padding padrão space-4
24px | Relacionados space-5
32px | Card space-6
48px | Blocos space-7
64px | Seções space-8
96px | Espaços Seções space-9
128px | Espaços Hero space-10

Raio de Borda

4px | Tags e Chips radius-xs
8px | Inputs e Campos radius-sm
12px | Botões, Cards, Tooltips e Dropdowns radius-md
16px | Cards Principais e Modais radius-lg
24px | Containers grandes e destaques radius-xl
999px | Badges circulares e pills radius-full
Design visual e protótipo

Protótipos das Telas

As telas finais entregaram uma experiência de e-commerce ultra-desejável e focada em resultados de conversão:

Vitrine Desktop MacBook SNEAK.co

Vitrine Desktop – Experiência imersiva no MacBook com visual clean e navegação otimizada para compras.

Experiência Tablet iPad SNEAK.co

Experiência Tablet – Layout adaptativo em iPad destacando benefícios da loja e artigos do blog.

Catálogo e Filtro por Cores SNEAK.co

Catálogo e Filtro por Cores – Vitrine de modelos em destaque com filtro interativo por paletas.

Visão Geral Completa da Loja SNEAK.co

Visão Geral da Loja – Estrutura completa de navegação, depoimentos de clientes e seções editoriais.

Experiência Mobile 3D SNEAK.co

Experiência Mobile – Interface responsiva nos smartphones com feed visual dinâmico e checkout ágil.

Jornada Mobile de Telas SNEAK.co

Jornada Mobile de Telas – Telas de onboarding, catálogo de lançamentos e seletor por paleta de cores.

Validação de métricas

Impacto Real

O redesenho da plataforma de e-commerce foi testado em protótipos de alta fidelidade e validado com usuários reais de e-commerce, alcançando resultados de conversão expressivos:

+55%
Taxa de Conversão Mobile
Express checkout e navegação fluida
-45%
Abandono de Carrinho
Checkout em 1-clique sem fricção
-70%
Redução em Trocas por Tamanho
Ferramenta comparativa Fit Finder
"O recomendador de tamanho é perfeito! Comparei com um tênis que já tenho e o tamanho veio exato no meu pé. Além disso, comprei no drop em 5 segundos no celular!"
"Consegui comprar o tênis do lançamento sem o site travar. O checkout por Apple Pay em 1-clique salvou minha compra antes do estoque acabar."
Visão de futuro

Impacto Futuro

O sucesso do redesenho comprovou que otimização de conversão aliada ao desejo visual é a chave para o e-commerce de sneakers. O roadmap futuro abrange 4 expansões estratégicas:

01

Provador Virtual 3D em Realidade Aumentada (AR)

Visualização do tênis no próprio pé do usuário em tempo real usando a câmera do smartphone.

02

Autenticação Digital via Tag NFC / Blockchain

Passaporte digital de autenticidade para tênis colecionáveis e edições limitadas.

03

Sistema Gamificado de Sorteios (Raffle System)

Inscrição transparente em sorteios de compra de edições raras com notificação por push.

04

Social Commerce com Vídeos da Comunidade

Integração de vídeos curtos de unboxing e looks criados pelos próprios clientes no e-commerce.

SNEAK.co - Visão Geral do Protótipo no Figma

Explore o Protótipo Interativo

Navegue pelos fluxos de recomendador de tamanho Fit Finder, vitrine de produtos e Express Checkout no Figma.

Ver Protótipo no Figma