Trilhas do Futuro
Educational platform for the Minas Gerais State Government
- My role
- UI/UX Designer · Front-end Developer
- Year
- 2025
Trilhas do FuturoContext
Trilhas do Futuro is a Minas Gerais State Government program that connects high school students to technical courses and real opportunities to enter the job market. The digital platform is the program's main point of access, bringing together information, enrollment and the relationship between three distinct profiles: students, educational institutions and companies.
Problem
The previous version put everything on the home page with no distinction between audiences. Generic messaging, content mixed across profiles and confusing journeys created friction before the first useful interaction. The central insight: an interface that tries to serve everyone at once serves no one efficiently.
Goal
Redesign the platform with experiences segmented by profile from the first visit, reducing decision time, increasing enrollment conversion and ensuring accessibility for young people with different levels of digital access.
Process
I mapped the journeys of the three profiles separately: Student (find out if they qualify, learn the benefits and enroll), Educational institution (join the program and follow calls for applications) and Company (find talent trained by the program). Each profile had completely different goals, barriers and actions: treating them all with the same interface was the core problem.
The home page audit showed it was trying to deliver everything to everyone at once. The result: no user found what they needed without effort. The decision to separate experiences by profile from the first click came from this finding: it wasn't an aesthetic choice, it was a direct response to observed behavior.
I defined a modular architecture with segmented navigation: each profile with its own entry point, its own content hierarchy and its own CTA. The design system was built to keep the three journeys consistent without sacrificing each one's personalization.
Accessibility was treated as a technical requirement from the drawing board, not as a later improvement. High contrast, readable type (Inter in multiple weights), 44px hit areas and keyboard navigation were validated in every component. Young people with different levels of digital access couldn't be left behind.
The website, section by section
The platform's main sections, from the home page to each of the three areas, explaining the decisions behind each one.
- 01 / 09
The home page: one entry for each profile
"What Trilhas do Futuro is" in one sentence and, right below, three buttons in each audience's color: For students (pink), For educational institutions (blue) and For companies (orange). No one has to read someone else's content to find their own path.
- 02 / 09
Three journeys, three colors
Each profile gets its own section, with a photo, a main headline and a second link to the full area. The color on the home page button is the same one that follows the profile throughout the site.
- 03 / 09
Student area
The pink header identifies the profile instantly. Next comes the question students ask first, "Who can take part", with numbered requirements and the Student Handbook one click away.
- 04 / 09
Benefits and how to take part
The benefits (free tuition, learning materials, transportation and meal vouchers) in cards with icons, followed by the step-by-step enrollment through to the remaining spots.
- 05 / 09
Institutions area
For institutions, the path is the process: To get started, Next and Finally, each step with its tasks checked off, and the important links (calls for applications, resolutions) right below.
- 06 / 09
Companies area
The orange companies page is shorter and more direct: what the program is and access to the "Education talent" showcase, to find students to hire.
- 07 / 09
Important links
Calls for applications, resolutions and schedules in identical cards, with date, track and an "Access" button, plus search and a filter by track. What used to be scattered now has a single place for each profile.
- 08 / 09
FAQ
All questions on one page with search and answers that open one at a time, so students can solve their doubts without calling or emailing.
- 09 / 09
Even the error page has a way out
The "page unavailable" screen uses the same tone as the site ("Oops…") and sends the person back to one of the three journeys instead of leaving them stranded.
Solution
A redesigned platform with profile segmentation at the entry, dedicated pages for Students, Educational institutions and Companies, a vibrant, youthful visual system and a mobile-first build with end-to-end accessibility.
3
distinct user journeys designed
100%
mobile-first with built-in accessibility
−60%
estimated reduction in decision time
Visual System
The palette of three vibrant primary colors was chosen to create a strong visual identity without relying on complex illustrations. Each color anchors a user profile: pink for students, blue for educational institutions and orange for companies; yellow is the program's color, in the general sections.
Palette
Student Pink
#D9528A
Student area and "For students" buttons
Institution Blue
#27B0D2
Educational institutions area
Company Orange
#E97D00
Companies area and action buttons
Trilhas Yellow
#FDB813
Program color: home page, highlights and general sections
Graphite
#3C3C3A
Header with the letter pattern and footer
White
#FFFFFF
Page and card backgrounds
Typography
Inter
400 / 500 / 700
A single typeface across the system: body, subtitles and headings. Highly readable at any size, ideal for public and mobile interfaces.
Takeaways
Projects with multiple audiences require the courage to separate, not centralize. The temptation is to put everything in one place to "make it easier". What really makes it easier is users finding what's theirs without having to filter out what belongs to others.
