04 / Decathlon · Ecommerce · 2022Produto lançado · Design end to end

Construir o comércio ao redor do esporte.

Uma experiência mobile desenhada da descoberta e do storytelling de produto ao checkout e pós-compra.

Tela inicial da Decathlon com especificações de interação e componentes

Descoberta · Detalhe de produto · Checkout · Pedidos

Explorar ↓

01 / Craft lançado

Deixar os produtos se comportarem como os esportes que atendem.

Motion, conteúdo e interação trabalharam juntos para tornar equipamentos mais fáceis de descobrir e compreender em uma tela pequena.

02 / Contexto

Um catálogo não bastava.

A Decathlon atende iniciantes e atletas experientes em esportes muito diferentes. A experiência mobile precisava apoiar busca direta sem reduzir a descoberta a uma grade genérica de varejo.

Atuei diretamente no produto completo, da arquitetura de informação e interação à execução de alta fidelidade, especificação de componentes e entrega. O app foi lançado.

03 / Descoberta

Começar pelo que as pessoas querem fazer.

Esporte, atividade e contexto se tornaram a entrada para o sortimento.

Home e busca equilibraram acesso rápido a produtos conhecidos com descoberta guiada por categorias, conteúdo e recomendações personalizadas.

Tela longa de exploração da Decathlon organizada por esporte e categoria
Exploração entre categorias e produtos
Busca personalizada da Decathlon
Busca com entradas personalizadas

04 / Craft de componentes

Especificar o sistema na resolução do produto.

O comportamento reutilizável cobriu hierarquia, imagem, preço, ações, pictogramas e variação responsiva.

Sistema de cards da Decathlon com variações e especificações
Variações dos cards de produto
Especificações de pictogramas esportivos da Decathlon
Sistema de pictogramas esportivos
Estados e especificações dos botões da Decathlon
Hierarquia e estados de ação

05 / Detalhe de produto

Tornar produtos técnicos compreensíveis.

A página avançou da história do produto à seleção, prova e compra sem perder contexto.

  1. Usar mídia para explicar o produto em uso.
  2. Manter escolha de modelo e variação dentro do contexto de compra.
  3. Apresentar a informação técnica de forma progressiva.
Página completa de detalhe de produto da Decathlon
História completa do produto
Seletor de produto da Decathlon
Seleção no contexto

06 / Checkout

Reduzir fricção no ponto de compromisso.

Cartão salvo e novo compartilharam a mesma hierarquia, mantendo total e próxima ação estáveis enquanto o formulário mudava.

Checkout da Decathlon com cartão salvo
Cartão salvo
Checkout da Decathlon com novo cartão
Novo cartão

07 / Pós-compra

Desenhar também os momentos difíceis.

Devolução, troca e cancelamento foram tratados como fluxos centrais, não como páginas secundárias de atendimento.

Fluxo de devolução da Decathlon
Devolução
Fluxo de troca da Decathlon
Troca
Fluxo de cancelamento da Decathlon
Cancelamento

Próximo case

Fiserv · B2B Conciliation Ver ↘