Por trás do novo visual do Alura
![Por trás do novo visual do Alura](https://www.alura.com.br/artigos/assets/uploads/2016/03/categorias-antes.jpg)
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!](assets/alura-matricula-maior-escola-tecnologia-brasil-mais-500-mil-estudantes/matricula-escola-ux-design-alura-saiba-mais-versao-mobile.png)
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](https://www.alura.com.br/artigos/assets/uploads/2016/03/categorias-antes.jpg)
(Organização anterior, quase 20 trilhas)
![categorias-antes](https://www.alura.com.br/artigos/assets/uploads/2016/03/categorias-depois.jpg)
(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](https://www.alura.com.br/artigos/assets/uploads/2016/03/alura-cardsorting.jpg)
(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.