MAI Portal
Redesigning BodyMap Analytics and building scalable design systems for MAI’s internal platform
Roles
UX/UI Designer I was responsible for flow iterations, standardizing components, scalability through design systems, UI design, prototyping, and communication with the Frontend Developer
Duration
Company
Team
Tools
Overview
At MAI, I led the design for BodyMap, a VR anatomy platform helping students connect textbook knowledge to real-life anatomy. I designed a feature that integrates radiographic images with interactive 3D human models for intuitive spatial understanding. The feature successfully launched in early 2023.
Background & Problem
Outdated structure, inconsistent designs, and inefficient workflows hindered usability and scalability
BodyMap Analytics is a web portal that helps administrators and instructors track student learning progress, enhance curriculum design, and prepare exams. As our team expanded the platform to include VR classroom management and personalized subscriber tools, we were tasked with optimizing the user experience and improving overall usability.
However, as the platform grew, several key challenges emerged:
Solution
Create an integrated design system comprising configurable and consistent components, including a UI library and Figma UI kit.
Outcome
Currently, the MAI Portal is available exclusively to internal personnel, resellers, and authorized users.
The redesign led to key improvements:
Stakeholder Interviews
Through meetings with Product Manager and Business Development Manager, we identified key business needs and clarified user roles, functional flows, and essential MVP features. This informed the revamped architecture and page structures for each function.
Key challenges:
Complex user types and user flows
No existing design files to reference or build on
Decision-Making
To address these challenges, we approached the redesign through a structured, iterative process.
Identifying User Types and Information Architecture
We began by mapping out key functionalities for each user type. I designed a modular sidebar that grouped tasks by role, improving clarity and consistency in navigation.
Organizing Complex User Flows
The initial wireframes were overwhelming due to the platform’s information density. I streamlined them by breaking down interactions into smaller, sequential steps.
To improve cross-team communication, I also established a systematic page numbering and file-naming convention.
Creating Consistent Components
Starting from atom-level elements, I built a comprehensive UI kit to ensure consistency, responsiveness, and efficiency.
I identified key components that would be used across the platform. Applying Atomic Design principles (Atoms, Molecules, Organisms, Templates, Pages) enabled scalable and seamless integration of components across the platform.
Integrating Components
As the system grew, maintaining consistency became crucial. In collaboration with the design supervisor, we categorized components into:
This structure ensured global updates were automatically reflected throughout the system.
Reflections
This project strengthened my systematic thinking and deepened my understanding of design systems. A is a collection of documented elements that covers UI kit, style guides, UX principles, and the best practices. I learned how to create components more thoughtfully and maintain them with continuity and purpose.
Through this experience, I discovered my passion for design systems. Seeing their impact firsthand inspired me to keep learning from my mentor and the design community about how to better communicate, document, and ensure accessibility within these systems.