Possibilitar mudança de vida

Anualmente, milhares de estudantes competem para entrar em uma das melhores escolas públicas e gratuitas brasileiras, o IFPR. Essa oportunidade pode mudar a vida de muitas famílias de baixa renda.

O IFPR precisava de um website para o processo seletivo que fosse eficiente, acessível e fácil de usar, ajudando os candidatos a se concentrarem no que importa: ser selecionado para um curso no próximo ano letivo.

Mockup

Etapas do Projeto

Pesquisa e Descoberta
Definição
Design Gráfico
Teste
Desenvolvimento

Antes de começar o projeto, eu precisava da aprovação do comitê responsável pelo processo de seleção. Eu fiz uma apresentação defendendo uma abordagem de design centrada no usuário e mostrei os passos que iríamos seguir para desenvolver o projeto do site.

O projeto foi aprovado, mas com um prazo apertado. Tive seis semanas para fazer o projeto inteiro e entregar o site a tempo para o início do processo de seleção.

O que eu fiz

Ux Research (pesquisa secundária e desk research)
Ux Design
- Fluxo de uso
- Geração de alternativas
- Wireframes
- Prototipagem (Adobe XD)
Desenvolvimento
- Frontend (HMTL, CSS, PHP, Jscript, JSON)

Examinando os dados

Uma vez que já tínhamos um site anterior, comecei por analisá-lo e procurar por oportunidades de melhorias. Minhas fontes de dados foram o google analytics, os contatos do suporte e os questionários econômicos e sociais que todos os candidatos responderam no ano anterior.

Também falei com pessoas do IFPR que conheciam alguém que participou no processo no ano passado para obter seu feedback.

captura de tela do site do ano anterior — Versão anterior do site

Feedback dos usuários

Os principais problemas observados nos dados do suporte e nas conversas com colegas e usuários foram:

O calendário era confuso e os usuários tinham dificuldade em encontrar datas passadas.
Algumas publicações e resultados eram muito longos e difíceis de filtrar e encontrar as informações.
Os resultados de várias fases se misturaram. Os candidatos ficaram confusos sobre onde encontrariam as informações que necessitavam em um determinado momento.
A maioria dos relatórios com os resultados das fases utilizava arquivos pdf, geralmente em tamanhos grandes.
Os resultados foram disponibilizados em um único arquivo com os dados de todos os candidatos. Os candidatos tinham que classificar seus nomes a partir de uma longa lista.

Proto Persona

Dos questionários do ano anterior e do Google Analytics, tivemos uma boa quantidade de dados quantitativos que permitiram a construção de um perfil de usuário alvo.

INFORMAÇÕES RELEVANTES

64% dos candidatos acessam o site com dispositivos móveis, a maioria dos modelos de baixo custo.
A idade varia principalmente de 15 a 25 anos de idade.
75% dos candidatos são de lares de baixa renda.
36% são negros.

Maria Eduarda tem 19 anos e mora em Palmas-PR

Definindo a base

Acrescentada uma página para o calendário com todas as datas programadas do processo. Os candidatos podem ver as datas sem outras informações no caminho.
Dividir a página de informações gerais em Avisos e Anúncios, Inscrições e Campus. As etiquetas são mais diretas, e as informações são mais fáceis de encontrar.

Fluxo de uso

Um dos problemas que os usuários relataram no uso da versão anterior era perder-se enquanto buscavam as informações de que necessitavam.

Para tratar disso, investiguei todos os fluxos de uso, examinando como tornar cada um deles mais simples e intuitivo.

Task Flow Images

ilustraçõ do fluxo de uso para a tarefa de se inscrever no processo seletivo

illustração do fluxo de uso para a tarefa de ver o resultado preliminar da inscrição no processo seletivo

ilustração do fluxo de uso para a tarefa de ver a lista provisória de inscritos

Wireframe sketchs

Eu usei o Miro para ter todas as informações reunidas em um grande quadro branco. Usando meu iPad, esbocei as ideias para cada tela do site e explorei como o fluxo de uso funcionaria.

wireframes-images

desenho em wireframe com uma ideia para a página inicial do site no formato mobile

desenho em wireframe de tela do site no formato mobile

desenho em wireframe de tela para seleção do campus

esboço em wireframe de tela com informações relativas a um único campus

esboço em wireframe com tela de resultado do campus

Reformulando a interface do usuário

Eu mudei a estrutura da interface e como ela funciona. A intenção foi abordar o problema que os usuários tiveram para encontrar informações após as primeiras etapas do processo.

ilustração da estrutura do site anterior — A versão antiga tinha três seções principais e fixas: uma hero com uma call to action, um menu do lado esquerdo e a área de conteúdo.

ilustração da nova estrutura do site. mostrando a hierarquia de importância — A nova versão manteve o hero, mas acrescentou cartões que mostram o tópico mais relevante para cada fase.

Conteúdo dos cards podem ser alterados para incluir informações novas e atualizadas — Cada cartão funciona como um widget. Ele mostra as informações mais relevantes do tópico em cada fase do processo.

ilustração com setas indicando a possibilidades de alterar a ordem de exibição dos cartões — Os cartões podem ser reordenados para enfatizar o assunto mais proeminente em um determinado momento.

ilustração mostrando o card com as datas do calendário — O card do calendário mostra a última data e pelo menos as três seguintes. Também tem um link para a página com todos os horários.

O menu passou sob um ícone de hambúrguer como navegação secundária. O usuário pode navegar no site sem precisar do menu.

Design Gráfico

Eu construí o projeto visual no Adobe XD e no Adobe Illustrator. Foi uma adaptação da identidade visual e do branding da campanha de marketing.

Guia de Estilos

Defini a paleta de cores e a tipografia com base na identidade visual. O Guia de Estilo é direto e conciso. Eu era a única pessoa que trabalhando no projeto, de modo que eu podia fazer adaptações na hora de construir o protótipo ou escrever o código.

Cartaz do Processo Seletivo tem como destaque a ilustração de um garoto com uma mochila nas costas. O garoto mostra com o dedo as informações do processo — A parte do cartaz da campanha de marketing desenvolvida pelo departamento de comunicação do IFPR

style guides images

Tipografia

Cores

Ícones

Ilustrações

Prototipagem e teste

Com base no mapa do site, fluxos de uso e wireframes, eu construí as interfaces no Adobe XD. O próximo passo foi fazer um protótipo funcional e testá-lo com os usuários.

Eu testei as principais tarefas que os candidatos teriam que realizar. Os testes mostraram que estávamos na direção certa. Eu tive apenas alguns ajustes para fazer.

Desenvolvimento

Trabalhar em todas as fases do projeto me permitiu ver como a código pode ter um forte impacto sobre a experiência de uso.

Neste caso, a usabilidade é severamente afetada pelo acesso em baixa velocidade e pela potência computacional. Portanto, o site precisa ser enxuto e leve.

Eu construí o site responsivo usando HTML, CSS, PHP, e JavaScript. Usei arquivos JSON como repositório de dados. Não usei nenhuma framework ou bibliotecas que pudessem aumentar o peso.

Um impacto negativo das versões mais antigas foi o uso de arquivos PDF. Eu implementei uma forma de apresentar as informações em HTML, filtrando os resultados para mostrar apenas os dados relevantes ao usuário.

No final, o tamanho foi reduzido de 85,1 MB para 19,3 MB em comparação com a última versão.

Objetivos do desenvolvimento

Responsividade
Mais leve possível
Eficiente

Ganhos de eficiência

No final, o tamanho total do site foi reduzido de 85,1 MB para 19,3 MB em comparação com a última versão.

gráfico mostrando a diminuição do tamanho do site em 4x em comparação com a versão anterior

Resultados

O site foi disponibilizado para o público em 15 de dezembro de 2021. Em 17 de maio de 2022, ao final do processo, havia recebido 58 mil usuários, 38% a mais do que os 42 mil da versão anterior.

O número de visitas subiu de 367 mil para 703 mil, 91,5% a mais. O tempo de engajamento cresceu de 2 minutos e 23 segundos para 3 minutos e 40 segundos, um crescimento de 54%.

results-graphics

Usuários

Visitas

Engajamento

Comportamento do usuário

O comportamento do usuário também melhorou. As visitas atingiram o seu auge no início de cada fase. Isso indica que os usuários continuaram retornando e usando o site durante o processo de seleção. Na última versão, o envolvimento do usuário caiu mais acentuadamente após a primeira fase.

É importante notar que o número de contatos com o nosso suporte caiu notadamente. Portanto, o site atingiu seu objetivo de ajudar os candidatos do processo de seleção do IFPR, sendo mais acessível, prático e fácil de usar.

Versão anterior

Gráfico do google analitics do site anterior mostra uma queda acentuada de visitantes após a primeira fase — Na versão anterior, menos usuários retornavam em cada fase

Nova versão

Gráfico mostrando um retorno mais acentuado de usuários nas fases seguintes do processo seletivo — A nova versão tem mais usuários retornando em cada fase, e eles visitam com mais frequência durante cada fase

Oportunidades de melhoria

Aperfeiçoar os filtros para mostrar apenas os campi com resultados em cada fase.
A fase de inscrição no curso apresentou a maioria dos problemas com os usuários. Mais pesquisas são necessárias, assim como um melhor fluxo de uso.
Pesquisar métodos para mostrar os resultados para ocuparem menos espaço nas tabelas (por exemplo, construir uma legenda com termos repetitivos).
Falar com os stakeholders sobre a importância de ter mais tempo para a fase de descoberta e pesquisa.

Pedro Grein