Modernização da Navegação
Redesenhei a navegação, desatualizada por 10 anos, de um site com 50M+ acessos/mês.
Panorama
O essencial, antes de entrar nos detalhes.
- Contexto: site com 50M+ acessos/mês, navegação parada há 10 anos, incapaz de acompanhar o crescimento planejado do produto.
- Problema: inconsistência entre plataformas, desorganização dificultando a implementação de novidades, e configurações importantes escondidas no rodapé.
- Solução: header redesenhado, menu de usuário fora do menu burger e sempre visível no header, conteúdo dos dois menus revisado e reorganizado, guided tour e Academy integrado ao ecossistema.
Resultado
Cliques internos do Menu Burger subiram +59% no total.
Engajamento no mobile subiu +271% com o menu de usuário fora do burger.
Cliques do Menu Burger subiram +47% no desktop.
Confirmado pelo relatório final (mar/2025), comparando a média de 10 semanas antes e depois do lançamento.
Contexto
Um site com muito mais a oferecer do que uma tela de letra de música.
- Quem entra no site buscando uma letra de música vai embora sem nunca explorar o resto: playlists, Academy, opções de personalização.
- A navegação não refletia claramente o que mais o site poderia oferecer, seguindo a mesma estrutura por 10 anos, e chegando a esse momento em que a empresa se organizava pra investir em crescimento e inovação.
Problema
Inconsistência, escalabilidade e visibilidade: os três problemas que a estagnação escondia.
Inconsistência
Desktop e mobile, cada um com sua lógica
Escalabilidade
Sem espaço pra novos produtos
Visibilidade
Idioma, tema e notificações, perdidos no rodapé
Processo
Descobrir, definir, desenvolver, entregar.
01Descobrir
O que a pesquisa indicava
Navegação externa e sempre visível aumentava a descoberta de funcionalidades, como em YouTube e Instagram, reforçado por artigos do Nielsen Norman Group.
02Definir
Arrumar a casa primeiro
Focamos na necessidade atual, com o que já tínhamos em mãos. Os receios que tínhamos deixaram a proposta mais ousada pra um segundo update.
03Desenvolver
Desenvolvemos em várias frentes
Nova linguagem visual com foco no conteúdo, menu de usuário reformulado, guided tour e reorganização de acessos.
04Entregar
Lançamos em janeiro de 2025
Conduzi o design do projeto, do discovery ao lançamento.
Solução
O que ficou no ar.
Header redesenhado
Visual mais moderno, com o conteúdo (artista, música, álbum) como protagonista, não mais competindo com a identidade do site.
- Visual atualizado por completo
- Login em destaque
- Conteúdo como protagonista
Menu de usuário, sempre à vista
No mobile, saiu de dentro do menu burger e ganhou espaço fixo no header, no mesmo padrão que já existia no desktop. Quem não está logado ganhou sua própria versão, com acesso a configurações antes escondidas no rodapé.
- Fora do menu burger no mobile
- Versão própria pra deslogados
- Configurações à vista
Guided tour
Coach marks apontando pros dois menus reorganizados, pra quem já tem conta descobrir o que mudou.
- Restrito a logados
- Aponta pros dois menus
- Só a parte externa
Letras Academy integrado
O Academy, até então um site separado de ensino de idiomas com música, passou a fazer parte do ecossistema principal do Letras.
- Antes, site separado
- Agora, dentro do ecossistema Letras
Explorar
Quer ver como isso foi entregue?
Esse é o arquivo de handoff que passei pro time de desenvolvimento: telas, specs e anotações de implementação, do jeito que foram usadas.
Aprendizado
O que não deu certo
- Criei o guided tour além do escopo necessário, muito mais extenso do que devia: a parte interna nunca chegou a ser construída.
- O link da Central de Contribuições perdeu acesso ao sair do header e perder visibilidade, movido para dentro do menu burger.
O que eu faria diferente
- Teria escopo menor em tudo, não só nas ideias que exploro, também no que produzo e entrego: o guided tour, por exemplo, eu cortaria pra caber só no que o projeto realmente precisava.
O que levo daqui
- Nem toda decisão que a pesquisa valida vira realidade de imediato: às vezes só dá pra provar que ela tava certa com dado real, depois do lançamento.
- Visibilidade corta nos dois sentidos: a mesma lógica que explica o maior ganho do projeto também explica a única perda confirmada, não é exceção à regra, é prova dela.
- Resolver uma inconsistência entre plataformas nem sempre significa levar a pior pro nível da melhor, às vezes o caminho é um padrão único mais simples pras duas.
Você também pode gostar
Como eu apliquei a lógica de um design system pra nunca mais travar na hora de decidir o que estudar
DiltonArtigo · 2026
Um sistema de tags no Notion, com scores que se propagam como tokens, ordena por mim o que ler, assistir ou ouvir primeiro, a partir do voto que eu dou em tags.
Melhorias na FAQ
LetrasCase study · 2025
Um pedido simples do CEO quase virou um sistema de suporte com IA white label
Facelift da tipografia no Letras: Pequena atualização, grande impactoLetrasProjeto · 2023
Atualizei a tipografia do Letras para modernizar as Foundations do produto, migrando pra Inter sem perder a familiaridade com a experiência nativa do usuário.
Design Tokens: Construindo uma baseLetrasProjeto · 2023
Defini as regras de estruturação dos Design Tokens do Letras, criando a base pra uma renovação completa das Foundations do produto.
O relatório final do projeto, feito em março de 2025 (lançamento em 15 de janeiro de 2025), trouxe, além dos dois resultados principais, um panorama completo da navegação nos meses seguintes ao lançamento, organizado por área abaixo.
Metodologia dos percentuais: comparação entre a média das 10 semanas antes do lançamento e a média das 10 semanas seguintes (todo o período coberto pelos dados, analisados em março de 2025). Usar 10 semanas de cada lado, em vez de só as primeiras semanas pós-lançamento, evita que o número fique preso ao pico inicial de novidade, mais alto que o padrão que se sustenta depois.
- Mover o menu de usuário de dentro do menu burger pra fora, direto no header, gerou o maior salto de engajamento do projeto, confirmando que navegação escondida custava visibilidade.
- No mobile, o Menu Burger teve queda gradual de acessos, provavelmente ligada à redução da base de usuários logados; ainda assim, os cliques internos e a taxa de conversão subiram, validando a nova estrutura.
- O Menu User (Deslogado) teve bons resultados em ambas as plataformas, mas os cliques internos caíram depois do pico inicial: o conteúdo do menu é pontual e perde relevância com o tempo.
- O Menu User (Logado) cresceu em interações nas duas plataformas. No desktop, os cliques internos se mantiveram estáveis, o que reduziu a taxa de conversão.
- Os links para login tiveram alta com a nova navegação, mas acompanharam a queda de acessos ao menu deslogado depois.
- O link pro Contrib caiu no desktop, depois de sair do header e perder visibilidade. No mobile também caiu, possivelmente pela base menor de logados e pela retirada das opções do usuário do menu burger; ainda assim, as contribuições em si se mantiveram estáveis, com leve queda sem correlação direta.
- A conexão do Spotify, movida pra dentro do menu do usuário, ganhou mais visibilidade e gerou mais conexões, com queda no mobile depois de um pico inicial.
- A reformulação não impactou significativamente o total de acessos ao site, e o tempo médio no site oscila com leve tendência de alta, sem relação clara com a nova navegação.
O próprio relatório usou os resultados positivos pra justificar avançar com a proposta mais ousada: navegação lateral fixa no desktop e bottom navigation no mobile.
Detalhamento por métrica, direto do relatório:
Análise Engajamento Macro
1. Número total de acessos
- Os gráficos indicam estabilidade geral no tráfego.
- Não houve impacto positivo ou negativo significativo após a reformulação.
2. Tempo médio no site
- Oscilação natural entre semanas.
- Leve tendência de alta, mas sem indícios claros de relação direta com a nova navegação.
3. Taxa de usuários logados
- Havia uma queda prolongada na taxa de usuários logados do mobile, desde novembro, antes da atualização da navegação.
- A atualização ajudou a estabilizar essa queda, reduzindo o ritmo de perda de usuários logados.
- A quantidade de usuários logados no mobile se estabiliza no mesmo patamar do desktop.
Menu Burger
1. Mobile
- Leve queda no uso do Menu Burger ao longo do tempo, desde antes da atualização.
- Possíveis causas: a queda no número de usuários logados no mobile, que antes usavam mais o menu; e os itens do usuário logado terem sido movidos do menu pro header, reduzindo a necessidade de acessá-lo.
- Mesmo com menos acessos, os cliques internos aumentaram bastante.
- Resultado: taxa de conversão subiu, validando a eficácia da nova estrutura.
2. Desktop
- Nos gráficos, tanto os cliques no Menu Burger quanto os cliques internos e a taxa de conversão apresentaram aumento significativo.
- Todos os indicadores são positivos, evidenciando que, no desktop, a reformulação foi um sucesso.
3. Mobile vs Desktop
- Mobile apresenta números muito superiores ao desktop, refletindo a proporção da base de usuários (70% mobile vs 30% desktop).
- Possível fator extra: o ícone do Menu Burger é proporcionalmente menor e menos evidente em telas grandes, o que pode contribuir para o menor número de interações no desktop.
4. Total
- Os gráficos totais refletem principalmente o comportamento do mobile, que domina a base de usuários.
- A única divergência entre os dispositivos foi nos acessos ao menu: caíram no mobile, mas subiram no desktop. Ainda assim, o total seguiu a tendência de queda, puxado pelo volume maior do mobile.
- Apesar da queda nos acessos ao Menu Burger no mobile, os cliques internos e a taxa de conversão aumentaram no total, confirmando a eficácia da nova estrutura.
Menu User (Deslogado)
1. Mobile
- Todos os gráficos apresentaram resultados positivos: mais cliques no menu, mais cliques internos e maior taxa de conversão.
- Os cliques internos, porém, mostram uma tendência de queda após um pico inicial.
- Motivos prováveis: o ícone com badge de notificação gerou alto volume de acessos no início; o conteúdo do menu é pontual (configurações, login, Spotify), e uma vez configurado, o usuário não tem motivo para voltar; com o tempo, o menu perde relevância como ponto de retorno frequente.
2. Desktop
- Resultados positivos: aumento nos cliques no menu, cliques internos e taxa de conversão.
- Após o lançamento, há leve tendência de queda nos cliques internos. Motivo provável: comportamento similar ao do mobile, usuários acessam, configuram o necessário e não retornam com frequência.
- A queda é mais sutil que no mobile.
3. Mobile vs Desktop
- A maior base mobile se reflete na quantidade superior de cliques.
- No mobile, o menu foi uma novidade e mostrou ser relevante e atrativo desde o lançamento.
4. Total
- Os resultados gerais são positivos, mas há um ponto de atenção: a queda nos cliques internos no mobile foi tão expressiva que nem o desktop compensou.
- Isso reforça que, após o uso inicial, o menu perdeu relevância e recorrência.
Menu User (Logado)
1. Mobile
- Crescimento relevante em cliques no menu, cliques internos e taxa de conversão.
- A taxa de conversão manteve crescimento constante, sem depender apenas de um pico inicial.
- Os dados indicam adoção contínua e consistente do menu logado no mobile.
2. Desktop
- Aumento nos cliques pra abrir o menu logado com a reformulação.
- O número de usuários que interagem com o menu no desktop ficou praticamente estável, mas o volume de cliques internos caiu: cada usuário passou a clicar menos vezes dentro do menu, porque o conteúdo virou links de saída em vez de abas navegáveis.
- Como resultado, houve queda na taxa de conversão: mais pessoas abrem o menu, mas interagem menos com os conteúdos internos.
3. Mobile vs Desktop
- Antes da reformulação, o uso do menu logado no mobile era muito inferior ao do desktop.
- A atualização, colocando o menu visível no header, equalizou esse comportamento.
- Agora, tanto os cliques no menu quanto os cliques nos conteúdos internos estão bem nivelados entre plataformas.
- Isso destaca o impacto positivo de tirar o menu do burger e deixá-lo acessível diretamente.
4. Total
- Os usuários logados ainda são, em sua maioria, do desktop, o que impacta os dados totais.
- Tanto os cliques no menu logado quanto os cliques em itens internos subiram em mobile e desktop.
- No entanto, a taxa de conversão total caiu, puxada pela queda na conversão no desktop, onde houve crescimento no acesso ao menu, mas não no uso dos conteúdos internos.
Análise por Compilados
1. Links para Login
- Aumento claro nos acessos aos links de login com a atualização da navegação, esperado diante da nova visibilidade e organização.
- No mobile, apesar do pico inicial com o lançamento, os acessos aos links para login vêm diminuindo nas semanas seguintes.
- Esse comportamento pode refletir queda de interesse ou estabilização, e se conecta direto com a quantidade de usuários e cliques internos no menu deslogado: no mobile, o menu deslogado é o principal caminho para fazer login.
2. Links para o Contrib
- No desktop, queda drástica de cliques após a remoção do link direto no header, agora dentro do menu burger.
- No mobile, o link não mudou de lugar, mas também houve queda. Possíveis causas: menos usuários logados (menos contribuintes); e usuários logados passaram a acessar outro menu, vendo menos o link atual.
- As contribuições no site seguem estáveis, com leve queda, sem correlação direta com a mudança de navegação.
- A leve queda nas contribuições já acontecia antes do lançamento, e pode estar ligada à diminuição de usuários logados.
3. Conexão do Spotify
- A mudança da funcionalidade para dentro do menu do usuário aumentou a visibilidade e gerou mais conexões.
- No mobile, após um pico inicial, houve queda ao longo do tempo.
- Possíveis causas: ação pontual já realizada, ou falta de incentivo para revisitar o menu.
Comparação entre menus
Comparação entre menus
Conclusão do relatório
- A atualização foi um sucesso, com aumento significativo de cliques em praticamente todos os menus, tanto em acessos quanto em interações internas.
- O único ponto negativo identificado foi a queda de acessos à Central de Contribuições (a área onde o usuário envia e corrige letras de música), causada pela perda de visibilidade ao mover o link pra dentro do menu burger.
- Em contraste direto, o caminho oposto (tirar o menu de usuário logado de dentro do burger e trazer pra fora, no header) gerou o maior aumento de acessos e interações do projeto, reforçando a importância da visibilidade na navegação.
Insights pro próximo passo
- O comportamento dos usuários reforça que navegações visíveis e externas funcionam melhor que itens escondidos dentro de menus burger.
- No desktop, isso abre mais confiança pra avançar com navegação lateral aberta, um padrão já familiar em plataformas como YouTube, Facebook e Instagram.
- No mobile, os dados encorajam seguir com bottom navigation, que alia os benefícios da visibilidade a uma experiência mais confortável e ergonômica, por ficar mais próxima do alcance natural do dedo.
- É a mesma direção proposta lá no Discovery, agora validada com dado real, e o próprio relatório usou esse conjunto de resultados pra justificar avançar com ela.
- Também mapeamos uma lista de ajustes táticos de curto prazo (visibilidade do link de contribuição, refinamentos no player do Spotify, notificações), já registrados como issues no backlog.
O Letras recebe mais de 50 milhões de acessos por mês, boa parte deles direto na tela de uma letra de música: alguém busca um verso, encontra, e na maior parte das vezes vai embora, sem saber que o site tem muito mais a oferecer.
Enquanto isso, a navegação seguia a mesma estrutura por 10 anos, mesmo com a empresa se preparando para crescer com uma leva de melhorias gerais no produto. Esse atraso não era um caso isolado: boa parte do site quase não recebeu atualização em anos, porque o foco da empresa esteve no aplicativo e no Letras Academy por um longo período.
Trazer o Letras Academy, produto próprio de ensino de idiomas com música que até então rodava como site separado, para dentro do ecossistema principal era um dos movimentos nesse sentido, não o único. O Academy vinha de anos de investimento, mas não estava funcionando bem sozinho, fora do ecossistema principal. Unificar ele dentro do Letras era um jeito mais barato de trazer inovação rápida pro Letras e, ao mesmo tempo, dar força ao Academy, sem precisar construir muita coisa do zero.
Uma navegação parada no tempo não comportava o crescimento planejado para um site com esse volume de acessos, e foi esse descompasso entre escala, estrutura estagnada e planos de expansão que deu origem ao projeto.
Essa estagnação acumulava três problemas centrais:
- Inconsistência entre plataformas: pra quem já tinha conta, acessar as próprias playlists era diferente em cada plataforma: no desktop, o menu de usuário ficava direto no header; no mobile, escondido dentro do menu burger.
- Escalabilidade: o site estava num momento de expandir funcionalidades e portfólio de produtos, começando por trazer o Letras Academy pra dentro do ecossistema principal. A arquitetura de navegação existente não tinha espaço pra esse crescimento.
- Visibilidade: idioma, tema e notificações ficavam escondidas no rodapé, longe da navegação principal. O usuário nem sabia que essas opções existiam.
Esses eram motivos internos, não reclamações externas de usuários.
A partir disso, foram formalizados dois objetivos de negócio no início do projeto, no formato OKR (comparando sempre 28 dias após a implementação com os 28 dias anteriores):
- Navegação e visibilidade: aumentar em 2% o tráfego a partir das páginas de letra e da página principal. Resultado real: tráfego total do site subiu 1,99% nos 28 dias após o lançamento, na prática batendo a meta.
- Integração do Academy: aumentar em 15% o tráfego de assinantes e não assinantes do Academy vindo do Letras. Resultado real: tráfego das páginas ligadas ao Academy (Dicionário, Aulas rápidas, Cursos de idiomas) subiu 19,3% no mesmo período, superando a meta.
- Descobrir: a pesquisa, apoiada em artigos do Nielsen Norman Group e em observações de benchmark de apps como YouTube e Instagram, indicava que navegação externa e sempre visível aumentava a descoberta de funcionalidades. Isso me levou a propor substituir o menu burger por navegação externa lateral no desktop e bottom navigation no mobile.
- Definir: mudar de uma vez uma navegação consolidada por 10 anos, usada por 50 milhões de acessos mensais, era um risco alto. Os usuários voltavam em média 1,5 vezes por mês, e os logados, 3 vezes por mês, hábitos consolidados que uma mudança radical podia quebrar. Também tínhamos dúvidas reais sobre a tela de letra de música: era a página mais acessada do site, não recebia atualização havia tempos, e não sabíamos se ela receberia bem uma navegação externa, nem o que mais caberia ali. Junto com os stakeholders, optamos por organizar a casa primeiro: uma versão mais conservadora, com mudanças pequenas que ajudassem os usuários a se adaptar aos poucos, antes de qualquer proposta mais ousada. Essas dúvidas sobre a tela de letra só foram resolvidas depois, num projeto dedicado só a ela.
- Desenvolver: o projeto avançou em várias frentes ao mesmo tempo:
- Uma nova linguagem visual, pensada pra dar foco ao conteúdo (artista, música, álbum) em vez da identidade do próprio site. Música tem milhões de estilos diferentes, o protagonismo deveria ser do que a pessoa está consumindo, não da marca do Letras.
- O menu de usuário reformulado: no desktop, cada aba (Artistas, Playlists) mostrava o conteúdo direto, favoritos e criados; no mobile, era só um link pra uma página separada. A atualização seguiu mais o padrão do mobile (só links), que já era 70% dos acessos do site, e também ajudava a levar o usuário a navegar por mais páginas e ver mais banners.
- Reorganização de acessos secundários: o botão de login ganhou mais destaque, e o link da Central de Contribuições foi movido pra dentro do menu burger.
- Um guided tour com coach marks, pra ajudar quem já tinha conta a descobrir as mudanças.
- Entregar: conduzi o design do projeto, do discovery ao lançamento. A versão conservadora foi ao ar em janeiro de 2025.
- Visual do header mudou por completo, ficando mais moderno.
- Botão de Logar no header ganhou mais destaque.
- Menu burger e menu de usuário, reorganizados e modernizados, mantidos no lançamento (a proposta de removê-los não foi adiante).
- Menu de usuário com duas versões (deslogado e logado), dando ao usuário deslogado a possibilidade de configurar necessidades próprias mesmo sem estar logado.
- No mobile, o menu de usuário morava dentro do menu burger, um sistema de gaveta que expandia, sem visualização direta da biblioteca. No desktop, já era separado do burger, com abas (Artistas, Playlists) mostrando o conteúdo direto, favoritos e criados. Reformulamos o menu de usuário do desktop e levamos esse padrão, visível no header, fora do burger, pro mobile, que antes não tinha, resolvendo a inconsistência entre as duas plataformas.
- Pra manter consistência, o conteúdo passou a ser mostrado do mesmo jeito nas duas plataformas: links pra páginas dedicadas, seguindo o padrão que já era do mobile (que respondia por 70% dos acessos do site), o que também ajudava o usuário a navegar por mais páginas e ver mais banners.
- Link da Central de Contribuições (Contrib, onde o usuário envia e corrige letras de música), antes externo e visível direto no header, movido para dentro do menu burger.
- Guided tour com coach marks, apontando de fora para o menu burger e o menu de usuário, restrito a usuários logados (não havia controle de frequência de exibição pra usuários deslogados).
- O guided tour cobriu só a parte externa (apontar pros menus). A parte interna, que apresentaria o conteúdo de dentro do menu de usuário, não chegou a ser feita.
- Letras Academy, produto próprio de ensino de idiomas com música que até então rodava como site separado, integrado ao ecossistema principal do Letras como parte da entrega desse projeto.
O que não deu certo
- A Central de Contribuições perdeu acesso, causado pela perda de visibilidade do link (movido para dentro do menu burger).
- Criei o guided tour além do escopo necessário: desenhei ele completo, cobrindo tanto a parte externa (avisando que o menu de usuário tinha mudado) quanto a parte interna (mostrando o que tinha dentro do menu em si), mas ele saiu maior do que o projeto realmente precisava. A parte interna nunca chegou a ser construída.
O que eu faria diferente
- Pesquisei muito, tive muitas ideias, e várias delas ficaram bem arrojadas. A empresa precisava de segurança e priorizou algo mais simples, mais próximo do que já estava no ar, isso hoje faz sentido pra mim, não é o ponto do problema.
- O problema foi outro: mesmo dentro dessa versão "simples" que ficou definida, produzi demais em algumas partes. O guided tour é o exemplo mais claro, saiu muito mais extenso do que o projeto realmente precisava, e a parte interna dele nunca chegou a ser construída.
- O que eu faria diferente não é ter menos ideia, é ter escopo menor em tudo, tanto nas ideias que exploro quanto no que eu de fato produzo e entrego pros outros times implementarem. Cortar ambição na ideia é uma coisa, a empresa já fez essa parte. Não superproduzir dentro da própria versão já decidida como conservadora é outra, e foi essa segunda parte que eu não fiz.
O que levo daqui
- Nem toda decisão que a pesquisa valida vira realidade de imediato: decidimos, coletivamente, uma versão intermediária primeiro, mesmo com a pesquisa apontando outra coisa. A versão conservadora validou, com dado real, a tese que eu defendia desde o início.
- Visibilidade corta nos dois sentidos: a mesma lógica que explica o maior ganho do projeto (menu de usuário fora do burger, mais visível) também explica a única perda confirmada (link da Contrib pra dentro do burger, menos visível). Não é exceção à regra, é prova dela.
- Resolver uma inconsistência entre plataformas nem sempre significa levar a pior pro nível da melhor: escolhi levar o padrão mais simples do mobile (só links) pro desktop também, em vez de dar ao mobile a experiência mais rica que o desktop já tinha. Às vezes o caminho é um padrão único mais simples pras duas, em troca de consistência.
Mais contexto