NS logo image.

⎯ guiando a plataforma TC para o caminho ideal de navegação e elementos visuais.

tc.nav
pattern

motivation

Indicadores de experiência apoiaram o levantamento de hipóteses sobre a alta complexidade do usuário se localizar e interagir com os principais elementos de navegação, perdendo informações importantes da jornada.

A operação de design também não estava conseguindo escalar o produto de forma consistente, sem um direcional sobre hierarquia dos produtos, páginas e posicionamento dos principais elementos da UI.

# design system & ops
# user journeys
# user testing
# facilitation
Como pessoa responsável pela iniciativa de design system & ops, iniciei os estudos em busca de um novo padrão de navegação para a plataforma web e mobile, pensando em toda a sua escalabilidade e necessidades à médio e longo prazo.

context

O TC é uma plataforma que reúne todo o material para uma pessoa física ingressar no mundo dos investimentos, tendo frentes para educação, interação social e até transação.

Com o crescimento da plataforma e diferentes abordagens pelos produtos, a navegação se tornou um gargalo para evoluir as funcionalidades de forma consistente e um reflexo negativo na experiência do usuário, sinalizado em diversas pesquisas, entrevistas e métricas coletadas pelos times.

‍

Re⎯posicionamento de marca

Algumas decisões de negócio e branding no início da segunda metade de 2022 impulsionaram ainda mais mudanças grandes na plataforma:

  • Reposicionamento da marca com uma nova identidade visual, tom de voz e comunicação sobre a jornada do usuário;
  • Expansão do portfólio de produtos e início da jornada em um novo segmento.

‍

research

/na·ve·ga·são/
substantivo feminino
‍1. ato de navegar; 2. viagem sobre dispositivos, que pode ser móvel (celulares, tablets), ou fixo/modular (notebooks, desktops).

“A navegação deve facilitar o acesso aos produtos da plataforma e contribuir para melhorar a encontrabilidade de informação e conteúdo nos produtos.”
⎯ TC Design System

‍

Tipos de navegação com base no Capítulo 4. Types of Navigation do livro Designing Web Navigation.

comportamento dos usuários

Algumas descobertas foram cruciais para motivar mudanças significativas na ordem e até presença de alguns produtos nos diferentes menus de acesso, refutando hipóteses do time e stakeholders:

  • Quando o usuário é freemium o acesso aos produtos sociais é muito mais parelho;
  • Há uma variação alta entre os produtos mais acessados de cada plano;
Análise e comparações dos acessos aos produtos por plano e perfil de acesso.

‍

Usabilidade e interação

Analisando o tamanho e comportamento dos elementos de navegação, foi possível perceber a falta de alinhamento com as boas práticas de cada dispositivo e outros itens de melhorias:

  • O único formato de lista contínua no menu, principalmente o primário, estava limitando a experiência e consumo dos itens;
  • Alguns submenus não foram muito bem planejados e geraram gargalos na experiência após as evoluções dos produtos.
Análise dos principais elementos globais de navegação e seus impactos nos produtos da web e mobile.
Novas hipóteses foram levantadas sobre diferentes contextos de experiência para cada produto
TC = consumo + contribuição + /negociação/

first flow

A partir dos insumos coletados, dinâmicas de cocriação com todo o chapter para explorar as possíveis abordagens para o produto em um longo prazo ajudou a entender as expectativas dos diferentes cenários para cada produto.

‍

Visão de produtos

Levantamento da nova estrutura de grupos para o menu principal.

‍

Primeiras soluções

Novas dinâmicas foram feitas para refinar as possíveis soluções, entender a viabilidade e os principais marcos de possíveis implementações, englobando os cenários:

  1. Menu principal com experiências direcionadas para web e mobile;
  2. Vitrine de produtos para contextualização inicial da experiência;
  3. Outros elementos de menus secundários presentes na navegação global.

validate

Em testes rápidos com usuários próximos conseguimos observar comportamentos cruciais para a evolução dos estudos:

  • Conflito entre as principais funcionalidades da plataforma e termos usados para representar os planos de acesso;
  • Uso contínuo da busca para as mínimas tarefas de navegação e localização de páginas;
  • Melhorias significativas a partir dos grupos de acesso do menu, tanto o posicionamento quanto os termos usados;
  • Percepções diferentes de usuários em níveis e planos diferentes.

Entre outros pontos, o principal aprendizado nessa etapa foi entender o quanto as experiências de cada produto deve ser priorizada em cada momento da jornada e como a navegação pode atender ao máximo os perfis de uso sem conflitar com contextos de cada produto.

prototype

Para a implementação completa da solução foram definidas pequenas etapas de implementações, trazendo melhorias contínuas para atender as necessidades do negócio e evoluindo o aprendizado do usuário com a nova experiência proposta aos poucos.

Etapa 1

Novo header mobile: explorar a nova solução para o menu secundário sobre o plano do usuário, trazendo melhorias de interações e áreas de cliques na experiência mobile.

Novo fluxo para manifestação do menu de planos, a partir de novos elementos para o header na experiência mobile.

Etapa 2

Atender o novo produto: entender a oportunidade de explorar "vitrines" para produtos e nova organização com os novos grupos para os itens do menu principal.

Novo produto com vitrine inicial e disposição no menu principal.

Etapa 3

Evoluir experiência web: melhorias de conflitos entre elementos globais e locais, evoluindo a experiência de adaptação do menu para outros momentos da jornada.

Nova interação para alterar a disposição do menu, removendo conflitos com outros elementos mais locais de cada produto.

Etapa final

Redenho da experiência web e mobile: a partir do estudo moonshot inicial, evoluímos a solução para o melhor cenário a médio/longo prazo para a experiência com os elementos globais de navegação.

Evolução na organização dos elementos do menu principal, a partir das expectativas do usuário nos principais pontos de sua jornada.

Apoio de um menu secundário, quando necessário, com a imersão total em todo o contexto e conteúdo do produto ativo.

Destaque e posicionamento único para ações principais e elementos de apoios fixos, com a mesma imersão de uso em diferentes contextos de produtos.

Funções cross em posicionamentos fixos e complementares aos elementos mais globais da interface, sem impactar na experiência individual de cada produto.

conclusion

Todas as etapas devem receber melhorias a partir do aprendizado ao longo do caminho, apoiando as próximas hipóteses para a experiência contextualizada por produto e perfil de usuário.

‍

entregáveis

O estudo foi concluído no desenvolvimento de um pattern, material na documentação final do design system sobre o uso dos principais componentes de navegação para apoio no dia-a-dia do desenvolvimento de soluções escaláveis para o produto.

Representação da documentação do pattern de navegação, ainda com a identidade visual antiga do TC.

Todo o desenvolvimento e implementação foi conduzido por squads parceiras e que seriam impactadas no curto prazo pelas principais entregas, com o acompanhamento e especificações dadas pelo time de design system & ops.

‍

aprendizados

⎯ Exercício moonshot e suas limitações para o dia-a-dia de desenvolvimento;
⎯ Facilitação e negociação com diversos times de diferentes contextos;
⎯ Visão macro da experiência global e o impacto nos elementos micro da UI;
⎯ Gestão de expectativas com stakeholders.

⚠️ No momento do registro desse material o projeto ainda não foi implementado por completo.

contact

linkedin
resume
living in Sao Paulo, Brazil.
contato@nathansantos.design