Redesenhando a home da globo.com
Repensando a experiência de um dos maiores agregadores de conteúdo da América Latina.
— Este artigo foi escrito em conjunto com Daniel Neves.
Ao todo, o projeto foi desenvolvido por mais de 20 pessoas de diferentes disciplinas. Todos que participaram dessa jornada tiveram contribuições muito importantes 💙.
A globo.com é o produto digital mais tradicional do Grupo Globo, além de ser historicamente um dos maiores agregadores de conteúdo da América Latina. Com 20 anos de existência e apenas algumas mudanças pontuais recentes, desde 2011 não haviam atualizações mais significativas no site. O produto precisava se adequar às novidades do meio digital, assim como às novidades dos demais produtos Globo.
Com dezenas de milhões de usuários e quase 300 milhões de visitas mensais, se mantém como um dos produtos mais relevantes do portfólio digital da Globo, tanto em audiência quanto em publicidade, assim como um dos principais agregadores de conteúdo do Brasil. Entre vídeos, matérias em texto, podcasts, eventos ao vivo e toda sorte de formatos, mais de 40 marcas diferentes são ofertadas aos usuários da globo.com diariamente.
Portanto, no início de 2020, um novo time foi montado para pensar e implementar sua evolução. Neste artigo quero falar um pouco do contexto e processos que nos permitiram repensar a experiência de um produto tão icônico sem deixar de lado sua essência, já planejando futuras evoluções.
Evoluir sem perder a tradição
Sabíamos que algumas características e paradigmas precisavam ser revistos e levados em consideração na hora de pensar esse novo produto. Qualquer mudança que fosse, mexeria profundamente nos hábitos dos usuários acostumados a navegar na globo.com diariamente.
As icônicas 3 cores (jornalismo vermelho, esportes verde e entretenimento laranja) continuam sendo até hoje um dos pilares de organização do conteúdo do site. Porém, também precisávamos pensar em como representar a variedade de produtos que compõem as ofertas.
Precisávamos também preservar o valor comercial da home, um dos pilares que traz relevância e sucesso para site. Ao mesmo tempo que, caso houvessem oportunidades, buscássemos identificá-las e valorizá-las ainda mais.
Outro ponto importante foi que, dado o escopo do projeto, a home precisava se manter como uma página única, e isso limitava nossas opções de evolução.
O processo
Como qualquer grande projeto, haviam muitas pessoas envolvidas e complexidades. Estabelecer um processo poderia ter sido difícil levando em conta que estávamos nos adaptando ao trabalho remoto por conta da pandemia de COVID-19.
Apesar das circunstâncias adversas, conseguimos seguir um processo bem redondo, desde o discovery, as hipóteses de solução, os testes de protótipo, até a proposta de MVP com apresentações para os stakeholders. Irei passar pelos principais pontos que nos permitiram chegar ao resultado final.
Discovery
Para iniciar o projeto, planejamos junto com a equipe de UX Research uma extensa pesquisa com consumidores de notícias. Os objetivos principais eram entender os hábitos de consumo de notícias na internet e o papel das redes sociais ao se informar no dia-a-dia.
Conversando com pessoas de todas as regiões do país, chegamos a algumas conclusões que guiaram nossos próximos passos:
- Portais e agregadores de notícias em geral ajudam a dar um panorama do que está acontecendo no mundo;
- Num mundo de redes sociais e aplicativos de mensagem, agregadores de conteúdo são uma boa fonte de confirmação de fatos e notícias;
- As cores ajudam a organizar, mas cada usuário dá um significado diferente para elas;
- As redes sociais funcionam como um hub de conteúdos personalizados e curados pelo próprio usuário;
Jobs to be done
A pesquisa nos permitiu entender e definir os jobs to be done dos usuários em agregadores de conteúdo. Dessa forma, foi possível mapear pontos e features mais estratégicos no produto para atender todas as suas necessidades.
Desenhando as soluções
Depois de entendermos as necessidades dos nossos usuários, começamos a criar as propostas de solução para o redesign.
Experiência mobile-first
Pela falta de grandes mudanças em muitos anos, a experiência ainda era focada no desktop. Para garantir a melhor experiência do sempre crescente público mobile, uma de nossas premissas foi pensar o projeto a partir das telas menores.
Optamos por usar mais trilhos de navegação horizontal que, levando em consideração o fato de ser uma página única, ajudou a reduzir o tamanho da página, e também deu autonomia para o usuário explorar ou pular diferentes áreas de acordo com o seu interesse.
Função e aplicação das cores
Apesar de cumprir sua função de organizar a página por temas, sua aplicação excessiva foi considerada exaustiva por alguns usuários, além de deixar a página pouco flexível para a convivência de matérias de assuntos diferentes.
Concluímos, então, que era necessário construir um novo sistema. Levando em consideração as 3 cores, criamos um modelo mais flexível para o editor que permitia combinar as diferentes cores lado a lado sem poluir visualmente a página.
Optamos por uma abordagem mais neutra, seguimos o caminho de adicionar um componente "chapéu" às manchetes. Esse elemento não só permite utilizarmos as cores de forma mais sutil, mas também adiciona a possibilidade editorial de contextualizar os usuários sobre o assunto da matéria.
Pra onde esse link me leva?
Outra oportunidade que identificamos foi a de indicar a fonte da matéria ofertada, para qual produto ele iria, ou qual editoria dentro dos produtos. Assim, damos mais clareza para a diversidade do portfólio de produtos da Globo, ao mesmo tempo que informamos ao usuário que ele sairá da página que está.
Distribuição
Havia ainda muito potencial dentro da principal função do produto: distribuir os mais variados conteúdos produzidos dentro do portfólio digital Globo.
Para atender aos jobs de ampliar e descobrir que identificamos anteriormente, adicionamos um trilho de assuntos para levar o usuário às páginas internas dos produtos.
Nas pesquisas com protótipo para validação de conceito, essa nova navegação para páginas internas foi uma das funcionalidades percebidas como mais interessantes pelos usuários.
O poder das imagens
Por se tratar de um agregador de conteúdo, precisamos considerar a importância das imagens. No novo desenho buscamos valorizar esse elemento, aumentando o tamanho e a importância da imagem em comparação à página atual. E, inspirados na marca mãe da Globo, usamos bordas mais arredondadas.
Novo branding
Criada em parceria com a Plau, a Globotipo, fonte institucional utilizada nos programas de TV, ainda precisava ser adaptada para o ambiente web. Para o meio digital, era necessário ter uma maior legibilidade em tela, aliada à performance de uma fonte variável.
No portfólio de produtos digitais Globo, a Open Sans é utilizada como tipografia principal. Apesar dos benefícios de facilidade de leitura, haviam muitos tamanhos e usos diferentes, o que dificultava a escalabilidade do sistema tipográfico.
A Globotipo Variável, adequação direta da Globotipo original, surge para suprir essas necessidades. A nova globo.com já nasce com essa presença de marca maior em cada oferta de conteúdo da página.
Resultado
O resultado foi cuidadoso com a história do produto. Se a mudança visível mais significativa foi um grande redesign, as mudanças invisíveis estão nas novas soluções de tecnologia por trás, que vão nos permitir trazer novas possibilidades e evoluções que já estão no nosso roadmap. Esse projeto foi só o começo, apenas o primeiro passo para o futuro do agregadores de conteúdo.
Mal podemos esperar para ver os usuários usando a nova globo.com e como isso vai ajudá-los a se informar cada vez melhor.
Agradecemos a todos que passaram pelo projeto: devs, gestores, time de negócios, plataforma de publicação e equipe de UX Research que estava lá no início para nos ajudar com os primeiros insights do projeto.
Muito obrigado pela leitura! Caso tenha dúvidas ou mais curiosidades sobre o projeto, ficaremos muito felizes em responder nos comentários. 😉
