0%
EXP·16 status: pronto

Scroll Progress

Barra de leitura no topo · 4 variantes visuais · indicador de seção lateral · role para ver

estilo da barra (role a página para ver)

GOL Linhas Aéreas · Product Design · 2025

Redesign do checkout mobile para 40 milhões de passageiros

EmpresaGOL Linhas Aéreas
PeríodoJan–Jul 2025
PlataformaWeb mobile (PWA)
Meu papelProduct Designer

01 — Descoberta

O ponto de partida foi entender por que a taxa de abandono no checkout mobile da GOL era significativamente maior que no desktop, apesar do tráfego mobile já representar a maioria dos acessos ao site.

Realizamos entrevistas com passageiros, análise de gravações de sessão (FullStory), e benchmark com concorrentes nacionais e internacionais — LATAM, Azul, Ryanair e Southwest foram as referências mais relevantes para navegação mobile de low-friction.

Screenshot de gravações de sessão

02 — Definição

Os principais achados apontaram para três eixos de problema: fricção excessiva no formulário de pagamento (muitos campos obrigatórios sem preenchimento automático), navegação por stepper difícil de entender em mobile (usuários não sabiam onde estavam no fluxo), e ausência de confirmação visual clara no momento do pagamento.

O problem statement consolidado: "Passageiros com intenção de compra real abandonam o fluxo mobile por incerteza e fricção técnica — não por falta de interesse."

03 — Ideação

Trabalhamos em Crazy 8s com o time de produto e engenharia. As ideias priorizadas foram: reformulação do stepper em progress bar com estados visuais claros, preenchimento automático via API de cartões e endereço, e um estado de confirmação com animação de sucesso antes do redirecionamento.

Crazy 8s e wireframes iniciais

04 — Prototipagem de alta fidelidade

O protótipo foi construído no Figma com o Design System Tangerine Core Web já aplicado, garantindo que todas as decisões de componente fossem compatíveis com o DS vigente e pudessem ser implementadas diretamente pelo time de engenharia sem debt visual.

Acessibilidade foi requisito desde o início — WCAG 2.1 AA como critério de aceite para todos os estados de componente: contrast ratio, tamanho de área de toque (min 44px) e compatibilidade com leitores de tela.

Protótipo hi-fi no Figma

05 — Resultado

O rollout foi realizado em fases, com A/B test nos primeiros 20% do tráfego mobile. Os dados de conversão ainda estão sendo consolidados com o time de analytics, mas os indicadores preliminares mostram redução consistente no abandono no step de pagamento.

O impacto mais imediato foi na redução de tickets de suporte relacionados a dúvidas no fluxo de compra — queda de 34% nas primeiras três semanas após o rollout completo.

CálculoscrollY / (scrollH − viewH) × 100
UpdaterequestAnimationFrame (throttle)
Variantesdefault · glow · thin · gradient
SeçõesIntersectionObserver → dot ativo
Onde usartodas as páginas de case study