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, including establishing style foundations, an atomic component library, usage guidelines, and full dev handoff.
We grew the system alongside feature work, so every feature both used and extended the library. It's been used in every feature shipped, cutting rework between three designers and front-end, and replacing per-feature spec docs, so devs now pull specs directly from the library.
Role
UX & Visual 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.
Screens of BodyMap Analytics, before MAI Portal
1
Unclear B2B Visual Language
2
Inconsistent UI Patterns
3
No Scalability
A unified design system
Atomic component library, usage guidelines, and Figma UI kit, builting as a single source of truth across all portal modules.
It's been used in every feature shipped since — replacing per-feature spec docs, so devs now pull specs directly from the library. Built once as shared components, the system scaled with the portal itself: three designers and two engineers extended it feature by feature without breaking existing patterns.
01
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
02
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
03
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.
