Dermatology Learning Platform — Five Roles, 586 Frames

Sole designer of an advanced medical learning management system (586 desktop frames) for clinical dermatology education. Architected five distinct role portals (Admin, Moderador, Professor, Aluno, Aluno Free) and engineered the portfolio's deepest variable token system (Main/Primary 25–800 with #982cff primary, Support/Neutral, Gradient/Purple) bound directly inside custom domain components, complemented by a 127-screen linear presentation deck (Slides Admin) built to resolve stakeholder review navigation.

Agency engagement at Sagitta between December 2024 and January 2025 as the latest-running project in the agency set. Built for a specialized medical education provider training physicians in dermatology. While the foundational primitive kit was adapted from Sagitta's shared base (node-identical to KAT/Safra), the entire domain layer on Design Desktop (exam engine, question bank, spaced-repetition flashcards, clinical case forum, audit logs) was authored from scratch with Portuguese-named components and bound variables. Desktop-only scope; mobile development had not started prior to Juan's departure.

Medical education architecture: five permissioned role surfaces

📐586

desktop frames designed across five distinct role surfaces

👥5

permissioned roles (Admin, Moderador, Professor, Aluno, Aluno Free)

📊127

screens manually re-sequenced in Slides Admin for linear reviews

📝39

in-canvas developer sticky notes detailing interaction rules

Dermatology postgraduate education requires far more than passive video streaming. Medical practitioners require rigorous assessment environments, question banks with clinical rationales, spaced-repetition retention tools, and discussion boards for de-identified clinical cases. I architected Mente Dermatológica across five distinct role surfaces — each backed by its own dedicated navigation component set (sideBar, navbar, dropdown for Aluno, AlunoFree, Professor, Moderador, and Admin) — creating strict structural differentiation between content consumption, clinical moderation, and course authoring.

Domain depth: clinical exam engine, question bank, and medical case forum

The desktop environment contains six deeply engineered clinical subsystems:

• Full-Featured Exam Engine — Multiple exam formats iterated across versions (Prova 1.0.1 through 2.2) with configurable test settings (Formato de prova, Configurações da prova), randomized question pools, detailed exam scorecards (Relatório da prova), and expandable explanation cards (accordionExplicação) presenting clinical rationale.
• MenteBank Question Bank — A specialized question bank with full administrative CRUD (Novo MenteBank, Nova Questão, editarQuestão), filtering, and meticulously designed empty states (detalhesEmptyState).
• Spaced-Repetition Flashcards — A study subsystem modeling card difficulty tiers (dificuldade, _dificuldadeBase, Flashcards 1.2/1.3) and administrative card creation (AdicionarFlashcard) for memorizing dermatological pathologies and pharmacological dosages.
• Clinical Case Forum (Fórum Casos Clínicos) — A peer-to-peer clinical discussion forum (Fórum/casoView, PostarCaso, cardForum, imagemForum) built specifically for doctors to debate diagnoses and clinical photographic evidence.
• Formal Onboarding and Contract Acceptance — Complete student contract flow (primeiroAcesso → liberarAcesso 1.1/1.2 → liberarAcesso/Contrato → Contrato), fulfilling legal compliance requirements highlighted in client briefings.
• Compliance-Grade Administrative Audit Logs — Comprehensive audit screens (Auditoria) tracking student examination logs and faculty grading modifications, complemented by an extensive 40-frame destructive/success confirmation popup matrix.

Design token architecture: variable bindings inside bespoke components

Mente Dermatológica provides the most rigorous token evidence in this portfolio. Rather than maintaining an unbound variable collection, tokens are directly connected to custom domain components: Button, cardCurso, flashcard, and cardQuestão all bind to native Figma variables. The color architecture defines Juan-authored token families including Main/Primary/25→800 (with active brand primary Main/Primary/600 - P at #982cff), Main/Terciary/400 (#4ec5ff), Support/Neutral/50–500, and Gradient/Purple, layered transparently over inherited gray and alert primitives.

Stakeholder empathy: the 127-screen Slides Admin deck

During initial client walkthroughs, the stakeholder repeatedly got disoriented trying to navigate the deep administrative back office through interactive prototype hotspots. Recognizing the stakeholder's cognitive friction, I extracted and restructured the entire admin surface into a dedicated 127-frame presentation page named Slides Admin. By organizing every screen into a strict linear narrative sequence, the client could review every administrative screen simply by pressing the keyboard arrow keys. Feedback immediately became targeted, positive, and productive. Mirroring the 119 unrolled screens in Pro Personal, this highlights a consistent habit of diagnosing friction and reshaping deliverables around user needs.

A proven benchmark in specialized e-learning

Mente Dermatológica, paired with Jobs/Academy.bet, cements specialized education as a proven domain expertise. While Academy.bet proved co-design agility at scale across web and mobile, Mente Dermatológica demonstrates autonomous end-to-end design ownership in a highly regulated clinical vertical. Backed by formal video approvals and 39 technical developer annotations, it stands as a model of structured design systems and domain complexity.

Evidence

Formally approved by the client through structured Loom video walkthroughs and two follow-up alignment calls in January 2025. Handed off to engineering prior to Juan's departure from Sagitta; public deployment status remains unconfirmed. Re-authoring 127 admin screens into Slides Admin eliminated stakeholder review confusion, demonstrating an adaptable, solution-oriented approach to client communication.