MAI Portal Design System
Building MAI Portal’s 0→1 Design System
Design System
Website Design
Role
UX/UI Designer I was responsible for flow iterations, standardizing components, scalability through design systems, UI design, prototyping, and communication with the Frontend Developer
Timeline
Team
Tools
Overview
MAI Portal helps educators and administrators track student learning progress, support curriculum planning, prepare exams, and manage VR classroom experiences. As the platform expanded to include subscriber tools and role-based workflows, the product needed a stronger design foundation to scale.
I helped establish the Portal’s 0→1 design system by standardizing components, iterating UX flows, managing the Figma library, and supporting developer handoff. This allowed the team to ship new features more efficiently without rebuilding screens from scratch.
The MVP successfully launched in early 2023.
🔗mai.ai/bodymap-tutorials (Sections 12.1–12.4)
odyMap Analytics was evolving from a single admin tool into a broader platform for VR classroom management, subscriber tools, and role-based workflows. Some features already existed before a shared design system was established, while others were being designed in parallel with the system.
Because the UI foundation was still undefined, each module introduced new layout decisions, component variations, and interaction patterns.
This created three core challenges:
Challenge #1: Unclear B2B Visual Language
The Portal needed to feel more structured, professional, and trustworthy than MAI’s immersive VR products.
Challenge #2: Inconsistent UI Patterns
Components and interaction patterns were not standardized, causing duplicated work and fragmented experiences.
Challenge #3: Limited Scalability
Without reusable components, layout patterns, and a clear Figma library, new modules were harder to design, hand off, and scale.
Building the system step by step
I was responsible for the end-to-end creation of the MAI Portal design system: from brand direction through component architecture, file governance, and engineer handoff.
Brand style for a B2B product
MAI serves both B2B and B2C audiences, so the Portal needed a visual language distinct from its consumer-facing VR products. We defined a professional, functional, and system-oriented direction, using cyan as the primary color to differentiate it from the warmer consumer palette and anchor the design system.
Defined a distinct B2B visual direction for the Portal
Defined a distinct B2B visual direction for the Portal
Map IA and user flows by role
Mapped the IA across user roles and identified what each type needed to access. When early wireframes felt too dense, I restructured the flows into clearer sequential steps and designed a modular sidebar that surfaced only role-relevant tasks, reducing complexity and improving navigation consistency.
Mapped role-based navigation and restructured dense flows into clearer, task-specific experiences
Build from atoms to a scalable UI kit
Starting from atom-level elements, I built a comprehensive UI kit to ensure consistency, responsiveness, and efficiency across the platform. Using Atomic Design principles, I structured reusable components from atoms to pages, creating a system that scaled smoothly across features.
Global vs. scoped structure for a scalable design system
To keep the system scalable, I introduced a two-layer file structure: shared style variants lived in the MAI Portal UI Kit, while feature-specific content variants lived inside their respective product files. This allowed global updates to stay consistent across the platform while keeping local changes flexible and contained. For example, a snackbar component could be reused from the UI Kit and populated with different contextual messages in User Management without duplicating the base component.
Built a scalable UI kit in Figma and organized components into shared style variants and feature-specific content variants
Reflections
Building MAI’s design system from zero strengthened my systematic thinking and taught me that a design system is more than a UI kit. It is a shared foundation of components, guidelines, principles, and practices that helps teams design with consistency and intention.
This experience also deepened my interest in design systems. Like designing physical modules, I found satisfaction in creating reusable parts that work together as a whole, and it pushed me to keep learning how to better document, communicate, and design for accessibility.
One key limitation was that we did not build a full design token structure. A proper primitive-to-semantic-to-component token layer would be the clearest next step, making global updates and theming much easier.