Navigation
Navigation
Liderei a pesquisa e o novo padrão de navegação web e mobile do TC.
Pattern
Pattern
Liderei a pesquisa e o novo padrão de navegação web e mobile do TC.
TC · fintech de investimentos
1 designer · 15 colaboradores
2022
O TC reunia 8 produtos de educação, comunidade e investimentos para quem está começando a investir. Pela frente de design system e ops, o trabalho envolveu o chapter de design e as squads parceiras, da pesquisa ao padrão final. O desafio: uma navegação para os produtos de hoje e os próximos, em meio a uma nova marca e um novo segmento.
Novo padrão
documentado no design system
15+ squads
na mesma estrutura
8 produtos
numa só navegação
600 mil +
usuários cadastrados na plataforma
A plataforma cresceu, a navegação não
Com mais produtos e abordagens diferentes, a navegação virou gargalo. Pesquisas e métricas mostravam pessoas perdidas, e o time não tinha um padrão para escalar.
O reposicionamento de marca e a entrada em um novo segmento aumentavam a urgência.
Os dados derrubaram hipóteses
Cruzamos o acesso aos produtos por plano e perfil. Quem usava a versão gratuita ia muito mais aos produtos de comunidade, e cada plano tinha seus próprios favoritos.
Isso mudou a ordem e até a presença de itens no menu.
Boas práticas que faltavam
Analisamos o tamanho e o comportamento dos elementos de navegação em cada dispositivo.
O menu em lista única limitava o consumo dos itens, e alguns submenus não acompanharam a evolução dos produtos.
Uma nova estrutura, cocriada
Em dinâmicas com o chapter, exploramos a visão de longo prazo para cada produto.
Dali saíram a nova estrutura de grupos do menu principal e as primeiras soluções: menu pensado para web e mobile, vitrine de produtos e menus secundários.
Validar antes de construir
Nos testes rápidos com usuários, apareceram conflitos entre funcionalidades e nomes de planos, e a busca usada para tarefas mínimas.
Os novos grupos do menu melhoraram a localização, tanto na posição quanto nos termos.
Do ideal ao possível
A visão de longo prazo virou etapas: novo header mobile, vitrine para o novo produto, menu web e o redesenho final.
O padrão foi documentado no design system e implementado pelas squads parceiras. A visão orienta; a entrega acontece em etapas.
