Trilhas do Futuro
Plataforma educacional do Governo de MG
- Meu papel
- UI/UX Designer · Desenvolvedor Front-end
- Ano
- 2025
Trilhas do FuturoContexto
O Trilhas do Futuro é um programa do Governo de Minas Gerais que conecta jovens do ensino médio a cursos técnicos e oportunidades reais de inserção no mercado de trabalho. A plataforma digital é o principal ponto de acesso ao programa, reunindo informações, inscrições e relacionamento entre três perfis distintos: estudantes, instituições de ensino e empresas.
Problema
A versão anterior centralizava tudo na homepage sem distinção de público. Comunicação genérica, conteúdo misturado entre perfis e jornadas confusas geravam fricção antes mesmo da primeira interação útil. O insight central: uma interface que tenta servir todos ao mesmo tempo não serve ninguém com eficiência.
Objetivo
Redesenhar a plataforma com experiências segmentadas por perfil desde o primeiro acesso, reduzindo o tempo de decisão, aumentando a conversão de inscrições e garantindo acessibilidade para o público jovem de diferentes realidades digitais.
Processo
Mapeei as jornadas dos três perfis separadamente: Estudante (saber se pode participar, conhecer os benefícios e se inscrever), Instituição de ensino (aderir ao programa e acompanhar editais) e Empresa (encontrar talentos formados pelo programa). Cada perfil tinha objetivos, barreiras e ações completamente diferentes: tratar todos com a mesma interface era o problema central.
A auditoria da homepage revelou que ela tentava entregar tudo a todos ao mesmo tempo. Resultado: nenhum usuário encontrava o que precisava sem esforço. A decisão de separar as experiências por perfil desde o primeiro clique emergiu dessa descoberta: não foi uma escolha estética, foi uma resposta direta ao comportamento observado.
Defini uma arquitetura modular com navegação segmentada: cada perfil com sua própria entrada, sua própria hierarquia de conteúdo e seu CTA específico. O sistema de design foi construído para garantir consistência entre as três jornadas sem sacrificar a personalização de cada uma.
Acessibilidade foi tratada como requisito técnico desde a prancheta, não como melhoria posterior. Alto contraste, tipografia legível (Inter em múltiplos pesos), hit areas de 44px e navegação por teclado foram validados em cada componente. O público jovem de diferentes realidades digitais não podia ser deixado para trás.
O site, dobra a dobra
As principais dobras da plataforma, da home a cada um dos três espaços, contando as decisões por trás de cada uma.
- 01 / 09
A home: uma entrada para cada perfil
"O que é o Trilhas de Futuro" em uma frase e, logo abaixo, três botões nas cores de cada público: Para estudantes (rosa), Para instituições de ensino (azul) e Para empresas (laranja). Ninguém precisa ler o que é do outro para achar o seu caminho.
- 02 / 09
Três jornadas, três cores
Cada perfil ganha sua própria dobra, com foto, chamada principal e um segundo link para o espaço completo. A cor que aparece no botão da home é a mesma que acompanha o perfil em todo o site.
- 03 / 09
Espaço do estudante
O topo rosa identifica o perfil na hora. Em seguida vem a pergunta que o estudante faz primeiro, "Quem pode participar", com os requisitos numerados e o Manual do Aluno a um clique.
- 04 / 09
Benefícios e como participar
Os benefícios (mensalidade isenta, material didático, vale-transporte e alimentação) em cards com ícones, seguidos do passo a passo da inscrição até as vagas remanescentes.
- 05 / 09
Espaço das instituições
Para as instituições, o caminho é o processo: Para começar, Em seguida e Por fim, cada etapa com as tarefas marcadas, e os links importantes (editais, resoluções) logo abaixo.
- 06 / 09
Espaço das empresas
A página laranja das empresas é mais curta e direta: o que é o programa e o acesso à vitrine de "Talentos da educação", para encontrar estudantes para contratar.
- 07 / 09
Links importantes
Editais, resoluções e cronogramas em cards iguais, com data, trilha e um botão "Acessar", mais busca e filtro por trilha. O que antes ficava espalhado agora tem um lugar só para cada perfil.
- 08 / 09
Dúvidas frequentes
Todas as perguntas numa página com busca e respostas abertas uma de cada vez, para o estudante resolver a dúvida sem precisar ligar ou mandar e-mail.
- 09 / 09
Até o erro tem saída
A página de "endereço indisponível" usa o mesmo tom do site ("Poxa…") e devolve a pessoa a uma das três jornadas, em vez de deixá-la sem caminho.
Solução
Plataforma redesenhada com segmentação por perfil na entrada, páginas dedicadas para Estudantes, Instituições de ensino e Empresas, sistema visual vibrante e jovem e implementação mobile-first com acessibilidade de ponta a ponta.
3
jornadas de usuário distintas projetadas
100%
mobile-first com acessibilidade nativa
−60%
redução estimada no tempo de decisão
Sistema Visual
A paleta de três cores primárias vibrantes foi escolhida para criar identidade visual forte sem depender de ilustrações complexas. Cada cor ancora um perfil de usuário: rosa para estudantes, azul para instituições de ensino e laranja para empresas; o amarelo é a cor do programa, nas dobras gerais.
Paleta
Rosa Estudante
#D9528A
Espaço do estudante e botões "Para estudantes"
Azul Instituição
#27B0D2
Espaço das instituições de ensino
Laranja Empresa
#E97D00
Espaço das empresas e botões de ação
Amarelo Trilhas
#FDB813
Cor do programa: home, destaques e dobras gerais
Grafite
#3C3C3A
Topo com o padrão de letras e rodapé
Branco
#FFFFFF
Fundo das páginas e dos cards
Tipografia
Inter
400 / 500 / 700
Fonte única em todo o sistema: corpo, subtítulos e títulos. Alta legibilidade em qualquer tamanho, ideal para interfaces públicas e mobile.
Aprendizado
Projetos com múltiplos públicos exigem coragem de separar, não de centralizar. A tentação é juntar tudo em um único lugar para "facilitar". O que facilita de verdade é o usuário encontrar o que é dele sem precisar filtrar o que é dos outros.
