Design da nova plataforma
SaaS B2B para cruzeiros
Mais de 6 mil operadoras, consolidadoras e agências buscando e reservando cruzeiros nacionais e internacionais
LINHA DO TEMPO
Jul/2024 - Nov/2024
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 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 travel tech, como: áereo, hotel, ônibus, carro, expenses e api.
1. Meu papel
Senior Product Designer do projeto, colaborando com o CTO, engenheiros de softwares, devs, PO e stakeholders 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.
Abordagem centrada no usuário
Problema #1
Os agentes não se sentem confiantes
usando o sistema
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 sem apelo visual 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 pro cliente.
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
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
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, de acordo com sua necessidade.
Entrevista com usuários
Antes, mergulhamos fundo nas dores dos usuários na utilização da plataforma anterior e suas necessidades, 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.
Reunindo insights
Entrevista 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 e aspectos do fluxo, 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.
Decisões de design informadas
Protótipos para testes de usabilidade
Os designs passaram por iterações para:
-
melhorar a usabilidade
-
tomar decisões 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.
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
ANTES
Novo motor melhorado
Introdução de Países na busca. Feedback do usuário.
DEPOIS
As opções de Passando Por e Visitando foram acrescentadas. Ex: há viajantes que compram um cruzeiro para Grécia, só se o navio passar pelos Pirineus.
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, atendendo a necessidade global.
Resultado da busca (lista de cruzeiros)
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 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
ANTES
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.
DEPOIS
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.
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
Novo recurso Chat ao Vivo, mirando conversão
NOVA FEATURE
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.
Antigo resultado para cabines
De novo, ausência de hierarquia de informação
ANTES
Nova lista de tipos de cabines
Importante ponto da arquitetura da informação:
Super categoria > Categoria > Status > Tipo de cabine > Comparativos de tarifas
Chevron expand & collapse
Botão para Bandeja (cart) que funciona como carrinho de compras do B2C
DEPOIS
Entendendo os feedbacks
Testes de usabilidade (Maze)
Para validar nossos designs, testamos os protótipos e fizemos testes de usabilidade com usuários reais, que utilizam o sistema antigo. Foram realizados testes remotos moderados.
6
cenários dos principais flows
-
Busca de cruzeiros que levam às cabines
-
Envio de orçamento por e-mail
-
Comparação entre cruzeiros
-
Comparação entre cabines
-
Consulta de itinerário
-
Checkout
Perspectiva no impacto
Conversion Rate Optimization (CRO)
Como este é um projeto enorme, os novos designs são entregues em fases. Por confidencialidade, omiti os valores reais para essas métricas.
+50%
Aumento geral nas buscas
+ Buscas de cruzeiros para 4+ passageiros
+ Buscas de pacotes com excursões
+ Buscas de cruzeiros longos
80%
Taxa de cliques na nova feature Compare*
(Cruzeiros, Navios, Preços, Itinerários)
* Decisão de design baseada em User Reseacrh
-70%
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%
Necessidade da apresentação completa de itinerário e ficha técnica do navio.
Unanimidade entre os usuários entrevistados.
Mais interações com menos cliques
Design final
A plataforma não era intuitiva e não tinha foco nas principais ações de conversão. Agora, a plataforma tem um visual novo e moderno e uma experiência aprimorada para mobile e web, visando poucos cliques. Renovamos o produto para ser a plataforma nº 1 no Brasil, América Latina, América do Norte e Europa.
Style guide, libraries e componentes
Material UI
Comecei com o Material UI Design por solicitação do time de devs. O Material UI é uma biblioteca de componentes React open source que implementa o Material Design do Google. Ela é abrangente e pode ser usada em produção imediatamente.
Ela evolui à medida que avançamos.
Tipografia
Icones
Botões
Cores
Menus
Cards
Modais
Versão mobile
O que aprendemos
Adaptação às mudanças no comportamento do consumidor
Precisávamos manter os pés no chão e foco no usuário, mas também levar em conta as mudanças no produto para corresponder ao mercado de cruzeiros e comportamentos dos usuários B2B.
Produtos não existem no vácuo
Com uma grande reformulação da experiência do usuário, os processos internos podem ser afetados. Por exemplo, a equipe de desenvolvimento e engenharia precisa alterar o back e a forma de buscar e listar resultados de acordo com os brokers, e isso não é simples.
Se eu não colaborasse com essas equipes, não ouvisse suas limitações e não desenvolvesse o design de acordo com regras de negócios estruturadas, nossa bela reformulação da plataforma seria apenas um protótipo bonito, mas não daria certo quando fosse implementada na produção.
Trabalhe uma fase por vez
Aprendi a dividir sprints complicadas em partes menores. Isso facilita o design e trata os obstáculos à medida que avançamos.
Futuro
Iterações e refinamentos
Em um produto dessa escala, mesmo que já tenhamos refinado muita coisa antes do lançamento, é certo que encontraremos pequenos erros.
Otimização pós-lançamento
Etapa crucial para melhoria de UX e lançamento de produto. Com insights chave acionáveis, podemos projetar uma experiência melhor para nossos usuários B2B.
Continuar a criar experiências melhores
Seguir nosso product roadmap e continuar a seguir nossos princípios de design.
