Ecossistema Educacional
Escolas do Futuro de Goiás e Colégios Tecnologicos de Goiás (EFG e COTEC)
O projeto se consiste na criação de 2 websites responsivos integrados ao Sistema de Gestão de Cursos (SGC) que tem como principal objetivo o fornecimento de cursos tecnológicos gratuitos para a população mais vulnerável de Goiás e dessa forma promover a traformação social por meio da educação, emprego e renda.
1. Visão Geral
Fui responsável por todas as etapas pesquisa e a definição visual do produto com o primeiro guia de estilo e layouts para EFG, que devido a grande similaridade, também serviu de base para o COTEC. Após isso fui promovido a Design Lead e quem assumiu o projeto foram meus designers liderados Regina Helena e Bruno Henrique. Após isso passei a orienta-los, acompanhar no dia a dia os avanços e auxiliar na tomada de decisões estratégicas internas e com demais stakeholders.
Meu Papel
Problema
Objetivos
Resultados
Baixa conversão de inscritos em matriculados.
Alta taxa de abandono do formulário de inscrição.
Alta taxa de erros no preenchimento.
Navegação engessada e pouco intuitiva.
Sobrecarga de equipe das escolas para contornar falhas sistémicas.
Visual desafado não condizente com a identidade visual e propósito das marcas.
Aprimorar arquitetura da informação dos websites.
Trabalhar em conjunto com o departamento de comunicação e pedagógico para definição das melhores estratégias.
Facilitar e encurtar o processo de inscrição para captação de leads, redução do abandono e erros.
Fonecer uma experiência mobile de excelência.
Atualizar o visual dos sites trabalhando melhor as identidades visuais e torna-los adequados ao padrão atual.
Redução de 33% na quantidade de cliques necessários para acessar as principais páginas de editais e cursos.
Formulário de inscrição reduziu suas etapas em 50% indo de 12 para 6.
Utilizando-se de boas práticas de UX, o formulário consegue prevenir erros e manter o usuário ciente de seus passos em cada etapa conforme verificado em testes de usabilidade com estudantes reais.
Os websites passaram a ter um visual atrativo e com identidade forte, se tornando competitivo a similares da iniciativa privada.
2. Processo
2.1. Pesquisas e Análises
2.2. Criação
2.3. Fechamento
Mapa de Navegação e Conteúdo Atual
O pontapé inicial do projeto foi compreender o website e a marca como um todo. Foi construído um mapa com todas as páginas e seus respectivos conteúdos que existiam na versão atual do site. Possibilitando assim uma visão mais hoolistica do projeto que se encaminharia pela frente.
"Foram cogitadas uma análise heurística e de acessibilidade porém o desempenho ruim do site era bastante evidente e como era uma dor latende nos usuários optei por focar em estudos que pudessem nos trazer perspectivas novas. Outro ponto relevante é que o projeto carecia bastante de dados estatísticos, o analytics que possuia não fora devidamente configurado e era muito pobre para inferir qualquer visão diferente."
Notas do designer
2.1. Pesquisas e Análises
Foi elaborado um questionário com perguntas gerais sobre a marca das Escolas do Futuro para o principal stakeholder do projeto, que na iniciativa privada se equivaleria ao cliente, a SECTI (Secretaria da Ciência, Tecnologia, Inovação e Educação Profissional). Com base nas respostas obtidas foi possível obter uma visão ampla do stakeholder quanto ao posicionamento da marca e a visão para o website da instituição de ensino. Ao fim, foi convertido em um relatório com uma síntese geral das respostas obtidas e encaminhado para fim de validação com a SECTI.
Briefing
Benchmarking
Tomando como base as respostas obtidas pelo briefing em que continha uma pergunta específica sobre similares, foi iniciado um benchmarking. Foram analisados um total de 10 websites no nicho de educação voltada pra tecnologias, artes e ensino online. Para a análise foram estabelecidos alguns critérios como: Visual Design, UX Design, UI Design, Acessibilidade, Arquitetura da Informação, Suporte. Todo o estudo pode ser conferido ao fim da seção.
Personas
Com avanços maiores nas etapas anteriores, foi possível começar a elaboração de personas do projeto. Essa foi a etapa mais desafiadora da pesquisa pois foi percebido que era um ponto pouco claro para os stakeholders que muitas vezes não chegavam a acordos entre si. Entre algumas refações e ajustes chegamos a conclusão com 5 personas de perfis diversas que são o público alvo das Escolas do Futuro de Goiás.
Me baseando nos objetivos e contextos de cada persona, mapeei uma rota para 3 das 5 elaboradas. Sendo 2 rotas com final infeliz por falhas de experiência do sistema e uma bem sucedida devido ao alto engajamento e disponibilidade daquele perfil de usuário. Esse estudo inclusive deixou latente a necessidade de um plano de comunicação mais consistente para captação de leads e gerou uma movimentação dentro do deparatamento de comunicação.
Jornada do Usuário
Mapa de Navegação e Conteúdo Novo
Como entrega final dessa etapa macro de análise e pesquisa, dei início ao mapa do site do que seria uma experiência do usuário ideal, tomando como base todos os pontos de dor e oportunidades de melhoria em cada uma das etapas. O resultado obtido foi um aumento de 4x no número de telas mas que posteriormente em validação interna foi revisto com o departamento de comunicação pois não haveria recursos suficientes para alimentar e produzir conteúdo dentro do tempo previsto.
Apresentação final para SECTI (Secretaria de Estado de Ciência, Tecnologia e Inovação)
Como um rito de fechamento da etapa de pesquisa, eu e demais pares do departamento de comunicação e de projetos seguimos para uma apresentação para a SECTI com fim de obter a validação final do que estávamos propondo de arquitetura da informação para o novo website das EFGs. A apresentação que fiz pode ser conferida abaixo.
2.2. Criação
Wireframes
Com o objetivo de ter uma breve visão em tela da arquitetura da informação. Foram feitos alguns wireframes para ter uma ideia geral principalmente da home, sendo esse material validado apenas internamente.
Layout e Protótipos
Partindo dos wireframes, dei início ao layout da homepage que tende ser o coração de um projeto pois é nesse primeiro layout que as principais decisões visuais de estilos são tomadas. Tendo a primeira tela elaborada, ela foi validada internamente sem ressalvas e então parti para as demais. Estruturei a entrega dessas telas em partes para que facilitem o processo de aprovações e o torne mais dinâmico e colaborativo. Ao todo foram 5 partes, cada uma levando em torno de 15 dias.
Design System e Guia de Estilo
Em conjunto com o desenvolvimento dos layouts, fui elaborando o Guia de Estilo do site e também o Design System que posteriormente também seria utilizado no Sistema de Gestão de Cursos para as EFGs.
Protótipos Finais
2.3. Fechamento
Handoff
Tendo a aprovação interna e externa (SECTI) o projeto foi encaminhado para a equipe de desenvolvimento via figma.
Suporte ao desenvolvimento
Após o handoff a equipe de design passou a a acompanhar e dar suporte aos desenvolvedores na construção do website tirando dúvidas, fazendo design review e auxiliando em possíveis integrações.
Analytics
Após o fechamento, o time de design se encarregou de auxiliar diretamente o time de comunicação na construção de um analytics eficiente com dados que possibilitarão um acompanhamento e muitos insights futuros.