Neste último mês passamos por uma grande mudança. Não só uma mudança visual/estética, mas também resolvemos um problema que vínhamos enfrentando: a organização dos cursos.
Desde o redesign passado, nossa quantidade de cursos aumentou muito, expandimos os assuntos e passamos a ensinar não só programação, mas também UX, design, edição de video, marketing digital e outros assuntos.
Com esse crescimento, precisávamos nos reorganizar, facilitar a vida dos nossos alunos e futuros alunos.
Nossa missão: um site com uma navegação simples, um visual leve, limpo, mais jovem e com o menor caminho do usuário até o ponto final. Foram algumas reuniões com o Sérgio Lopes e o Paulo Silveira para definir esses primeiros pontos: organização de conteúdo, rotulação de categorias e subcategorias, fluxo de navegação, etc.
De início, decidimos seguir com nosso próprio conhecimento, sem a consultoria de um especialista de UX, afinal os 4 anos de Alura nos fizeram conhecer bem nosso público, criar nossas personas e trabalhar em cima delas.
E vamos ao trabalho: primeiro acabar com aquela quantidade de trilhas que tínhamos (quase 20), as quais viraram 6 categorias rotuladas de Mobile, Programação,Front-end, DevOps, Design & UX e Business.
Já nas subcategorias, achamos suficiente o uso de "filtros" (usamos algo parecido com o Isotope, que mostrasse alguma interação no clique; em uma "transição seca" o resultado do clique nos filtros poderia passar despercebido pelo usuário).
Depois do conteúdo organizado e as categorias e subcategorias rotuladas, o próximo passo foram os wireframes. Durante as reuniões de planejamento, acabamos rabiscando alguns wireframes de baixa fidelidade, esses foram um bom guia para agilizar e trabalhar com alta fidelidade nos wireframes seguintes.
(Organização anterior, quase 20 trilhas)
(Nova organização, 6 categorias)
Durante a criação dos wireframes de todas as telas do fluxo, pensamos: "Vamos contratar a consultoria de um profissional de UX para ver o que ele acha do caminho que estamos seguindo?", ainda nos restava um pouco de dúvida quanto à organização dos cursos.
E assim fizemos. Entramos em contato com o Edu Agni (Mergo) e com outra empresa, acabamos por contratar a consultoria do Edu. Ele sugeriu o card sorting. Recrutamos 10 usuários de diferentes perfis e foram 2 dias de card sorting aberto, com entrevistas de aproximadamente 1 hora/usuário.
Nesse card sorting imprimimos cards com os diversos assuntos e cursos do Alura e pedimos para que cada usuário organizasse em grupo da forma que mais fizesse sentido para ele. Como o card sorting era aberto, depois da organização cada usuário rotulou os grupos que organizou, novamente, como mais lhe fizesse sentido.
(Edu Agni aplicando Card sorting em dupla com usuários recrutados)
Alguns dias depois das pesquisas com os usuários recebemos o relatório do card sorting. O resultado foi satisfatório para a gente: praticamente validou o que tínhamos feito, e assim seguimos o trabalho.
Em um post futuro pretendo falar sobre o novo design do novo Alura, um pouco de informação mais técnica, softwares, interação designer com front-ender, etc.
Enquanto isso você pode ler um ótimo post do Sérgio Lopes sobre a Arquitetura do novo site do Alura.