Tour Guiado
Nelogica
Entendendo o Desafio
Anteriormente, os usuários da Nelogica acessavam o Home Broker, que é uma aplicação de compra e venda de ativos do mercado financeiro, e se caso precisasse entender sobre a funcionalidade de alguma ferramenta, como por exemplo: boleta, lista de ordens, carteira, etc. O usuário se deparava com uma tela com poucos tutoriais, com uma excesso de passos e textos enormes. Fazendo com que e a maioria dos usuários tivesse dificuldade em aprender mais sobre determinada funcionalidade.
Com esse problema em mente, optei por usar o Double Diamond como processo de Design para conseguir estruturar melhor as tarefas, dar um feedback claro para as pessoas envolvidas que eram os desenvolvedores e a liderança de design.
Descobertas
Nessa etapa comecei a investigar o estado atual da interface do Tour Guiado, segui passo a passo de cada tutorial com muita atenção ao texto e a navegação.
O que pude notar foi a grande quantidade de textos adicionados, além de uma navegação que faz com que o usuário escaneie a parte superior com as informações e tenha que olhar para baixo para conseguir usar a navegação, e sendo assim, implicaria em uma carga cognitiva alta.
Com as informações do estado atual da interface coletadas, começo então o processo de análise de referências e concorrentes dessa funcionalidade, que é conhecida também como Onboarding. O que pude notar em outros softwares foi a clara divisão entre etapas, um visual mais clean para a navegação e textos curtos, visando a rápida absorção do conhecimento pelo usuário e dividindo em etapas claras e objetivas.
Definições
Com as informações coletadas, eu convidei os desenvolvedores e algumas pessoas da equipe de Design para conversarmos um pouco sobre a tarefa em questão, e dessas reuniões tivemos as seguintes definições:
- Ferramenta ser mais atrativa.
- Textos curtos, com passo a passo claro.
- Feedback mais simples e objetivo.
Todos esses pontos discutidos entravam em torno de uma questão central: a interface deveria ser mais atrativa para que os usuários sentissem a vontade de entrar sempre que necessário, com uma visão de playlists e conteúdos rápidos para que ele pudesse seguir.
Desenvolvimento
Após as reuniões e insights coletados, pensei em como poderia dividir melhor as etapas do Tour, e pensei em termos uma estrutura onde tivesse divisão entre primeiros passos para todos os iniciantes, e teria playlists que mostrariam um pouco de cada funcionalidade do Home Broker e outra parte do Tour seria dedicada as ferramentas do mercado. Com isso em mente, analisei cada texto do processo de aprendizagem, e consegui realizar uma divisão clara como texto atual e criar novos textos, com isso, chegamos ao total de 13 tours guiados, antes era 6.
Com essas divisões, adentrei no processo de ideação da interface com diversos testes e como o desafio estaria centrado na parte de texto e divisão dos tours, optei por já desenhar a interface em alta qualidade procurando explorar novas opções que se adequassem ao novo conteúdo.
Além dos testes já planejados, identifiquei uma oportunidade de trazer uma tela final de comemoração pelo usuário ter terminado o Tour Guiado, e aproveitando o engajamento dele, comecei a idear sobre alguma possibilidade de manter o usuário engajado e sugerir outros Tours para ele, com isso em mente, projetei a seguinte tela para o final.
Finalizado os testes, entrei novamente em contato com as equipes que estavam envolvidas no projeto para coletar seus feedbacks e insights acerca do que foi desenvolvido até aqui. Em nossas conversas optamos por seguir com a versão do vídeo abaixo, onde teria a divisão em primeiros passos e ferramentas do mercado, como mencionado anteriormente.
Entregas
Na etapa final do projeto, me concentrei em realizar entregas diariamente de cada tour guiado, e se reunindo eventualmente com as equipes para mostrar os avanços, com isso, chegamos ao final deste projeto com todos os objetivos definidos alcançados e feedbacks positivos.
Contato
Estou à disposição para ajudar no que precisar, sinta-se livre para me contatar!
Design & Código por: Marco Vinicius
Design & Code by: Marco Vinicius