MAI Portal Design System
Shipped
B2B Portal
EdTech
Scaling B2B Medical Education: Building the MAI Portal Design System from 0→1
I built MAI's first unified design system for a B2B medical education portal. By establishing style foundations, an atomic component library, usage guidelines, and full dev handoff, we reduced feature delivery time by 28%.
Role
UX & Visual System Designer
Team
3 Designers, 1 Frontend Developer, 1 Full-Stack Developer
Duration
3 months (Dec 2022 - Mar 2023)
Scope
Design System
Features shipped before any shared standards existed
As MAI Portal evolved from a single admin tool into a broader enterprise ecosystem—adding VR classroom management, subscriber licensing tools, and role-based workflows—features were shipped in parallel without shared visual standards.
Unclear B2B Visual Language
Inconsistent UI Patterns
No Scalability
A unified design system
A unified design system, including atomic component library, usage guidelines, and Figma UI kit, built as a single source of truth across all portal modules.
Defined the Portal’s color direction from MAI’s brand palette
MAI's consumer VR palette skewed warm. For the B2B portal — used by admins, distributors, and institutions — we needed something more structured. Cyan became the primary anchor.
Defined the Portal’s core color direction from MAI’s brand palette
Role-based navigation show only what each user needs
The portal serves four distinct role groups, each with different access levels across organizational and personal plans. Early flows surfaced everything to everyone. We mapped each role's core tasks and built a modular sidebar that scopes navigation to exactly what each user needs.
Mapped role-based navigation and restructured dense flows into clearer, task-specific experiences
Global vs. scoped structure for a scalable design system
Split into two layers: shared style variants in the MAI Portal UI Kit, and feature-specific content variants inside each product file.
Built a scalable UI kit in Figma and organized components into shared style variants and feature-specific content variants
Portal in production
Designing a system inside a startup
Building from zero taught me how to make fast, durable decisions under real constraints.
No token layer, intentional for MVP
With 3 months split between shipping features and the system, a full primitive-to-semantic token structure wasn't feasible. The handoff we shipped was enough for MVP.
