SPINE
Web / XR eLearning Technique Guide
Project
A cross-platform medical training suite designed to bridge the gap between traditional surgical observation and remote education. This application allows physicians to master complex surgical workflows and medical instrumentation through a unified interface accessible via standard web browsers or immersive XR headsets.
Role
UI Visual Lead
Services
UI Design / Implementation
Client
Level Ex Games
Discovery
Framework
Our team used the ADDIE model to build a responsive web and desktop application. The goal was to provide an adaptive learning environment for mastering specialized medical-surgical techniques.
Team Challenge
Platforms
I designed an immersive XR experience for the Magic Leap that brings anatomy to life through a hyper-realistic 3D spinal model. By allowing users to engage with the model from any angle, the application serves as a powerful, interactive centerpiece for showcasing complex medical procedures at conferences.
Goals & Scope
I defined the project scope for this medical application by establishing core objectives, development milestones, and target platform compatibility.
User Research
Understanding Users
I spearheaded the creation of a foundational user profile by facilitating collaboration between key stakeholders and the UX team, ensuring a shared understanding of our target audience.
Problems & Solutions
I focused on translating architectural solutions into high-fidelity visual interfaces that prioritized clarity and transparency. To build trust, I implemented "peek-behind-the-curtain" elements—such as tooltips, data-origin labels, and micro-interactions.
Design Solutions
Ideate Solutions
Guided Navigation: Designed an interface that uses intuitive dialogue prompts and 3D modeling to walk users through the screw placement process step-by-step.
Workflow Flexibility: Implemented a dual-view toggle, giving users the agency to switch between familiar conventional methods and optimized, recommended workflows.
Information Architecture: Integrated a contextual legend to decode the color-coded placement system, reducing cognitive load and potential for error.
Design Process
To ensure brand alignment, I translated Level Ex’s visual identity and brand guidelines into a cohesive application aesthetic. Using Figma, I developed a comprehensive UI style guide that standardized the color palette, typography, button states, and art assets, creating a consistent foundation for the entire interface.
User Feedback
To ensure seamless navigation across web and XR platforms, I prioritized clear, contextual user feedback. I designed a suite of directional icons and intuitive animations to guide players on tool positioning and interaction. Using Unity, I then implemented these assets, applying consistent styling and dynamic animations to refine the overall gameplay experience.
The Results
UI Designs
Bridging the gap between design and implementation, I built scalable UI systems in Unity for web and immersive XR. Below are direct engine captures of my interface layouts, dynamic feedback components, and styled assets.
Accessibility
As the UI Designer I also ensured accessibility standards were being met utilizing WCAG and 508 compliance guidelines by:
-
Testing UI colors in images and artwork using contrast checker software.
-
Testing font sizes and font colors.
-
Adding alternative text and captions.
XR UI Panels
Our team leveraged assets and flows of the web SPINE application to support an XR interactive experience for medical demos and enforce a teaching element. The XR app was to be built in Unity 3D and required adaptable UI panels that could swap out directives as the user progressed through the interactive training workflow. As the UI Designer, I created custom layouts, artwork and UI assets to populate the directive panels in the XR/AR view.
Video Demo XR
Working alongside the design team at Level Ex, I implemented the user interface for a Magic Leap 2 spatial computing experience. This project demonstrates how immersive XR can be used for surgical education. Below, you can see the UI in live use during a medical conference demonstration, proving its efficacy in a high-stakes professional setting.
The Impact
Testing & Validation
Our design journey focused on one goal: making surgical mastery accessible anywhere. By utilizing the SPINE application as our core framework, we didn't just build a tool—we built a foundation for the future of XR medical training. This strategic pivot empowered our team with 30% more resources and a significantly extended development cycle, allowing us to dive deeper into the nuances of interactive medical education.
