Dashboard
Clear overview of active classes and lessons.
Context
Medroom’s LMS had become unstable, outdated, and visually inconsistent. Educators struggled to create VR lessons because the platform lacked structure, crashed frequently, and didn’t support key content types. As more than 20 partner institutions expanded remote learning, Medroom needed a complete rebuild of the LMS to support scalable, immersive, VR-first education.
Challenge
The old platform didn’t support educators' real workflows. Content creation was confusing, non-linear, and error-prone. VR content required combining 3D models with media and quizzes, but the legacy architecture offered no clear way to structure lessons. Technical constraints were severe: the LMS had a fragmented Angular front-end and a legacy backend that couldn’t support modern interactions.
My role
I co-led UX and UI design, conducted user research, and designed the full information architecture. Due to limited engineering resources, I also took over front-end development, rebuilding the platform in Next.js with a scalable component system documented in Storybook. My work focused on simplifying complex VR workflows, shaping the core logic of the Content Builder, and delivering a unified design system.
Solution
We rebuilt the LMS from the ground up, introducing a clear hierarchy for classes, lessons, and VR scenes. The new Content Builder enabled educators to combine 3D models, images, videos, audio, and quizzes in a guided, multi-step flow inspired by familiar creation tools. The platform introduced visual previews, structured navigation, and VR scene logic, making immersive lesson creation predictable and intuitive for non-technical users.
Results
+ Modern & Stable Platform
A complete rebuild eliminated crashes and improved reliability.
+ Simplified Content Creation
Clear steps and previews increased educator confidence.
+ VR Scene Logic Made Intuitive
A spatial content model aligned with immersive learning needs.
+ Scalable Design System
Storybook components supported future Medroom products.
Process overview
1. Understand the workflow
Remote interviews & surveys mapped lesson creation and VR-specific needs.
Tools: Figma, Teams
2. Requirements & opportunities
Benchmarking + audits revealed gaps in structure, stability, and media management.
Tools: Figma
3. Prototype & validate
Wireframes + mid-fidelity prototypes clarified steps and scene logic.
Tools: Figma
4. UI design & systemization
Components, tokens, templates and rules unified the platform visually and functionally.
Tools: Figma
5. Refinement & handoff
Front-end built in Next.js + documentation in Storybook.
Tools: Storybook
Discovery
Interviews with professors revealed they weren’t struggling with VR models – they were struggling with everything around them. The LMS lacked a clear starting point, mixed media had no structure, and lesson planning happened outside the platform. The turning point was discovering that educators wanted more than 3D models: they needed a tool that combined videos, images, quizzes, audio, and interactions in one guided flow. These insights shaped the architecture of the Content Builder and the overall lesson model.
Friction Points & Insights
- VR content was hard to structure without scene logic
- LMS crashed or lost content frequently
- Educators planned lessons outside the platform
- Media had no clear hierarchy or organization
- UI patterns were unfamiliar and caused confusion
Deliverables
Class & Lesson Management
Predictable structure for creating and editing learning content.
Content Builder
The core experience: a guided, multi-step interface for creating VR scenes, quizzes, media compositions, and 3D model interactions.
Design System
I created a complete UI library with tokens (spacing, typography, color), components, SVG icons, and templates. Components were documented in Storybook with behavior, states, and usage rules. This system became the foundation for scalable development across all Medroom products.
Impact
Business impact
- A modern, stable platform strengthened Medroom’s position in immersive medical educationStronger positioning in immersive medical education
- Scalable architecture ready for expansion across partner institutions
- VR-first workflows enabled differentiated, high-value educational experiences
User impact
- Intuitive flows reduced friction in lesson planning
- Visual previews increased confidence when authoring VR content
- Familiar UI patterns lowered the learning curve for non-technical educators
Team impact
- Storybook accelerated front-end development and reduced inconsistencies
- Reusable components minimized rework across product updates
- Clear logic and templates aligned UX, engineering, and PMs
Key learnings
- VR-first design requires nonlinear, scene-based thinking
- Educators adopt faster when tools feel familiar, not technical
- Owning both design and code creates deep cross-functional alignment
- Early validation prevents costly redesigns and clarifies complex workflows