O surgimento de novos serviços tornou-se um teste para a página principal do Mail.ru - ficou mais difícil para os usuários encontrarem as seções de que precisavam, e a empresa decidiu atualizar o design. Os especialistas do Grupo Mail.ru falaram sobre as mudanças na versão mobile da página principal do portal, quais as tarefas que resolve e quais os resultados alcançados.
Como era antes
A versão antiga da página inicial móvel por vários anos resolveu completamente as tarefas que eram esperadas dela. Os usuários moviam-se facilmente entre as guias, encontrando facilmente "Mail", "Pesquisa" e "Notícias". No entanto, o surgimento de novos produtos do Grupo Mail.ru tornou-se um desafio crescente - era mais difícil integrá-los à versão atual e havia fragmentação entre os blocos. Por exemplo, a linha “Pesquisar” ou a janela de login “Correio” começou a notar pior, a profundidade de rolagem da página caiu e os usuários saíram do meio do feed de notícias. Versão móvel antiga da página principal do Mail.ru
Além disso, devido ao redesenho da marca Mail.ru, Mail e Poisk começaram a diferir visivelmente do estilo visual da página principal. Ficou claro que era hora de atualizar completamente o principal - organizar organicamente os produtos atuais da empresa, lançar as bases para novos serviços e parceiros.
O plano era assim:
- Alterar o estilo visual da página principal com base no novo design do sistema Mail.ru;
- Torne o acesso a todos os serviços cômodo e rápido;
- Adicione uma navegação divertida à página por meio de recomendações individuais de materiais e métodos de design;
- Manter a visibilidade de todos os produtos e ter em consideração os interesses daqueles a que mais frequentemente se dirigem a partir da página principal - "Correio", "Pesquisa" e "Notícias";
- Adapte as mudanças para dispositivos com telas pequenas, para que todos os usuários se sintam confortáveis.
Onde você começou
Mudanças fortes na UX de qualquer produto podem causar dificuldades para os usuários. Para tornar a adaptação ao novo design menos penosa, decidimos atualizar o principal em etapas.
Para começar, decidimos direcionar a atenção do usuário para elementos importantes apenas com ferramentas visuais. Opções da primeira página da IU
Na primeira etapa, foram desenvolvidas três versões da página principal. A mesma sequência de blocos é visível: "Correio" no topo, "Pesquisa" no meio, depois publicidade e "Notícias". Removemos todos os elementos não prioritários da primeira tela para focar a atenção do usuário nos principais produtos e não desviar a atenção do Correio e da Pesquisa. Nessas variantes, mudamos globalmente apenas a IU, aplicamos parcialmente nosso novo sistema de design, a saber: blocos e botões arredondados, adicionamos uma sombra e criamos widgets de clima e citações, mas deixamos muitas cores de destaque.
Em seguida, trabalhamos no restante dos produtos de rolagem. Cada bloco e produto adquiriu um design próprio, o que ajudou a cumprir suas funções. Nova fita
Por exemplo, para "Kino Mail.ru" eles criaram um fundo escuro - desta forma, o conteúdo multimídia é mais fácil de perceber. Para jogos, adicionamos cartões grandes com uma capa, em que as atualizações são perceptíveis. Uma troca conveniente entre os canais foi adicionada ao programa de TV para tornar mais fácil para o usuário encontrar programas que lhe interessam. Também apresentamos recentemente o Pulse, um feed de recomendação personalizado. Na nova página principal, mudamos um pouco seu estilo, adicionamos um fundo escuro, o que aumentou a clicabilidade.
Ao mudar a página principal, conduzimos uma série de estudos de usabilidade em nosso laboratório para entender como os usuários reais percebem as mudanças. De acordo com os resultados dos primeiros estudos, 80% dos entrevistados, independente da localização do anúncio, elegeram o chapéu azul como mais brilhante e atraente. Eles a deixaram. Mas o problema com a priorização de produtos permaneceu - a cor azul atraiu muita atenção, por isso a "Busca" foi perdida. Os usuários não perceberam ou pensaram que era um painel de senha para fazer o login em sua conta de e-mail.
Alterando a página UX
É hora de reconstruir a estrutura da página. Por meio de pesquisas anteriores e da visão estratégica do produto, entendemos que a estrutura da primeira tela deve permitir ao usuário navegar instantaneamente na tela inicial. Variações da página inicial para pesquisa de UX Para teste no laboratório de UX, reunimos vários layouts com diferentes layouts de bloco para determinar qual combinação seria melhor para os usuários. Neles mudamos a estrutura, a saber:
- "Pesquisar" foi colocado no topo, pois significa o início do estudo da página, e esta disposição é geralmente mais familiar para o usuário;
- «» «» , . «», , «» . . : , ;
- «» «». , «» «». ;
- .
O teste de UX mostrou o seguinte. Os usuários viram imediatamente "Pesquisar", que é o que queríamos. "Mail" tornou-se menos perceptível, mas depois corrigimos visualmente, adicionamos cor e animação na entrada.
"Notícias" ficou no mesmo lugar, mas fizemos um pequeno trabalho no próprio bloco: mudamos a quantidade de notícias (os testes também mostraram a necessidade disso), acrescentamos recuos entre os materiais e aumentamos o tamanho da fonte. “Pulse” foi adicionado ao feed, tornando-o infinito, então o rodapé foi movido para o menu de hambúrguer no canto superior esquerdo - é assim que conseguimos um lugar para outros projetos do Grupo Mail.ru sem perdas para o design e para o usuário.
Inicialmente, decidimos que a publicidade ficaria no topo, separada do resto dos blocos - parecia-nos que era mais conveniente. Mas os participantes do teste perceberam a página inteira como um anúncio, então a colocaram abaixo.
Para posterior desenvolvimento do projeto, foi escolhida a opção com o melhor resultado após o teste em laboratório, onde:
- No topo há um bloco de navegação com menu, geolocalização e perfil;
- "Pesquisar" acima de "Correio" e "Tempo" ao lado de "Notícias";
- Cor de menos destaque (apenas o logotipo e a Pesquisa permanecem azuis).
Toques finais
Decidimos a estrutura, agora não resta coisa menos importante - a parte visual.
Tínhamos várias opções com diferentes formas e detalhes. Como resultado, a página tornou-se "limpa": branca com blocos-chave bem marcados. A cor corporativa distinguia organicamente "Pesquisa", "Correio" e "Notícias". A linha "Pesquisar" foi arredondada para que se destaque mais e não se confunda com os widgets abaixo. Separação de “clima” e citações - os blocos horizontais são mais adaptáveis e permitem a adição de novos elementos. Adicionando Widgets Agora você pode adicionar vários produtos ao lado do widget Mail sem quebrar nada. Em outras versões, isso não pode ser feito devido ao carrossel duplo. Como resultado, você pode comparar como era e como se tornou.
Comparação do design antigo e novo da versão móvel da página principal do Mail.ru
Como a nova casa vive e prospera
“Sempre implementamos a atualização gradualmente para não quebrar os cenários usuais do usuário. Os usuários perceberam positivamente o novo design, o que foi confirmado pelo aumento nas conversões e referências ”, diz Vyacheslav Yashkov.
Como resultado, notamos as seguintes mudanças:
- + 12% para transições para projetos de mídia, incluindo clima e covid;
- + 4% para transições para "Pesquisa";
- + 5% nas transições para o "Correio".
No momento, estamos trabalhando ativamente na personalização da página, a fim de fornecer apenas informações úteis e relevantes. Para usuários do ecossistema, a integração será muito mais profunda.
A composição da equipe criativa:
- Alena Kitabova - Gerente de Produto.
- Vyacheslav Yashkov é o chefe da equipe de design de Pesquisa e IA.
- — Search & AI.
- — frontend- .
- — frontend- .
- — frontend- .
- — frontend- .
- — .