Case 05 · Quero Passagem · Craft Visual

Redesign que alinhou o site à força da marca

O site tinha um visual "anos 90", completamente desalinhado com a força que a marca já tinha no mercado. Reformulei a identidade visual completa, do site ao fluxo de compra.

Redesign de Produto UI Design Growth
Cliente
Quero Passagem
Meu papel
Design Lead & UI Designer
Período
2019–2020
Ferramentas
Adobe XD
Problema

O nome chamava atenção. O site, não.

O site tinha um visual datado — praticamente um "formato de anos 90" — completamente desalinhado com a identidade visual e o logotipo novos que outro designer já havia criado para a marca. Para facilitar o entendimento do problema pelo time, construí uma pequena narrativa (estilo storytelling) em torno de um usuário fictício, o "Bruno": ele busca passagens de ônibus pela internet, encontra a Quero Passagem entre os resultados — o nome chama atenção — mas, ao entrar no site, se decepciona com um visual que não combina com a força da marca.

Identifiquei e apontei essa necessidade diretamente aos CEOs, que aprovaram a iniciativa. O time de Desenvolvimento entrou junto no processo desde o início.

Processo

Sitemap, protótipos e colaboração direta com o time

01Sitemap e jornadas do usuário+
Mapeamento da estrutura completa do site (mais de 18 páginas, sem contar as páginas individuais de cada empresa de ônibus parceira).
02Protótipos navegáveis no Adobe XD+
Revisados em ciclos de comentário direto com o time — incluindo idas e vindas com o Product Owner sobre origem de dados e comportamento de cada seção.
03Colaboração constante com Desenvolvimento+
Acompanhamento da evolução de cada entrega, da fila de "Aguardando início" até "Pronto para testes".

Equipe envolvida: 1 Designer UX/UI (eu), 3 Programadores, 1 Coordenador de Produto e o CEO da empresa.

Decisão de produto

Uma Home que expressa a força da marca

A Home passou por uma reformulação completa de layout, criada para expressar a nova identidade visual da marca — cores mais vivas, hierarquia mais clara, formulário de busca de passagem em destaque logo no topo. O mesmo cuidado se estendeu ao fluxo de compra de passagem, ponto mais crítico do site em termos de conversão.

Toque em qualquer miniatura para abrir a tela completa, com rolagem vertical — as capturas são de página inteira.

Home antiga da Quero Passagem, visual datado
Home — antes
Nova Home da Quero Passagem, com identidade visual renovada
Home — depois
Nova Home da Quero Passagem, versão mobile
Home — mobile (depois)

Mais telas da reformulação

Resultados de busca, páginas de destino e institucional — todas com a mesma identidade visual nova, em desktop e mobile.

Tela de resultados de busca, desktop
Busca — desktop
Tela de resultados de busca, mobile
Busca — mobile
Página de destino Rio de Janeiro, desktop
Destino (RJ) — desktop
Página de destino Rio de Janeiro, mobile
Destino (RJ) — mobile
Página Quem Somos, desktop
Quem Somos — desktop
Página Quem Somos, mobile
Quem Somos — mobile

Durante a pandemia de Covid-19, a tela de busca ganhou reforço de informações de segurança sanitária (ônibus com mais espaço por passageiro), sem comprometer a comparação de preços e horários que já era o foco principal.

Fluxo de pagamento

O ponto mais crítico do site em termos de conversão — reformulado com o mesmo cuidado visual da Home.

Seleção de poltronas, ida e volta
Poltronas
Modal pedindo e-mail para prosseguir
E-mail para prosseguir
Tela de pagamento, forma boleto
Pagamento — boleto
Tela de pagamento, dropdown de parcelamento aberto
Parcelamento
Tela de pagamento, cupom de desconto aplicado
Desconto aplicado
Impacto

Aprovação e dados confirmando a direção

Os CEOs aprovaram o resultado — os ajustes solicitados depois do lançamento foram, majoritariamente, de conteúdo, não de layout, o que confirma que a direção visual proposta já tinha acertado o essencial. Os dados também confirmaram: testes A/B mostraram redução no tempo de conclusão de compra com o novo layout, e o Google Analytics indicou redução no tempo de página — sinal de que o usuário encontrava o próximo passo com mais facilidade — além de aumento na conversão de quem completava a compra.

Aprendizado

O que eu faria diferente

Teria organizado melhor as pessoas envolvidas desde o início — explicando os objetivos antes de partir para a execução, e garantindo que todo o time entendesse o rumo do projeto, não só a parte que cabia a cada um. Na época, eu ainda estava no começo da carreira em produto; o aprendizado que ficou foi entender melhor o processo como um todo, e quem precisa estar envolvido em cada etapa dele.

← Voltar ao portfólio

Role para ver a página inteira · toque na imagem para dar zoom