Corporate Learning Platform — 302 Screens, Five Roles

Sole product designer on a massive corporate learning ecosystem (302 screens across five desktop portals and a four-role mobile companion) for architectural coatings manufacturer Miaki Revestimentos. Built an aliased 150-variable token system with zero broken aliases across Light and Dark modes, backed by a 162-component variant library and interactive prototype, translating a rigorous functional specification into production handoff.

Delivered at Spaceapps between April and July 2025 (Fase 8 Passagem para DEV completed on 18/07/2025). The client, Miaki Revestimentos, required a branded corporate university (Universidade MIAKI) to educate and certify licensed applicators, field technicians, sales managers, and partner architects. Spaceapps tech lead Thiago ran discovery and authored the screen-by-screen functional requirements specification; Juan was the sole designer who touched the Figma file, authoring all UI layouts, information architecture, mobile companion adaptation, token variables, and component variants.

The portfolio's largest product: 302 screens across five role portals

📐302

total screens designed across desktop (169) and mobile (133)

👥5

permission-scoped role portals (Licenciado, Funcionário, Parceiro, Gestor, Admin)

🎨150

design variables across 6 collections with zero broken aliases

🧩162

component library nodes including 22-variant exam components

Miaki Revestimentos manufactures high-performance resin floor coverings and architectural coatings. To train its nationwide network of certified applicators, sales representatives, and independent architectural specifiers, the company commissioned Universidade MIAKI. At 302 screens (169 desktop screens organized into five sectioned portals, plus a 133-screen mobile companion across four roles), this represents the largest and structurally most complex product in my portfolio.

Differentiated permission architecture: structural absence as design

The five role portals are not duplicated layouts with renamed headers; they are structurally differentiated by purposeful absences and role-scoped permissions:

• Admin (36 screens) — Dedicated solely to authoring and governance. Admins get 13 course management screens (Gestão de cursos 1.0–6.13) and user directories, but have zero course-taking, video player, or exam screens.
• Parceiro / Partner Architects (25 screens) — External architecture firms consume technical application guides and earn specification certificates, but are never subjected to exams and manage no staff. They alone receive a dedicated FAQ.
• Funcionário / Field Applicator (29 screens) — Baseline learning portal. Crucially, this role has no self-registration flow: applicators cannot register themselves because their sponsoring licensee must enroll them.
• Licenciado / Dealer Owner (38 screens) — Full employee management (gestãoFuncionários) and user provisioning (gestãoPerfis) enabling licensed dealer owners to register and manage their application crews.
• Gestor / Regional Commercial Manager (41 screens) — The exclusive analytics hub with KPI dashboards (dash), performance reporting (Relatórios 1.1), and evaluation reviews (Avaliação 1–7) labeled distinctively from student exams (Prova final).

Research-driven mobile companion: the field technician at night

The 133-screen mobile companion covers four roles (Licenciado, Funcionário, Parceiro, Gestor) and purposefully excludes Admin, recognizing course authoring as an inherently desktop task. The entire mobile experience was justified by user research: persona Rafael Lima (27, field technical support on construction sites) accesses training modules on his phone during work breaks or late at night. To facilitate mobile usability, desktop modals were unpacked into sequential full mobile screens (e.g., gestãoFuncionários expanded from 2 desktop views into 10 mobile steps).

Token system and variant engineering: 150 variables, Light and Dark

The design system operates on an aliased two-tier token architecture across six collections: 113 Color variables, 18 Semantic tokens, Dimensions, and Typography. Semantic tokens resolve cleanly into primitive ramps with zero broken aliases. Theming incorporates active contrast logic: Background/brand inverts across modes (#effefc in Light, #07c5ba in Dark) while Stroke/brand shifts down the ramp (#07c5ba to #2fd2cc) to preserve boundary contrast. The component library houses 162 centralized components on the style guide page, dominated by deep domain variant sets like alternativa (22 exam answer states) and _sideItem (26 navigation states).

Handoff standards and the unbuilt reality

I packaged the platform into a formal developer handoff page (Passagem para os devs, 818 nodes) featuring social sharing assets, theme previews, and recorded walkthrough videos for all web and mobile flows. The project plan records Phases 1–8 completed and handed off on 2025-07-18. However, the agency's planned Bubble implementation stalled in Phase 9, and active communication channels confirm the build was later restarted on different tooling without reaching production. Universidade MIAKI stands as the ultimate demonstration of multi-role enterprise design systems that remained unlaunched due to no-code execution limits.

Evidence

Completed all design milestones (Phases 1–8) on schedule and formally handed off with narrated walkthrough videos and a 28-point handoff standard on 2025-07-18. Target Bubble implementation stalled during development and the project remains an unreleased prototype. Confirmed independently through active client communication channels where build efforts later shifted. Serves as the quintessential evidence for why Juan transitioned into full-stack engineering.