Plataforma corporativa de ensino — 302 telas, cinco perfis

Designer de produto solo de um ecossistema abrangente de capacitação corporativa (302 telas divididas em cinco portais desktop e companion mobile para quatro perfis) para a fabricante de revestimentos Miaki Revestimentos. Desenvolveu um sistema de 150 variáveis com zero aliases quebrados em modos Claro e Escuro, suportado por uma biblioteca de 162 componentes com variantes e protótipo interativo, transformando uma especificação funcional detalhada em handoff para desenvolvimento.

Desenvolvido na Spaceapps entre abril e julho de 2025 (Fase 8 Passagem para DEV concluída em 18/07/2025). A cliente, Miaki Revestimentos, demandava uma universidade corporativa (Universidade MIAKI) para treinar e certificar aplicadores licenciados, técnicos de campo, gestores comerciais e arquitetos parceiros. O tech lead da Spaceapps, Thiago, conduziu o discovery e redigiu a especificação funcional tela a tela; Juan foi o designer exclusivo a abrir e editar o arquivo Figma, desenhando todas as interfaces, arquitetura de informação, adaptação mobile, variáveis de tokens e variantes de componentes.

O maior produto do portfólio: 302 telas em cinco portais de acesso

📐302

telas totais desenhadas entre desktop (169) e mobile (133)

👥5

portais independentes por perfil (Licenciado, Funcionário, Parceiro, Gestor, Admin)

🎨150

variáveis em 6 coleções com zero aliases quebrados

🧩162

componentes na biblioteca incluindo itens de prova com 22 variantes

A Miaki Revestimentos fabrica revestimentos monolíticos de resina e pisos industriais de alta performance. Para capacitar sua rede nacional de aplicadores licenciados, representantes comerciais e arquitetos especificadores, a empresa encomendou a Universidade MIAKI. Com 302 telas (169 telas desktop organizadas em cinco seções de portal, mais 133 telas de companion mobile para quatro perfis), este é o maior e mais complexo produto estruturado em todo o meu portfólio.

Arquitetura de permissões: a ausência estrutural como decisão de design

Os cinco portais não são telas duplicadas com títulos trocados; eles são diferenciados estruturalmente por ausências intencionais e permissões específicas:

• Admin (36 telas) — Focado exclusivamente em autoria e governança. Os administradores têm 13 telas de gestão de conteúdo (Gestão de cursos 1.0–6.13) e diretório de usuários, mas não possuem telas de assistir aulas ou prestar exames.
• Parceiro / Arquitetos Especificadores (25 telas) — Escritórios parceiros consom normas técnicas e emitem certificados de especificação, mas não realizam provas nem gerenciam equipe. Recebem exclusivamente uma área de FAQ.
• Funcionário / Aplicador de Obra (29 telas) — Portal de aprendizagem direta. Não possui tela de autocadastro: aplicadores não podem se cadastrar sozinhos, pois seu Licenciado responsável realiza a matrícula.
• Licenciado / Titular da Franquia (38 telas) — Gestão completa de funcionários (gestãoFuncionários) e controle de acessos (gestãoPerfis), permitindo aos donos de revenda cadastrar e acompanhar sua equipe de obra.
• Gestor / Gestor Comercial Miaki (41 telas) — O polo exclusivo de inteligência com dashboards de KPI (dash), relatórios de adesão (Relatórios 1.1) e telas de avaliação (Avaliação 1–7) nomeadas de forma distinta das provas dos alunos (Prova final).

Companion mobile orientado por pesquisa: o técnico de campo à noite

O companion mobile de 133 telas contempla quatro perfis (Licenciado, Funcionário, Parceiro, Gestor) e exclui deliberadamente o Admin, reconhecendo a autoria de cursos como tarefa tipicamente desktop. Toda a experiência mobile foi fundamentada na pesquisa de usuários: a persona Rafael Lima (27 anos, técnico de aplicação em obras) acessa a plataforma pelo celular nos intervalos ou à noite. Para viabilizar o uso mobile, modais de desktop foram desdobrados em telas sequenciais (ex.: gestãoFuncionários expandiu de 2 telas desktop para 10 telas mobile).

Sistema de tokens e engenharia de variantes: 150 variáveis, Claro e Escuro

O design system opera em arquitetura de tokens de duas camadas em seis coleções: 113 variáveis de cor, 18 tokens semânticos, dimensões e tipografia. Os tokens semânticos resolvem perfeitamente nos primitivos com zero erros de alias. O sistema de temas incorpora ajustes ativos de contraste: Background/brand inverte entre os modos (#effefc no Claro, #07c5ba no Escuro) enquanto Stroke/brand ajusta a saturação (#07c5ba para #2fd2cc) para manter contraste visual. A biblioteca reúne 162 componentes centralizados no guia de estilos, liderada por conjuntos com muitas variantes como alternativa (22 estados de opção de prova) e _sideItem (26 estados de navegação).

Padrões de handoff e o produto que não foi construído

Empacotei a plataforma em uma prancha formal de entrega técnica (Passagem para os devs, 818 nós) contendo imagens de compartilhamento, prévias de temas e vídeos gravados de walkthrough para todos os fluxos web e mobile. O cronograma registra as Fases 1 a 8 concluídas e entregues em 18/07/2025. Contudo, a programação planejada em Bubble estagnou na Fase 9, e os canais de acompanhamento confirmam que o desenvolvimento foi reiniciado em outra ferramenta sem alcançar produção. A Universidade MIAKI permanece como a maior prova de design de sistemas complexos com múltiplos perfis que não foram ao ar por limites da engenharia no-code.

Evidência

Concluiu todas as fases de design (Fases 1 a 8) no prazo e entregou formalmente com vídeos gravados de walkthrough e padrão de handoff de 28 itens em 18/07/2025. A implementação planejada em Bubble estagnou e o projeto permanece como protótipo não lançado. Confirmado diretamente via canais de acompanhamento da equipe, onde as tentativas de desenvolvimento migraram posteriormente de ferramenta. Constitui a evidência definitiva da motivação de Juan para dominar o código full-stack.