Bridge × MEC: Student Journey and Pé-de-Meia

Scope: Senior designer in an ecosystem of 300+ collaborators, simultaneously leading design across 4 distinct Figma files (mobile app with 14M users, web admin system, Bold DS, and DSGov style guide) + accessibility research. I worked with 3 Product Owners, 2 engineering squads, and federal government stakeholders (Ministry of Education).

Decision authority: Full autonomy over design decisions and information architecture. For changes affecting multiple squads (like the navigation flowchart), I consulted PMs before implementation. My accessibility findings were presented to the federal government's DSGov team and influenced their roadmap.

Timeline: 3 years (Jul 2022 - Jul 2025). The biggest impacts (enrollment form, financial aid, accessibility) happened in 2-4 sprint cycles with continuous validation via Firebase Analytics.

Impact outcome: +25% completion rate on financial aid enrollment for 14M students. Accessibility thesis published at a govtech conference. Bold DS became an accessibility reference in the Brazilian industry.

Bridge Lab (UFSC) connects government and citizens through technology. The flagship product is Student Journey: a Ministry of Education app used by 14 million students across Brazil.

The app serves as digital student ID, enrollment tracking, the Pé-de-Meia program hub, and Ministry services. The web admin lets Ministry staff manage credentialing, notifications, banners, content, and audits.

To understand the real operating context behind the product, I combined Hotjar sessions, Firebase data, Metabase dashboards, support tickets, and stakeholder interviews. I consolidated that material into three key personas: Janaína (project coordination and cross-team follow-up), Silmara (executive decision-maker under political urgency), and Rafael (young operational profile with high digital fluency). That framing made one thing obvious: the ecosystem could not work only for students. It also had to communicate status, risk, and next steps to the people sustaining the program behind the scenes.

The financial aid enrollment flow had concerning completion rates. Target audience: public school students on entry-level phones with spotty connections. The PM brought Firebase data: 35% abandoned mid-form.

First attempt (failed): Consolidated 6 stages into one page. Logic: fewer screens = less friction. Result: abandonment jumped 15%. Crash logs showed dropped connections caused all progress to be lost.

Second attempt (success): Modular stepper with 5 steps, each independently saveable. Auto-save on every field. Connection drops at step 3? Resume at step 3.

Measurement: Compared completion 60 days before and after (Firebase Analytics, new signups only). Completion rose from ~55% to ~75% (+20 percentage points). Scale: 2M+ students went through the flow.

The most sensitive module: personal data, photos, dependents. A 14-year-old in rural Maranhão and a 17-year-old in São Paulo must complete the same flow with equal clarity.

Mapped 12 scenarios with the product owner, from happy path to edge cases affecting hundreds of thousands:

- With/without dependents (interfaces branch within the same flow) - Missing government data (blank fields need clear visual fallback) - 4+ line names (common in Brazil) - Preferred name vs. full name hidden (minor privacy, legal requirement) - Photo swap/deletion with destructive confirmation - 6 error scenarios with recovery actions

At 14M users, what others call 'edge case' is 500,000 real people.

Federal scholarship designed to keep students in school. I led the design of the full module: enrollment, eligibility, payment status, installments, and communication.

Complexity: conditional eligibility (attendance, enrollment, profile data), multiple simultaneous enrollments, installments with different statuses, and Ministry support integration.

Decision I defended: Each eligibility state gets its own screen with specific copy and clear action. The PM wanted one generic screen with dynamic messages. I argued with support data: 40% of helpdesk calls were 'I don't understand my status.' Dedicated screens reduced ambiguity.

Beyond the in-app flow, I also designed communication assets, detailed installment states, and a responsive web surface for following the program in the browser. That kept MEC and Pé-de-Meia branding visible across touchpoints without sacrificing clarity.

Support confirmed noticeable improvement after deploy.

12+ modules for Ministry staff. I convinced the tech lead to adopt one consistent pattern: list with filters, create/edit form, color-coded status indicators, breadcrumb navigation, and pagination. Managers who learn one module already understand all.

The embedded satisfaction survey (emoji scale + free text) was my proposal for collecting in-app feedback from public-sector managers. That data fed backlog prioritization.

I also designed from scratch the web entry point for the Student Journey ecosystem: login, responsive browser experience, and Pé-de-Meia tracking surfaces outside the app. The goal was to expand access without breaking DSGov compliance, MEC branding, or the product's overall coherence. When your stakeholder is the Ministry of Education, visual consistency is institutional infrastructure, not decorative polish.

My Computer Science thesis (top grade, UFSC) was a comparative accessibility audit of two design systems. Not isolated academic work: findings directly impacted the product.

Methodology: Tested with 6 tools (Lighthouse, Axe Core, WAVE, JAWS, NVDA, VoiceOver) across 15 components from each system. Found 277 accessibility violations, from insufficient contrast to keyboard navigation bugs.

Impact: Presented to Bridge leadership. 23 critical violations prioritized for fixes. Government system findings reported to the federal government. Thesis became internal reference for accessibility decisions.

Bold is Bridge's open-source design system: 120+ components with usage guidance, interactive playground, and state documentation.

The federal government design system is mandatory for gov-tech. I created a tailored style guide because official components had inconsistencies between documentation and implementation. Covers colors, typography scales, and customized components within government rules.

Also created the complete app navigation flowchart: Login → Onboarding → Home (8 sections). With 300+ collaborators and 4 squads in parallel, this map became the most-referenced alignment artifact; PMs and devs checked it before starting any feature.