Processo de UX no redesenho de uma rede social educacional.
Em 2017, eu estava trabalhando na Positivo TE na área de desenvolvimento de sites e suporte para escolas de todo o brasil. E durante 2 anos seguidos eu realizava as mesmas atividades, confesso que eu estava meio cansado. Então os planetas se alinharam, chegou um novo gerente no setor, com opiniões fortes, cheio de motivação e boa vontade. Percebi ali uma oportunidade de, como dizemos por aqui, fazer meu nome. Marquei uma reunião com o novo gerente, um tipo de 1:1, e pedi uma chance de liderar a frente de design em qualquer produto da empresa. E pra minha sorte, tomei a frente de uma rede social para escolas com cerca de 100.000 usuários ativos (em seu melhor momento).
Nunca tinha trabalhado em um projeto com mais de 2.000 usuários/mês. Isso me deixou muito apavorado!
Desafio
Estruturar uma pesquisa direcionada para o entendimento do problema, necessidades do usuário e identificação de oportunidades de melhoria no produto.
Comecei a levantar algumas questões do tipo:
- Como podemos motivar alunos e professores a voltarem a utilizar as ferramentas da rede social no dia a dia da escola?
- Uma mudança na estrutura da rede social poderia aumentar o engajamentos dos aluno?
- Como mediremos o sucesso dessa reformulação?
“Euquipe” de Design
Trabalhar com um time de designers com várias skills diferentes é o sonho de todo profissional, pelo menos da maioria. Neste projeto eu estava atuando sozinho na pesquisa, análise e entendimento do problema.
Se eu fiquei preocupado e com muito receio de fazer merda? — É claro!
Estava com medo, mas comecei a fazer o trabalho com medo mesmo. Vou detalhar um pouco mais todo o processo que utilizei e achei válido naquele momento.
O Processo
Iniciei essa etapa listando as ferramentas, métodos e técnicas que poderiam ser úteis para começar a aprender sobre o desafio que tínhamos pela frente. Ficou mais ou menos assim:
Ferramentas:
- Google Analytics: Para entender o percurso dos usuários dentro do produto.
- Adobe XD: Para construir e prototipar a interface.
- X Mind: Para criação do Mapa Mental e Sitemap da rede social.
- UX Canva: Para uma facilitação com PM e PO do projeto.
- Matriz CSD: Para reunir todas informações relacionadas ao projeto.
Métodos/Técnicas:
- Análise da Arquitetura da Informação
- Análise Heurística (Sim, as 10 do Nielsen) que serviu para conversar com o time de desenvolvimento.
- Percurso Cognitivo (Cognitive Walkthrough)
- Questionário
Pesquisa e análise
Comecei pela construção do questionário com questões de direcionadas ao que queria entender dos usuários selecionados, que nesse contexto foram selecionados diretores, professores e pais. Ou seja, as pessoas que pagavam pelo produto.
O questionário ficou mais ou menos assim:
- Qual perfil está de acordo com sua função no dia a dia da escola: 1- Sou Diretor; 2- Sou professor; 3- Sou responsável pelo aluno.
- Nos últimos 3 meses, com que frequência você utilizou a rede social educacional? 1- Nunca; 4-Sempre.
- Levando em consideração a frequência com que você ou seu filho utiliza a rede social, o que te motiva a continuar utilizando ou não os recursos da rede social? — Resposta aberta.
- Qual a probabilidade de você recomendar nosso produto para seus amigos ou familiares? 0-nunca e 10- Extremamente provável.
A seleção das pessoas ficou a cargo do time de sucesso do cliente, eles enviaram o link do formulário e eu fiquei monitorando as respostas. Depois de obtermos as respostas necessárias iniciamos a análise. E concluímos o seguinte:
- Diretores: Eles não estavam satisfeitos com a plataforma atual, pois não gerava o interesse nos alunos. Servia apenas para enviar comunicados para os professores.
- Professores: Utilizavam para publicar foto no feed e lembrete de atividades e avaliações.
- Responsáveis/Alunos: Muitos dos responsáveis não sabiam que poderiam acessar a plataforma para acompanhar o desempenho dos filhos.
Baseados nessa análise iniciamos uma pesquisa das plataformas mais utilizadas por jovens, tipo de estrutura e formato de conteúdo, tecnologias atuais etc.
Análise Heurística e Analise da AI
A imagem acima é era da interface no momento em que peguei para trabalhar, os usuários estavam acostumados com essa estrutura e modelo de navegação. Iniciei uma análise exploratória na rede social para aprender sobre as funcionalidades e formatos de conteúdo.
Das principais funcionalidades identificadas, listei as mais utilizadas de acordo com o PM e Google Analytics. Ficou assim:
- Criar publicação com imagem e texto, arquivos em PDF e de links externos.
- Inserir comentários em publicações e reações de curtir.
- Visualizar programação do mês no calendário.
- Criar e visualizar atividades e avaliações.
Jornada do usuário
Eu utilizei esse modelo de jornada do usuário, bem simples (Não conhecia o MIRO nesse tempo), primeiro eu preenchi sozinho mapeando o que eu tinha identificado e aprendido. Depois levei para uma sessão de refinamento com o PM e PO do projeto.
Adaptamos e refinamos a jornada de cada perfil e aproveitando a oportunidade, começamos a preencher o Canvas de UX para deixar explicito para todos qual era objetivo do projeto.
O Canvas de UX serviu para entender as expectativas do cliente em relação ao projeto e para identificar onde deveríamos focar, na visão de negócio. Claro que um objetivo do tipo: “Triplicar o número de usuários ativos” era insano. Mas deixamos assim, e depois chegamos ao valor de 15% de aumento no engajamento. Isso seria o sucesso!
Inventário de conteúdo /sitemap
Aqui eu trabalhei para analisar todo tipo de conteúdo dentro do produto. — Tinha muita coisa, muita coisa mesmo!
Depois desse mapeamento, reuni novamente com o PM para levantar a possibilidade de retirar algumas áreas e categorias de informação que não eram utilizadas nos últimos 3 anos.
Análise da plataforma
Apliquei o Percurso Cognitivo (Cognitive Walkthrough) para replicar os passos de cada Persona dentro da interface, visando identificar gargalos e fricções de usabilidade. Ao finalizar os passos dos usuários, refiz a mesma jornada nas redes sociais identificadas como referência na tentativa de trazer o produto para o que LORUSSO(2017) nomeou de “A virada retórica para a convivialidade”, onde novos produtos se adequam à mesma estrutura e modelo navegacional de empresas como Google, Facebook e Twitter, visando manter a consistência. E recentemente, Yablonsk (2020) escreveu o seguinte em seu livro intitulado Leis da Psicologia aplicada a UX:
os usuários passam a maior parte do tempo em outros sites e preferem que seu site funcione da mesma maneira que todos os outros sites que já conhecem.
Precisamos reinventar a forma como as pessoas utilizam as redes sociais?
— Claro que não!
Peguei como referência as interfaces do Facebook, LinkedIn e Twitter.
O principal objetivo era identificar um padrão estrutural nas outras redes sociais. Para isso, utilizei um plugin do Chrome que gerava esses wireframes direto no navegador. Eu não queria perder tempo aqui. Tá? Não me julgue :)
A análise heurística foi aplicada para identificar em quais pontos poderíamos melhorar a usabilidade da Rede Social. Nada muito elaborado, eu utilizei o modelo abaixo para realizar a avaliação.
Tudo que identifiquei de positivo e negativo na avaliação heurística, posteriormente, listei e apresentei para o time.
Construção da proposta
Não vou me aprofundar na descrição desta parte, porque basicamente é colocar todas as ideias no papel e levar para o XD. Ok? Iniciei a criação dos wireframes para a nova versão do produto me baseando em tudo que tinha visto e ouvido até aqui. Ficou assim:
Trouxe uma estrutura baseada em 3 colunas, buscando uma aproximação a outras plataformas do mesmo segmento. Novas áreas foram evidenciadas, como: área de perfil, meus grupos e novidades.
Busquei trabalhar a iconografia, visando uma versão mobile da rede social. Depois de definir a estrutura das páginas mais utilizadas, segui para a validação com o time de produto + desenvolvedores pra entender a complexidade do que eu tinha pensado. Ajustei várias coisas e parti para a construção do Guia de estilo e UI final da plataforma. (Inseri a parte da UI no meu Behance).
Foi uma jornada bem legal até aqui, errei e aprendi bastante neste projeto. Acredito que o objetivo do texto foi alcançado, consegui descrever tudo que fiz para entregar uma proposta de interface baseada na escuta, avaliação e análise.
Eu poderia inserir um capítulo descrevendo o terror que foi implementar a nova UI ou falar do dia em que fomos (eu e o PM) apresentar a nova cara da rede social num evento com várias escolas, e tudo deu errado. kkk
Sério, passamos maior vergonha nesse dia porque o produto quebrou. Pensei que seria demitido. Mas não fui!
E mais uma coisa, o que era trabalho de “apenas um tapinha no css”, virou um time de 16 pessoas trabalhando na reformulação dessa rede social na atualização e manutenção desse e outros 10 produtos da empresa.
Considerações finais
Esse foi o projeto mais desafiador que já trabalhei até hoje. Foi minha primeira experiência liderando o design de um produto, olhando da estratégia a implementação, do backlog a contratação de pessoas.
O melhor foi que depois de passar por tudo isso, as pessoas começaram a voltar a utilizar a rede social e o ciclo de vida do produto foi renovado e está no ar até hoje com mais de 150.000 usuários ativos.
Muito obrigado por ler esse post.
Deixe suas considerações e sugestões de melhoria aqui.
Link do produto:
https://tecnologia.educacional.com.br/project/educacional/
Referências:
Yablonski, J. (2020). Leis da psicologia aplicadas a UX. São Paulo: Novatec.
Lorusso, S. (2017). LinkedIn Society. In F. Laranjo (Ed.), Design and democracy (pp. 65–75). Eindhoven: Onomatopee.
