Por trás do novo visual do Alura

Por trás do novo visual do Alura
thiago-vilaca
thiago-vilaca

Compartilhe

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.

Banner da Escola de UX e Design: Matricula-se na escola de UX e Design. Junte-se a uma comunidade de mais de 500 mil estudantes. Na Alura você tem acesso a todos os cursos em uma única assinatura; tem novos lançamentos a cada semana; desafios práticos. Clique e saiba mais!

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.

categorias-antes

(Organização anterior, quase 20 trilhas)

categorias-antes

(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.

alura-cardsorting

(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.

Veja outros artigos sobre UX & Design