← Hugo RaniereTodos os cases
Case Study2024

UI de e-commerce pra marcas alemãs

Cargo

UX/UI Designer

Tags
UIE-commerceVisual Design

Trabalho focado em UI para lojas de e-commerce alemãs, incluindo a loja oficial do 1. FC Union Berlin. Cada projeto tinha uma marca e um universo visual próprios, e o desafio era resolver problemas concretos de leitura, hierarquia e conversão nas telas mais críticas.

Union Berlin · home e grade de produtos
Desafio

Marcas com identidades muito diferentes (do futebol ao lifestyle) rodando no mesmo tipo de plataforma, com telas legadas que misturavam informação demais, hierarquia fraca e checkouts confusos. Meu papel foi resolver isso na camada de UI: tipografia, grid, componentes e microinterações.

Processo

Método & precisão.

  1. 01.

    Etapa 01

    Auditoria visual das telas legadas identificando ruídos: contraste baixo, tipografia inconsistente, CTAs competindo entre si e cards sem hierarquia clara.

  2. 02.

    Etapa 02

    Redesign do hero e da grade de produtos priorizando foto grande, título curto, preço em destaque e um único CTA por card. Menos elementos, mais respiro.

  3. 03.

    Etapa 03

    Página de produto reorganizada em duas colunas: galeria à esquerda, decisão de compra à direita (título, preço, seletor de variação, estoque, CTA). Informação técnica desce para blocos separados.

  4. 04.

    Etapa 04

    Checkout em 3 passos com progress indicator, resumo fixo do pedido e formulários com labels externas e mensagens de erro inline. Reduz abandono por dúvida ou fricção.

  5. 05.

    Etapa 05

    Handoff detalhado no Figma: tokens de cor, tipografia, spacing e estados de componente organizados por marca, reaproveitando estruturas entre projetos.

Página de produto · Wohlraum
Checkout em 3 passos · Naturzeit

Checkout em 3 passos · Naturzeit

Resultado

O que ficou.

Três projetos de e-commerce entregues com UI consistente e handoff limpo, incluindo a loja oficial do 1. FC Union Berlin. Base visual reaproveitada em novos clientes, acelerando o próximo ciclo de projetos da agência.