Desenhando o onboarding de uma nova experiência de TV
Como foi desenhado o onboarding da nova plataforma de TV da NOS, explorando fluxos, interações e interfaces para criar uma experiência intuitiva desde a primeira interação
Resumo
A UMA TV é o principal produto de TV da NOS, no qual atuei por mais de 2 anos como Product Designer Sênior. Como parte da evolução para uma experiência multiplataforma (STB, Apple TV, Android TV), liderei o processo do onboarding para o produto.
A primeira versão não apresentou bons resultados nos testes com usuários e com prazo apertado para entrega, decidimos adotar uma abordagem mais simples: tooltips contextuais que introduzem as funcionalidades ao longo da jornada.
A solução foi validada em uma rodada de testes de usabilidade, com cerca de 9 usuários, e lançada com a nova versão da TV para cerca de 1 milhão de assinantes.
Equipe
- Design Manager
- Nelson Delicado
- Visual Designer
- Renato Reis
- Product Designer
- Lucas Cipriano
- UX Researcher
- Lúcia Abreu
- Product Owner
- Mariana Marques
- Timeline
- 2024 → 2 meses
- Plataforma
- TV STB, Android TV, tvOS
Problema
O produto mudou. O hábito dos usuários, não.
A UMA TV está no mercado há mais de 10 anos, e seus usuários construíram hábitos sólidos em torno dela. A nova versão traz uma experiência completamente diferente da atual. Para quem já usa, isso significa reaprender o que dominava. Para quem chega, significa entender um produto amplo de uma só vez.
O desafio não era ensinar um produto novo, era fazer a transição sem perder ninguém no caminho.
Sem uma transição bem conduzida, o risco é:
- Queda de uso
- Aumento de chamados no suporte
- Resistência à atualização
Desafio
Principais desafios para o onboarding
Complexidade no primeiro contato
A nova plataforma introduziu diversos recursos e conceitos, o que tornou a primeira interação potencialmente complexa para os usuários.
Falta de orientação inicial
Sem uma orientação clara, os usuários podem ter dificuldade para entender por onde começar e o que fazer em seguida.
Sobrecarga de informações
Apresentar muitas informações de uma só vez pode sobrecarregar os usuários e tornar a experiência mais difícil de entender.
Possíveis perdas de referência
Usuários antigos não reconhecem onde estão os fluxos que já dominavam.
Oportunidade
Criar um onboarding intuitivo e relevante para diferentes perfis de usuário, mantendo uma única experiência
Objetivos
- Garantir uma experiência positiva ao usuário, facilitar a adoção da nova interface e aumentar a retenção a longo prazo.
- Favorecer uma adaptação mais rápida e guiar os usuários com menos experiência.
Target personas
Qual perfil de usuário mais precisa do onboarding?
Com base em dados que já tínhamos sobre o comportamento dos assinantes, criamos uma protopersona de cada perfil.
Heavy Users
Usuários experientes, adaptados a novas tecnologias e interfaces.
- Navegam com autonomia
- Costumam pular o tutorial
- Buscam eficiência e atalhos
Onboarding: Não intrusivo, com opção clara de pular.
Exploratórios
Curiosos que gostam de descobrir funcionalidades e explorar a interface.
- Exploram funcionalidades
- Interagem com o onboarding
- Têm interesse em novidades
Onboarding: Destaque para novas funcionalidades e descoberta progressiva.
Elders
Usuários com menor fluência digital, hábitos consolidados e maior resistência a mudanças.
- Assistem principalmente TV ao vivo
- Preferem o que já conhecem
- Inseguros com mudanças
Onboarding: Simples, contextual e com foco no essencial.
Newbies
Pouca familiaridade com a nova experiência; precisam de orientação nos principais fluxos e funcionalidades.
- Primeiro contato
- Precisam de orientação
- Podem se sentir perdidos no início
Onboarding: Orientação nos principais fluxos e funcionalidades.
Heurísticas
Princípios para construir um bom onboarding
O objetivo principal do onboarding é ajudar os usuários não só no primeiro contato com a nova interface, mas durante toda a jornada de consumo. Para isso, defini algumas heurísticas essenciais para criar um processo de onboarding de sucesso.
Onboarding começa na instalação/atualização
Existem duas formas de começar o onboarding: a primeira é pela atualização do software, para clientes que já possuem a STB; a segunda é para novos clientes, cujo primeiro contato já será com o novo produto.
Para os dois casos, definimos que usaríamos:
- Vídeo introdutório com um resumo da atualização enquanto a instalação está sendo feita
- Interface de boas-vindas com dicas para o usuário
Explorativo
Ao usar a nova interface pela primeira vez, o onboarding deve focar nas novidades e funcionalidades (antigas e novas).
Esse onboarding pode ser feito de três formas:
- Tutorial interativo: guiar o usuário por uma série de passos interativos que destacam as principais funcionalidades e características da interface.
- Exploratório: à medida que o usuário explora outras áreas da plataforma, o walkthrough continua conforme necessário, destacando novas funcionalidades e dando suporte.
- Dicas: dicas contextuais que aparecem conforme o usuário navega pelas interfaces, com informações relevantes sobre a funcionalidade.
Proativo
Depois que o usuário passa pela instalação e pelo onboarding (ou não) de todas as áreas, deve existir uma área de ajuda caso ainda tenha alguma dificuldade.
Além disso, também deve existir um ponto de acesso na página inicial que leve o usuário para a área de Tutoriais.
Outros pontos
Onboarding contínuo
O onboarding deve começar cedo, a partir da instalação ou atualização da box, acompanhando o usuário até um possível offboarding do produto.
Evitar uso excessivo de tooltips
É crucial que o usuário não seja bombardeado com tooltips desnecessárias: elas devem ser usadas apenas para informações relevantes.
Identificar touchpoints nos fluxos de navegação
Nem todo fluxo e touchpoint precisa necessariamente ser coberto pelo onboarding.
Princípio de custo irrecuperável (abre em nova aba)
Ter uma barra de progresso pode ser um recurso poderoso para motivar os usuários a concluir uma tarefa.
Onboarding flow
Principais áreas contempladas pelo onboarding
Home
Área principal da TV, que reúne conteúdos personalizados, ofertas e o continue watching.
Live TV
Player que muda as funcionalidades conforme o tipo de conteúdo.
Program info
Funcionalidades e informações do conteúdo que está sendo assistido.
EPG Guide
Guia de programação dos canais e filtros por categoria.
Pesquisa
Página de busca de conteúdos, elencos, apps e canais de TV.
Settings
Configurações relacionadas ao perfil e à box.
Design critique
Após o brainstorming, os wireframes dos componentes de onboarding foram apresentados ao time, que escolheu por votação quais se adaptariam melhor à experiência em TV.
O time era composto por
- Visual Designer
- Design Manager
- Product Designers (TV, apps Android e Apple, streaming e web)
- UX Research
O que não pode faltar em um onboarding?
Saltar o tutorial
- Ser skippable
- Possibilidade de saltar o onboarding
Contextual
- Ser contextual (2x)
- Contexto é importante, tips no momento certo
- Orientação e introdução: começar por explicar o que se segue nos next steps ou utilizar wording que seja comum para este tipo de processo
Contextual/Clareza
- Incluir demonstração e highlights das várias áreas de foco
- Vídeo animação quando a funcionalidade for complexa
Clareza
- Ser claro
- Ser claro e não mostrar tantas opções de decisão
- Claro e resumido, mas com “link” para algo mais detalhado
Interação
- Conhecer principais funcionalidades
- Dicas de funcionalidades
- Não é necessário login
- Incluir fluxo que permita ao utilizador experimentar o contexto do onboarding
- Onboarding = Tutoriais
Outros
- Ser recuperável
- Multicanal
Walkthrough
Esse componente pode ser usado para uma dica contextual única ou um tutorial sobre funcionalidades e fluxos.
Walkthrough com Now & Next
Aproveitamos um componente já desenhado na interface, o Now & Next (que mostra a programação de um canal), para usar no tutorial em diferentes fluxos.
Tooltips contextuais
As dicas são usadas para dar uma explicação curta e direta sobre um ícone, área, botão ou componente.
Resultado final
Componentes finais desenhados para validação
Estes foram os componentes desenhados para validar com usuários e que depois foram reutilizados em outros fluxos da TV.
Welcome screen
Tela de boas-vindas ao assinante sobre a atualização.
Vídeo da welcome screen da UMA: logo amarelo, “Bem-vindo”, texto de apresentação e botão “Começar”; ao saltar a introdução, um aviso pede confirmação e depois indica onde rever a introdução nas Definições. Player hints
Dicas de navegação na primeira interação com a nova interface.
Vídeo do player com dicas de navegação (Info sobre o programa, Mais opções e Programação do canal), seguido pelo walkthrough da página de Tenet: ações, elenco e onde o filme está disponível. Walkthrough (que pode ser usado como product tour)
Os passos de walkthrough são usados na maioria dos casos do onboarding.
Vídeo do walkthrough no guia de programação, em 4 passos: canais de TV, dias da semana, programas e conteúdos, e filtros por categoria. Walkthrough com Now & Next (com destaque)
Usado em interfaces mais complexas, nas quais é preciso mostrar os passos para realizar uma ação.
A diferença para o walkthrough normal é apenas a opacidade.
Vídeo de um jogo de futebol em direto em que o walkthrough dos destaques do jogo mostra, em 2 passos, os melhores momentos (golos, substituições, faltas) e como voltar à emissão em direto. Tooltip contextual
As dicas dão uma explicação curta e direta sobre um ícone, área, botão etc. Também podem chamar a atenção do usuário para alguma novidade na interface. Sempre aparecem antes de a ação ser realizada.
Vídeo da página de Doctor Who em que tooltips contextuais azuis aparecem conforme o foco passa pelos botões: ver do início, gravar, ver mais tarde e onde ver.
Usability test
Validando o onboarding com usuários
O protótipo para o teste de usabilidade foi criado com foco em 3 fluxos: Live TV, Destaques e Guia EPG.
Em cada fluxo havia tarefas relacionadas a ele, que o usuário deveria concluir.
Overview do teste
6 de 9 usuários tiveram dificuldades com a proposta do onboarding
3 de 9 usuários não conseguiram completar ao menos 1 tarefa com os componentes de walkthrough
Todos os usuários entenderam como funcionam as tooltips contextuais
Decisão final
Com prazo apertado para lançar a nova TV, decidi adaptar o onboarding apenas com tooltips contextuais, pois foi o componente mais bem avaliado.
As regras para as tooltips foram definidas para aparecerem apenas 1 vez em contextos importantes ou quando houver alguma novidade na plataforma.
Também alterei a Welcome screen e as Player hints, unificando as duas em uma só interface de introdução.
Welcome screen + Player hints
Vídeo da tela “Bem-vindo à TV da NOS” sobre o player, com as dicas dos botões do comando (recuar/avançar, info do programa, mais ações e programação do canal) e o botão “Prima qualquer tecla para começar a ver TV”. Demais fluxos
Vídeo da página de Doctor Who em que tooltips contextuais aparecem nos botões, como “Ver do início” e “Ver mais tarde”.
Reflexões finais
Com o lançamento da nova TV muito próximo, precisamos priorizar um onboarding mais simples, que pudesse ser validado e entregue a tempo. Não era a visão completa que tínhamos desenhado, mas foi a escolha certa para não atrasar o lançamento.
O projeto também mudou minha forma de enxergar o onboarding: menos como um tour de boas-vindas e mais como algo distribuído ao longo da jornada, que acompanha o usuário no momento em que ele precisa.
O que eu faria diferente
Onboarding personalizado por persona
Com o prazo apertado, tive que escolher entre estender o desenvolvimento ou lançar a TV com uma experiência única de onboarding para todos os usuários. Escolhi lançar. Hoje, eu deixaria a personalização documentada como próxima etapa do roadmap para que ela não se perdesse depois do lançamento.
Protótipos mais próximos da experiência real com IA
Os protótipos foram feitos no Figma, que não reproduz bem a navegação por comando numa TV. Isso tomou muito tempo de prototipagem e gerou atritos nos testes que não eram necessariamente do design. Hoje, eu usaria IA para prototipar em código, com navegação real por comando, e testaria algo bem mais próximo do produto final.