Editorial | Case

Como transformar um editorial em uma experiência diferenciada, que compreenda os usuários? O briefing que foi dado para mim e iany trisuzzi, foi que elaborássemos um site responsivo para um editorial, pensando nas necessidades e objetivos dos usuários.

Para chegar a solução final passamos pelas seguintes etapas:

• Pesquisa
• Definição/Ideação
• Soluções
• Ui

Pesquisa

Nesse projeto, já veio definido a persona que deveríamos trabalhar, no caso a Paula Soares. Uma jovem de 19 anos, super conectada, que está sempre nas redes sociais ou consumindo conteúdo online. A qual possui os seguintes objetivos:

• Ser uma artista reconhecida no mundo das artes e ter sua primeira exposição;
• Se conectar com pessoas de todo o mundo;
• Ser e se mostrar ser uma pessoa descolada;
• Ler os autores mais influentes e compartilhar isso no instagram.

Benchmark

Para entender um pouco melhor sobre ela e o mercado, fomos analisar os sites/revistas que ela já consome e tiramos alguns pontos para reutilizarmos na nossa plataforma. Analisamos a Vice, Rolling Stone e Man Repeller.

Vice

Prós:

• App com boa separação do conteúdo, categorias, mais visual lembrando o Instagram;
• Identificaram as duas formas que o consumidor gosta de consumir conteúdo e apresentaram como opção de navegação (Leia/Assista) (Popular/Últimas);
• Layout sóbrio e diagramação consistente;
• Bem organizado.

Contras:

• No site perde um pouco do visual que tem no app.

Rolling Stone

Prós:

• Muito bem estruturado;
• Separado por categorias de uma forma clara, primeiro vem o título, depois as notícias relacionadas a eles, depois as reviews;
• Área de destaque para os colunistas/jornalistas.

Contras:

• Muita propaganda de outras marcas;
• Muito conteúdo na página inicial;
• Estrutura de jornal/revista física, não explorou bem o fato da plataforma ser digital.

Man Repeller

Prós:

• Visual mais moderno e interessante dos três;
• Destaques divertidos diretamente nos posts, ao invés de separar por “seção”;
• Área que simula o Instagram, se você clica vai para uma página com a mesma estrutura da rede social e clicando na foto te leva para a página referente;
• Seção de “mais pra ver” mostra posts parecidos com já um comentário que teve de usuário no artigo.

Contras

• Conteúdo fica muito “perdido”, as categorias ficam separadas somente na barra superior, mas na home não tem nada informando sobre o que se trata os posts da parte que o usuário está;
• Tem uma loja dentro do site também e tem uma barra fixa que fica chamando sua atenção pra lá;
• Diagramação confusa.

Definição/Ideação

Agora já conhecendo a Paula, sabendo os objetivos dela, o próximo passo seria como podemos atingi-los. Para isso utilizamos de algumas metodologias de ideação, como o crazy 8.

Depois disso realizamos o user story, para assim detalhar melhor as features e utilizamos o diagrama de priorização para nos guiar no nosso MVP.

Diagrama de priorização.

Após saber o que nosso editorial deveria ter, fizemos um sitemap estruturando como possivelmente seria nossa plataforma. Em seguida realizamos dois card sorting, sendo o primeiro aberto, em que damos as seguintes categorias: Música, filmes, gastronomia, fotografia, curiosidades, moda, arte, literatura, teatro, museu/exposição e política. E pedimos para as pessoas agruparem e nomearem as categorias.

E o segundo que demos as categorias, cultura, cotidiano, e pedimos para as pessoas agruparem os tópicos entre elas. Depois que realizamos os card sorting, refizemos o sitemap, agrupando de uma forma mais compreensível para o usuário.

Sitemap pós card sorting.

Soluções

Como soluções para os problemas da Paula, propomos:

• Para divulgar artistas desconhecidos: criamos a sessão, artista da semana;
• Para aumentar a interação: criamos os comentários, replays nos comentários e também a sessão dos últimos comentários, que as pessoas podem saber o que está acontecendo no momento;

• Para aumentar o engajamento e a Paula ser ainda mais descolada, criamos uma hashtag personalizada, na qual ela pode compartilhar os reviews dos livros citados no site que depois aparecerá na sessão, resenha dos leitores, além disso tornamos possível o compartilhamento de todos os artigos.
• Para a Paula ler os autores mais influentes adicionamos os icones de trending, mais vistos e mais comentados.

Com a parte de UX já definida, passamos para a próxima fase, a parte de UI, para isso começamos elaborando um moodboard que representasse essa persona, algo que remetesse ao jovem, urbano e conectado.

Ui

Para começar o processo de Ui, fizemos um moodboard, que representasse essa pessoa jovem, urbana, o movimento e a tecnologia.

Posteriormente confeccionamos um Style title, que é um guia básico, de fontes, ícones, cores, entre outras coisas. Que facilitam a criação em equipe quando não tem o Style guide.

O Style guide é um guia de estilo mais completo, mostrando todas as diretrizes necessárias para manter a consistência na criação de novas features por outras pessoas. Decidimos criá-lo depois de ter boa parte do protótipo confeccionada, pois assim analisamos melhor os padrões e não limitava nossa criação.

Acredito que com esse projeto, atingimos os objetivos da Paula e criamos uma experiência mais personalizada para ela. E em relação a minha experiência no projeto, posso dizer que foi ótimo trabalhar com a iany trisuzzi, pois nos complementávamos uma muito mais estratégica e pragmática, enquanto a outra mais detalhista e organizada.