Por trás do novo visual do Alura

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, Infraestrutura, 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.


  • Anderson

    Show de bola!!!

  • Sidney

    Excelente post, me tornei aluno nessa transição de repaginação do Alura.
    Gostaria de saber por que não existe mais fórum específicos de cada aula.
    Ajudava bastante em algumas duvidas, agora fiquei meio perdido onde posta-las.
    O Feedback era ótimo lá, pois instrutores e aluno respondiam. Sem contar que
    muitas das vezes minha duvida “já estava lá”.

    Obrigado por sempre estarem fazendo o Alura melhor.
    Foi meu melhor investimento até hoje.

    • Valeu Sidney!

      O forum de cada curso continua existindo 🙂 depois de iniciar o curso, é liberado no painel principal do curso o botão “Fórum do Curso” (que já te direciona para o fórum específico); ou na página principal do forum, vai filtrando com os dropdowns Categoria > Subcategoria > Curso.

      Agradecemos e ficamos felizes com seu feedback.

      • Sidney

        Que falta de atenção a minha, estava acostumado com o fórum “dentro” da seção do curso, logo abaixo.

        Obrigado de verdade!

Próximo ArtigoUtilizando funções de agregação com GROUP BY no SQL