Medroom Platform

Project Background

Medroom is a pioneering virtual reality company focused on medical education. Their flagship product, a comprehensive “human body library,” offers meticulously detailed 3D models (both male and female) that encompass all fundamental structures of human anatomy. These models are vital for enhancing health-related educational courses.

Medroom's platform functions as a Learning Management System (LMS), enabling educators to craft and deliver immersive learning content via virtual reality or mobile applications. This content can incorporate 3D models alongside images, videos, text, audio, and quizzes. Additionally, the platform provides robust course management capabilities, positioning itself as a potential all-encompassing distance learning system.

The Medroom platform had become outdated, leading to system instability and an unappealing user interface. These issues discouraged users from creating content on the LMS, impacting the overall adoption and effectiveness of the platform.

To address these challenges, we embarked on a complete overhaul of the platform, from user experience analysis to interface design and development. The project involved extensive market research, persona development, user journey mapping, empathy mapping, insight generation, task prioritization, prototyping, and the final development of the platform.

My Roles & Responsibilities

As the UX/UI Designer, I led the UX and UI efforts in collaboration with another designer. Together, we made critical design decisions that shaped the platform's user experience. My responsibilities included:

• Design Collaboration: Co-led the UX/UI design process, ensuring that all layout decisions were made collaboratively to align with user needs and business goals.
• Tools & Technologies: Utilized Figma, Adobe Illustrator, and Adobe Photoshop for design.

As the UI Engineer, I was responsible for the front-end development, in partnership with a back-end developer. My responsibilities included:

• Front-end development using Next.js, React.js, and TypeScript, with REST API integration.
• Creation and maintenance of the Storybook, which included the platform's style guide and component library.

Deliverables

• [✔] User Research & Insights
• [✔] UX Process Documentation
• [✔] Style Guide & Design System
• [✔] Wireframe and High-Fidelity Prototype

The Key Problem

The outdated platform required a complete rebuild, addressing both technical and user experience issues. We aimed to transform the platform into a modern, intuitive system that could efficiently handle content creation and course management, while also being aesthetically appealing and user-friendly.

Why we chose to address this problem: The need to provide a reliable, scalable, and engaging platform was critical for Medroom to maintain its competitive edge and continue to offer high-quality educational tools to medical professionals and students.

The Solution

UX Research

We conducted comprehensive research to understand the platform's user needs and benchmarked against key competitors. Surveys and interviews with users informed the creation of personas and user journeys, highlighting pain points and essential requirements for course content creation. These insights were mapped onto a prioritization grid, enabling the team to focus on the most critical features first.

Blueprint, wireframes and medium fidelity prototype

The platform architecture was meticulously planned around user workflows, resulting in a comprehensive blueprint that served as the foundation for defining screens and interactions. Initial wireframes facilitated user testing and stakeholder validation, eventually evolving into a medium-fidelity prototype that provided a clear vision of the platform's functionality and component structure.

Key Features

Basic features

• Dashboard: upon logging in, users are directed to a personalized dashboard where they can easily manage all aspects of their content creation process. The dashboard provides an overview of their active classes, offering quick access to the most important tools and information.
• Class Management: users can efficiently manage their classes within the platform, with features that allow them to list all active classes, create new ones, and edit details of existing classes.
• Lesson Management: the platform allows users to easily list, create, and edit lessons within their classes.

Main feature: The content builder

• The Content Builder emerged as the platform's most complex feature due to its multi-step process that guides users through content creation. Inspired by familiar tools like Microsoft PowerPoint, the interface is designed to be intuitive, minimizing distractions and immersing users in the creative process.
• The Content Builder incorporates a unique scene logic, which aligns with the temporal and spatial aspects of virtual reality. This allows users to arrange content in a non-linear, immersive way, distinct from traditional web platforms. Each step in the content creation process is streamlined, with tailored fields and previews that ensure users are aware of content requirements and progress.
• Before the start of the development process, the prototype underwent rigorous validation with users and stakeholders, ensuring the design met their needs and expectations.

Visual/UI Design

The UI was crafted with a focus on simplicity and familiarity, adhering to Nielsen's 10 usability heuristics. The design drew inspiration from social networks and content creation platforms, ensuring users felt comfortable and confident while navigating the system.

The layout employed a 12-column grid with consistent spacing and font sizing, utilizing Figma's Auto Layout for efficient component distribution. The color palette was carefully chosen, with green accents for action buttons and contrasts, complemented by neutral tones for the rest of the interface. Accessibility was a key consideration, with color contrast checks ensuring inclusivity.

Style Guide and Components:

The project provided an opportunity to lay the groundwork for Medroom's Design System. This included defining a cohesive color palette, selecting text fonts, and creating a library of SVG icons. Design tokens such as spacing, borders, and shadows were standardized to maintain consistency across the platform.

Elements featured modern design trends, with rounded corners, shading, and transparency adding a sense of lightness and movement to the UI. On course management pages, user-driven organization tools like filters and layout options were prioritized to enhance functionality.

Design System:

After finalizing the style guide, we proceeded to build the component system. Using Storybook, we documented the components and design tokens in a scalable manner, ensuring they could be easily reused across other Medroom products. The Storybook served as both a development tool and a comprehensive guide to the platform's UI components.

Takeaways

The redesign and redevelopment of Medroom’s platform significantly enhanced the user experience, transforming a previously outdated and difficult-to-use system into a modern, intuitive tool for medical education. By focusing on user needs and iterative design, we were able to create a platform that not only met the immediate goals but also laid the groundwork for future enhancements.

Key successes included the seamless integration of 3D models and VR content, which are central to Medroom’s offering, and the development of a user-friendly Content Builder that allows educators to create immersive learning experiences with minimal effort. The adoption of a Design System ensured consistency across the platform and provided a scalable framework for future product iterations.

One of the most valuable lessons learned was the importance of early and continuous user involvement in the design process. By conducting thorough research and validating our designs through prototypes and user testing, we were able to address potential issues before they became problematic, resulting in a more refined and user-centric final product.

Looking ahead, the platform is now well-positioned to expand its features, including advanced data visualization tools and enhanced 3D content capabilities. The foundation we have built allows for continuous improvement and innovation, ensuring that Medroom remains at the forefront of medical education technology