Case study · Janeiro de 2025

Modernização da Navegação

Foi isso que redesenhei: uma navegação sem atualizações relevantes por 10 anos, num site que recebe mais de 50 milhões de acessos por mês.

Contexto

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.

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.

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.

Problema

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.
Configurações escondidas: 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 6 meses após a implementação com os 6 meses anteriores):

Navegação e visibilidade: aumentar em 2% o tráfego a partir das páginas de letra e da página principal.
Integração do Academy: aumentar em 15% o tráfego de assinantes e não assinantes do Academy vindo do Letras.

Processo

Discovery e benchmark: a pesquisa, apoiada em artigos do Nielsen Norman Group e benchmark de apps como YouTube e Instagram, avaliou uma mudança estrutural mais radical: substituir o menu burger por navegação externa lateral no desktop e bottom navigation no mobile.
Decisão de escopo: junto com os stakeholders, optamos por uma abordagem faseada, começando com uma versão mais conservadora (reorganizar e modernizar a navegação existente, sem remover o menu burger) e usando essa fase como teste antes de avançar pra proposta mais ousada.
Direção visual: aproveitamos a reorganização pra trazer uma linguagem visual mais moderna, deixando o conteúdo (artista, música, álbum) como protagonista em vez da identidade do próprio site.
Trade-off assumido: desktop e mobile foram unificados num único menu de usuário baseado em links, sem nada navegável dentro do próprio menu, trocando a conveniência que só existia no desktop (ver, criar e tocar uma playlist sem sair do menu) por consistência entre plataformas.

A versão faseada foi ao ar em janeiro de 2025.

Solução

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.
Menu de usuário logado movido de dentro do menu burger para fora, direto no header.
Link de Contribuição (Contrib), antes externo e visível, 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.

Aprendizados

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 que o menu burger escondia conteúdo. Defender uma visão, aceitar um escopo mais conservador e deixar o dado falar depois também é parte do trabalho. O resultado validou a tese original, e abriu caminho pra proposta mais ousada ser levada a sério.
A solução lançada resolveu parte do problema, não o todo: a maior parte do tráfego do site entra direto pela tela de letra de música, não pela home, então boa parte da oportunidade real de navegação estava ali, não no header. Isso só ficou claro depois do lançamento, e virou o próximo passo natural do projeto.
Não definir com clareza pra quem o projeto era, além de “qualquer um que entra pela tela de letra”, é uma lacuna que hoje fica mais visível olhando pra trás, não uma escolha consciente na época.
Restringir o guided tour a usuários logados por limitação de controle de frequência é o tipo de decisão pragmática que equilibra o ideal com o que é possível medir e controlar de fato.
Resolver uma inconsistência entre plataformas nem sempre significa levar a pior pro nível da melhor. Às vezes o caminho é escolher um padrão único pras duas e aceitar que ele vai ser mais simples do que o melhor caso que existia antes, em troca de consistência.

Outcomes

O relatório final do projeto (lançamento em janeiro de 2025) marcou o projeto como sucesso.

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 com dado real que navegação escondida custava visibilidade.

O próprio relatório usou esse resultado pra justificar avançar com a proposta mais ousada: navegação lateral fixa no desktop e bottom navigation no mobile.