A Focus Concursos, sediada em Cascavel – PR, começou suas atividades em 2011, ofertando cursos preparatórios para concursos públicos, de forma presencial. A qualidade dos cursos ofertados e o número positivo de aprovações fez com que a empresa se expandisse e enxergasse uma oportunidade em ofertar seus cursos pela internet.
Com mais de 800 cursos ativos e um currículo de milhares aprovações, a empresa novamente se viu em expansão. Antes ofertando os cursos de maneira avulsa, enxergou, na venda de assinaturas com acesso ilimitado aos cursos, um novo modelo de negócio.
A intenção por trás disso foi usar a reputação positiva para captar novos alunos e fidelizá-los por um período maior. Para isso, foi necessário remodelar o site, antes focado na venda dos cursos, para essa nova fase.
O desafio
O novo foco da empresa estava claro: vender assinaturas com acesso ilimitado aos cursos durante o período escolhido. No entanto, por ter um público ainda interessado na compra de cursos específicos, era necessário conciliar o modelo de negócio antigo com o novo.
A proposta para o novo site então, foi dar ênfase nos planos de assinaturas, porém, sem deixar de vender os cursos de forma avulsa,
mesmo que isso não significasse vantagem financeira para os usuários.
Partindo dessa decisão, fui chamado para trabalhar como UI/UX designer nesse novo projeto. Com isso, meu papel nessa função foi:
- Repensar o fluxo de navegação do site
- Organizar as informações para apresentar o novo modelo de negócio
- Projetar a estrutura do site, definindo a posição e função de cada elemento
- Desenhar a interface de alta fidelidade
- Construir um guia de estilos, a fim de guiar os desenvolvedores da equipe durante a construção e manutenção do site
O projeto
Uma vez gerado o consenso do que seria construído, o projeto começou com uma análise da plataforma antiga, para levantar pontos positivos e negativos. Além disso, definiu-se também o processo de trabalho a ser utilizado e algumas necessidades dos usuários, com base nas informações obtidas pela empresa.
Mobile First
Uma informação muito importante que foi compartilhada no início do trabalho foi a de que a maioria dos acessos do site são via celulares. Com base nisso, foi definida a abordagem a ser usada durante o projeto.
O Mobile First foi escolhido por dar o foco inicial para a interface mobile, ou seja, para dispositivos móveis, como smartphones. Dessa maneira, a atenção do projeto fica voltada para o conteúdo e funcionalidades do site, sem distrações, dada a limitação de espaço de tais dispositivos.
Essa abordagem, como o nome já diz, se trata de começar o projeto pelos dispositivos móveis. Posteriormente, então, a interface começa a ser projetada para telas maiores, como notebooks e desktops, adaptando-se o conteúdo conforme necessário.
Navegação pelo menu principal
A organização dos menus do site foi um tema que teve bastante atenção durante o projeto. Como poderíamos organizar os menus e a navegação do site, que possui tantas categorias, de forma a facilitar a vida do usuário?
Para o menu principal, quando acessado por celular, a ideia da empresa era apostar no formato sequencial. Ele se caracteriza por exibir uma lista com as categorias primárias e que, uma vez selecionadas, essa lista é substituída pela lista de subcategorias da categoria escolhida.
No entanto, segundo um estudo do Nielsen Norman Group, empresa referência em pesquisa sobre experiência de usuário, tal estilo de menu pode causar confusão especialmente em usuários de smartphones Android.
O estudo aponta que pode haver confusão entre o botão de voltar para as categorias anteriores do menu e a função do botão de voltar nativo do smartphone, que acabava levando o usuário para outra página.
Para evitar essa confusão, optamos então por utilizar o menu principal no estilo acordeon. Dessa forma, as subcategorias são reveladas logo abaixo da categoria superior, quando esta for selecionada.
Você pode conferir o estudo completo neste link.
Menu desktop
Ao ser acessado por dispositivos com telas maiores, como notebooks e computadores desktops, optamos por utilizar um estilo de menu semelhante. As subcategorias ficam ocultas em um primeiro momento, sendo exibidas quando a categoria superior estiver com o ponteiro do mouse apontado para ela.
Navegação por carreiras
Para melhorar ainda mais o fluxo de navegação do site, foi aproveitado a categorização dos cursos que a empresa oferece.
As categorias principais são as carreiras, áreas de atuação que os alunos gostariam de entrar. Cada carreira, por sua vez, possui subcategorias, geralmente representadas pelos diferentes órgãos públicos de cada segmento.
No último nível estão os cursos, que listados nas páginas das subcategorias. Para aumentar o controle da listagem de cursos pelo usuário, foi adicionado também a opção de filtros, como estado onde é ofertado o concurso e o status do edital, entre outros.
Consistência
Um dos principais objetivos também do projeto, além de apresentar o novo modelo de negócio, foi criar um design consistente e escalável, que desse uma identidade para a empresa.
Assim, toda a interface foi desenhada seguindo um guia de estilos criado durante o projeto. A criação desse guia de estilos teve como objetivo definir o estilo dos elementos do site e possibilitar uma expansão futura sem maiores problemas para a equipe de desenvolvimento.
Conversão
Para conciliar a venda de assinaturas com a venda de cursos avulsos, optou-se por exibir call-to-actions (chamadas para ação) com pesos diferentes. Por ser o foco principal da empresa, o CTA para escolher um plano de assinatura ganhou maior destaque.
Resultado final
Com todos os wireframes prontos e a estrutura definida, foi a hora de entrar como design de alta fidelidade. Confira um pouco do resultado:
Você pode conferir mais detalhes da interface visualizando o projeto no Behance.
Tem interesse em um projeto semelhante? Entre em contato comigo e vamos conversar a respeito!