UX Design · Case Study

Hotel Checkout
Flow

Redesenho do fluxo de checkout mobile de uma plataforma de reservas de hotéis — do resumo do quarto até a confirmação, em 6 etapas.

Papel

UX Designer

Duração

3 semanas

Ferramenta

Figma

Tipo

Redesign

01 — Contexto

O problema

Checkouts de reservas de hotel têm alta taxa de abandono. O usuário chega motivado, mas se perde em formulários longos, surpresas de preço no final e falta de clareza sobre o que está incluído.

O desafio era redesenhar o fluxo completo — do resumo até o pagamento — priorizando confiança, transparência de custo e fluidez em mobile.

📉

68% de abandono

Taxa média de abandono em checkouts de viagem no mobile

😤

Surpresas de preço

Principal causa de desistência segundo entrevistas com usuários

📱

Mobile-first

73% das buscas de hotel acontecem em dispositivos móveis

🎯

6 etapas

Fluxo redesenhado com progressão clara e sem redundâncias

02 — Pesquisa

O que os usuários diziam

Entrevistas com 6 usuários frequentes de plataformas de reserva revelaram três padrões claros de frustração.

"O preço muda no final"

Taxas de resort e municipais aparecem só na revisão. Usuário sente que foi enganado antes de confirmar.

"Não sei em que etapa estou"

Ausência de indicador de progresso claro gera ansiedade sobre o tempo necessário para concluir.

"Tenho medo de errar"

Tarifas não reembolsáveis sem destaque adequado geram insegurança na hora de confirmar a reserva.

03 — Processo

Estrutura do fluxo

O redesenho partiu de um fluxo de 6 etapas com responsabilidade única por tela — cada step tem um objetivo claro, sem tentar fazer tudo de uma vez.

Resumo do quarto

Confirma o que foi selecionado na busca. Destaque para o que está incluído na tarifa. Condição de não reembolso sinalizada com aceite explícito antes da confirmação.

Configurar estadia

Ajuste de datas, número de adultos, crianças e quartos. Total atualiza em tempo real. Usuário tem controle antes de comprometer os dados pessoais.

Dados do hóspede

Formulário enxuto: nome, e-mail, celular e pedidos especiais. Instrução contextual reforça usar o nome exatamente como no documento de identificação.

Extras

Café da manhã, transfer, early check-in, late check-out. Preço de cada item visível antes de selecionar. Nenhum pré-selecionado por padrão.

Revisão

Separação clara entre "você paga agora" e "você paga no hotel". Alerta de mudança de preço tratado com contexto e opção de aceitar ou ver alternativas.

Pagamento e confirmação

Formulário de cartão com input mascarado e timer de bloqueio do quarto. Tela de confirmação com código de reserva, voucher e instruções de check-in.

04 — Telas

O fluxo completo

10 telas cobrindo os estados principais — incluindo aceite de tarifa, mudança de preço em tempo real e voucher pós-reserva.

01 · Resumo

Quarto + incluso na tarifa

01b · Cancelamento

Aceite de condição

02 · Estadia

Datas e ocupação

03 · Hóspede

Formulário enxuto

04 · Extras

Adicionais opcionais

05 · Revisão

Price change alert

05b · Custos

Agora vs. no hotel

06 · Pagamento

Cartão + timer

07 · Confirmação

Reserva confirmada

08 · Voucher

Código + check-in

05 — Decisões de design

Por que essas escolhas

Cada decisão teve um raciocínio baseado no comportamento observado nas entrevistas e nos padrões de abandono.

Por que mostrar os itens incluídos na tarifa logo na etapa 1?

Usuários cancelavam a reserva depois de descobrir que extras como café da manhã não estavam incluídos. Antecipar essa informação reduz a sensação de "bait and switch" e aumenta a percepção de valor antes do compromisso financeiro.

Por que tratar a mudança de preço na revisão e não antes?

A mudança de preço acontece por disponibilidade em tempo real. Alertar cedo causaria ansiedade desnecessária. Na revisão, o usuário já tem contexto suficiente para decidir aceitar ou buscar alternativas.

Por que separar "paga agora" de "paga no hotel"?

Taxas de resort e municipais são cobradas na propriedade. Apresentar tudo como um único valor criava desconfiança quando o extrato não batia. A separação elimina essa fricção e prepara o usuário para a experiência real.

Por que o timer de bloqueio de quarto na tela de pagamento?

Quartos têm disponibilidade real. O timer comunica urgência sem ser agressivo — é informativo, não manipulativo. O usuário entende que o bloqueio é uma proteção para ele durante o preenchimento.

06 — Aprendizados

O que esse projeto ensinou

Confiança antes de conversão

Um checkout que prioriza transparência gera mais confiança — e mais conversão — do que um que tenta apressar o usuário para a confirmação.

Uma decisão por tela

Separar responsabilidades reduz carga cognitiva. O usuário processa melhor quando cada etapa tem um objetivo claro e singular.

Alertas com contexto

Mostrar um alerta sem explicação aumenta a ansiedade. Com contexto e alternativas claras, o mesmo alerta vira uma ferramenta de controle para o usuário.

Hotel CheckoutFlow