Tour Guiado | Marco Vinicius

01

Projeto em um minuto

O problema: Tutoriais longos tornavam demorado aprender um tópico específico. Textos extensos e controles distantes dificultavam a leitura e a navegação.
Minha contribuição: UX/UI, Arquitetura da informação, UX Writing
A entrega: Seis tutoriais reorganizados em treze trilhas curtas e focadas por tópico, para facilitar o aprendizado em menos tempo.

02

Contexto da atuação

Empresa: Nelogica
Atuação: Product Designer · UX/UI
Colaboração: Equipe de desenvolvimento, com entregas semanais de design.
Recorte: Reestruturação de conteúdo e navegação do onboarding de um Home Broker.

03

O desafio

O Home Broker reúne ferramentas como Boleta, Lista de Ordens e Carteira. O tour guiado precisava ajudar novos usuários a entender essas funcionalidades sem concentrar explicações demais em uma única sequência.

Na análise da interface, identifiquei excesso de etapas e blocos longos de texto. A leitura acontecia no topo da tela, enquanto o controle para avançar ficava no rodapé. Essa separação exigia alternar a atenção entre duas regiões.

Antes e proposta

Modal do tour guiado com texto e controles de navegação reunidos

Arraste a linha para comparar. No teclado, use as setas.

04

Decisões de design

Dividir o aprendizado por objetivo

Por que essa decisão: A sequência anterior reunia muita informação em tutoriais extensos.
Como apliquei: Reorganizei o conteúdo em “Primeiros Passos” e “Ferramentas do Mercado”, distribuindo seis tutoriais em treze trilhas focadas.

Aproximar conteúdo e navegação

Por que essa decisão: O texto explicativo e a ação de avançar ocupavam regiões distantes da tela.
Como apliquei: Redesenhei os modais para aproximar a explicação dos botões e revisei os textos para tornar cada passo mais direto.

Prototipar diretamente em alta fidelidade

Por que essa decisão: O recorte principal era a disposição do texto e a divisão das etapas.
Como apliquei: Optei por trabalhar diretamente em alta fidelidade, apoiado na auditoria e no benchmarking, para discutir os ajustes de conteúdo e interface.

05

A solução em uso

Tela do tour guiado dividido em passos curtos de micro-learning — Divisão do conteúdo em trilhas curtas, cada uma dedicada a um objetivo de aprendizado.
Ampliar imagem

Modal do tour guiado com navegação limpa entre texto e botões — Texto e controles de navegação reunidos no modal para apoiar a leitura de cada etapa.
Ampliar imagem

Tela de comemoração ao final de um tour guiado — Tela de conclusão com sugestões de continuidade para outras trilhas.
Ampliar imagem

06

Resultados na experiência

Antes · seção completa

~10 min

Percurso extenso sobre a ferramenta.

Agora · por tópico

2–3 min

Foco em uma dúvida ou tarefa.

Aprendizado direto ao ponto

Seis tutoriais extensos deram lugar a treze trilhas curtas. O usuário escolhe o tópico de que precisa e aprende sem percorrer toda a apresentação da ferramenta.

Revisão rápida, sempre que precisar

Percursos de 2–3 minutos tornam mais prático voltar a um assunto para relembrar. O conteúdo funciona também como apoio durante o uso, sem exigir refazer um tutorial longo.

Engajamento com menos atrito

Etapas rápidas e objetivas diminuem o atrito para começar ou retomar um tutorial. Ao concluir um tópico, o usuário encontra sugestões de outras trilhas e segue aprendendo no próprio ritmo.

07

Aprendizados

Conteúdo também é interface

O trabalho envolveu a divisão e a organização das explicações, além do desenho dos modais.

Decisões conectadas ao problema

A proximidade entre texto e controles respondeu a um atrito identificado na análise da interface.

Aprendizado em etapas

A divisão em trilhas permitiu organizar o onboarding em objetivos menores e oferecer continuidade ao final de cada tour.