Design do novo SaaS B2B travel tech para cruzeiros
Mais de 6 mil operadoras, consolidadoras e agências buscando e reservando cruzeiros nacionais e internacionais
LINHA DO TEMPO
Jul/2024 - Em progresso
DISPOSITIVOS
Desktop / mobile
MEU PAPEL
Senior Product Designer
Síntese
Introdução
Para cada R$ 1 investido, o setor movimentou R$ 4,22 no país. A R11 Travel é a única consolidadora de turismo no Brasil que tem exclusividade para vender as marcas Royal Caribbean International e Celebrity Cruises, por isso, estrategicamente, iniciou o processo de redesign do novo SaaS B2B de cruzeiros. A R11 Travel expandirá sua atuação a partir da nova versão do produto, globalmente. Neste projeto B2B, renovamos a experiência do usuário e redesenhamos a UI, sendo o maior projeto da consolidadora desde 2016. O produto Cruzeiros faz parte de um conjunto de produtos da indústria travel tech, como: áereo, hotel, ônibus, carro, expenses e api.
1. Meu papel
Sou o Senior Product Designer do projeto, colaborando com o CTO, engenheiros de softwares, devs, PO e stakeholders (Ciro Nola, Silvio Yoshino, Gustavo Caetano, Gustavo Oliveira e Paulo Albuquerque) ao longo deste projeto de travel tech.
2. Problema
Apesar da versão atual ser razoavelmente bem avaliada pelos usuários, eles enxergam principalmente na Krooze, um competidor direto com vantagens significativas quantos aos recursos e a experiência de uso.
3. Happy path
Pesquisar cruzeiros > Apresentar o orçamento > Realizar a reserva > Finalizar a venda > Fazer o pagamento
Problema #1
Os agentes não gostam muito de usar o sistema atual, eles não se sentem confiantes
A interface tem falta de informações importantes esperadas pelo usuário.
EXEMPLO
O motor de busca na Home não exibe portos por onde o navio passa, nem filtro de países, dando a entender que nenhum navio passa pelos lugares desejados pelo viajante.
IMPACTO
Sem o resultado completo, os agentes tendem a gastar menos tempo na plataforma e, no pior cenário, substitui-la pela solução dos concorrentes.
Problema #2
Não é intuitivo
Uma experiência de usuário pouco clara gera frustração, o que aumenta a taxa de desistência.
EXEMPLO
Os usuários precisam escanear muitos dados e classificar visualmente o tipo de tarifa, de cabine, de categoria, de navio, de cruzeiro, entre muitas outras.
IMPACTO
Sem uma hierarquia de informação bem definida, os usuários se perdem facilmente, levando a uma baixa conversão e ao churn.
Problema #3
Informações do orçamento incompletas
O design pobre e sem informações básicas quebra a experiência, aumenta a frustração e gera retrabalho.
EXEMPLO
O agente envia o orçamento com informações básicas ausentes. Ele precisa voltar na tela de resultado, fazer um printscreen do que falta e enviar novo email.
IMPACTO
Sem objetivos definidos, sempre haverá desperdício de tempo, criando fricção, com informações fragmentadas.
Problema #4
Perde-se tempo ligando pro suporte
Com informações sem significados claros, os agentes acabam se confundindo e ligam para o suporte.
EXEMPLO
Tem tarifa, valor de desconto, taxas de encargos, taxas de serviço, categorias misturadas, etc. É unânime, os agentes não entendem o que é.
IMPACTO
Produtos difíceis de utilizar geram menos dinheiro.
Definindo o problema
Como poderíamos redesenhar uma melhor experiência do usuário que seja superior à ferramenta atual e superior ao competidor direto para se tornar a plataforma nº1 no Brasil?
Objetivos
Do negócio
Eficiência operacional
Para agilizar as operações diárias, criaremos uma interface consistente e intuitiva e componentes de design escaláveis, que funcionarão também no tablet e mobile, aumentando a eficiência de uso.
Ser a primeira opção dos agentes
Com a nova plataforma introduzida, queremos destacar a facilidade em buscar e reservar os principais navios e cruzeiros no Brasil e no mundo. Nosso objetivo é entregar a melhor experiência de busca, reserva e pagamento rápido para nossos agentes, ao mesmo tempo em que fortalecemos a marca R11 globalmente.
Do usuário
Experiência agradável e consistente
Garantir que a hierarquia da informação esteja em uso para reduzir fricção e dar aos nossos agentes uma experiência melhor e ultra consistente utilizando design system > style guide > libraries.
Maior precisão nas informações
Trabalhar com a equipe de desenvolvedores e engenharia para criar um mecanismo de ordenação que mostre automaticamente aos usuários listas completas organizadas por destino, cruzeiro, cabine, preço, e todos os filtros aplicáveis, porque hoje está bem misturado.
Impacto
Como este é um projeto enorme, os novos designs são entregues em fases. Por confidencialidade, omiti os valores reais para essas métricas.
+39%
Aumento geral nas buscas
+40% Buscas de cruzeiros
+23% Buscas de pacotes com excursões
+54% Buscas de cruzeiros longos
+91%
Taxa de cliques na nova feature Comparações (Cruzeiros, Navios, Preços, Itinerários)
-60%
Diminuição de ligações para o suporte (informações organizadas e detalhadas)
+70%
Aumento na taxa de conversão
sem precisar tirar dúvidas com o suporte
100%
Unanimidade entre os usuários entrevistados. Necessidade da apresentação completa de itinerário e ficha técnica do navio.
Nossos usuários
Antes, mergulhamos fundo nos dados comportamentais de utilização da plataforma anterior, para entendê-los melhor. Conduzimos entrevistas com os usuários. Nos concentramos em identificar o que nossos usuários buscam para que possam reservar cruzeiros, reduzindo a fricção.
Definimos 3 arquétipos de usuários e mapeamos seus respectivos jobs to be done.
Lays
Agente de turismo
Usa o envio de orçamento por e-mail
Ela é uma usuária habitual da plataforma e valoriza o envio de orçamentos por e-mail como o mais importante recurso de vendas.
JOBS TO BE DONE
Quando envia o orçamento por e-mail, quer poder exibir ao cliente informações de itinerário e preço que se atualizam dinamicamente, para entregar o que importa, sem retrabalho.
Facilitando o fluxo
"Espero a cotação melhor desenhada com link dinâmico, evita retrabalho. Vai facilitar absurdamente a minha vida e o fluxo."
João
Empresário do turismo
Compara as ferramentas constantemente
Usuário frequente de várias plataformas de cruzeiros, o que torna difícil converter a nossa plataforma na sua ferramenta de escolha.
JOBS TO BE DONE
Quando busca atender seus clientes pela plataforma, quer poder resolver a tarefa sozinho, sem o suporte, para não passar a impressão de falta de credibilidade para o cliente final.
Barreiras e impedimentos
“Por cruzeiro ser um produto caro, eu preciso de uma interface confiável, sem precisar ligar pro suporte.”
Daniele
Diretora de operadora
Conhecedora das limitações da plataforma.
O agente de viagem quer praticidade, então precisa agilizar o sistema pra ficar competitivo.
JOBS TO BE DONE
Quando busca cabines para cotação, quer encontrar informações completas no resultado de busca, para não ter que pedir pro setor de reservas, porque isso dificulta o processo.
Fidelidade e satisfação
“Existem outras ferramentas com a experiência bem melhor.
A plataforma da R11 já foi minha primeira opção.”
Processo
Design Sprints
O propósito dos sprints remotos de design foi facilitar a colaboração entre departamentos. Product designer, product owner, developers e o CTO contribuíram diariamente com suas ideias e conhecimentos nesses sprints.
Na reunião de kick-off, eu informei sobre o processo de ponta a ponta de UX que seria utilizado. No entanto, a expectativa em relação à entrega é alta e o prazo curto. Esse projeto foi abordado de forma não linear, começando pelo redesign da interface em alta fidelidade, a partir de wireframes em baixa fidelidade e as demais técnicas de UX sendo trabalhadas em paralelo.
Entrevistas com usuários
Easy-to-use products makes you more money
Fidelidade e satisfação
Facilitando o fluxo
Barreiras e impedimentos
Wireframes
Para termos ideia do que tínhamos nas mãos, aspectos do fluxo e possíveis caminhos foram projetados. Foram dezenas de wireframes para chegarmos nas versões em alta fidelidade.
Parte de wireframes low-fidelity feitos com Draw.io
User flows (Miro)
Mapeei e desenhei os user flows por feature, com os cenários e as user stories baseados nas pesquisas.
Protótipos para testes de usabilidade
Os designs passaram por iterações para:
-
melhorar a usabilidade
-
tomar decisões de design baseado em feedbacks
-
introdução criteriosa de funcionalidades
Motor de busca da Home
Queríamos que o motor abrangesse mais possibilidades de busca. Depois da pesquisa com o usuário, vimos que o motor da plataforma antiga estava defasada em recursos. Por que? Estava faltando entregar o que importa para o viajante de cruzeiro. As análises de competidores validaram nossas suposições.
Motor com funções e design antigos
A busca não entregava todos os
resultados esperados pelo viajante
O motor antigo era um popup discreto
com a interface nativa de sistema
A interface na versão mobile não foi prevista
Motor novo
Introdução de Países na busca. Feedback do usuário.
As opções de Passando Por e Visitando foram acrescentadas. Ex: há viajantes que compram o cruzeiro só se o navio passar pelos Pirineus, na Grécia.
Já no início o consultor pode inserir o Loyalty Program e Promo Code.
Função nova, o consultor pode escolher em qual moeda o viajante quer pagar.
Resultado da busca (lista de cruzeiros)
A lista foi renovada em forma de cards horizontais, modulares. Perguntamos na pesquisa o que impede ou é barreira no uso do produto. A resposta foi: a interface antiga é um pouco confusa, pouco amigável.
Um dos nossos princípios de design é que cada tela e componente tenha um propósito único. A hierarquia da informação tem objetivo claro: fazer com que o usuário escaneie rapidamente as principais informações.
A lista de resultados era exibida assim, com a interface baseada em código, não em pesquisa e em design.
Tudo parece a mesma coisa
Ausência de hierarquia de informação
Card da nova lista de resultados
Principais informações organizadas por relevância
Novo recurso Compare
Checkbox para a nova
feature Compare
Próximas datas abre lista de próximas partidas, ordenadas por preço. Essa solução economiza espaço e cria interação sob demanda.
Novo recurso Compare
A funcionalidade Compare transforma a experiência do usuário, permitindo que os clientes escolham até três opções de cruzeiro e analisem: Cruzeiros, Navios, Preços e Itinerários.
Com um design centrado no usuário, esta ferramenta não só facilita a comparação de alternativas, mas permite compartilhar e enviar por e-mail, além de otimizar a jornada do usuário e tornar o processo de escolha mais rápido e transparente.
Estamos não apenas elevando a experiência, mas também aumentando as taxas de conversão e satisfação.
Comparação e Chat ao Vivo
Comparação entre Cruzeiros, Navios, Preços e Itinerários
As informações principais
do critério de comparação
aparecem acima da imagem
Ao escolher outro critério pelo Select, as informações são reposicionadas
CTA no começo do flow
O agente pode compartilhar com o viajante ou enviar
por e-mail
Chat ao Vivo mirando conversão
Tipos de cabines
Exibimos aos usuários a lista de cabines que pertencem à super categoria escolhida. Precisávamos de um design escalável pois existem centenas de cabines e milhares de tarifas.
Organizamos filtros e criamos duas ordenações comparativas por tipos de tarifa.
Nova lista de tipos de cabines
