Spatial Computing Interface Design

This project served as the foundation for my Computer Vision and Human-Computer Interaction (HCI) journey, exposing me to cutting-edge research in real-time human pose estimation and tracking. My work revolved around integrating depth cameras, LiDARs, 3D modeling, game engines, and digital twin simulations to create a fully immersive, real-time VR/AR experience. The primary objective was to stream a live representation of a workspace or environment, including digital twins of robotic arms and human subjects, in real time via an online web interface. This setup allowed users to remotely interact with the environment as if they were physically present. I was primarily tasked with human pose detection and tracking, involving: AI-based research to accurately detect, track, and visualize human poses in a digital environment. Designing an intuitive VR-friendly UX/UI to ensure seamless navigation and interaction within the virtual space.

Skip to Design Details

Project Implementation Overview

Click the arrow mark to watch the video in full screen

Before diving into UI/UX design, I needed to deeply understand how VR and AR systems work. This meant: Wearing VR/AR headsets multiple times to analyze navigation schemes, user comfort, and interaction dynamics. Studying existing UI interface functionalities and interaction patterns in immersive environments. Collaborating closely with researchers and engineers to understand their specific interface needs. From this, I iteratively created low-fidelity wireframes, continuously refining them based on user feedback and usability testing. The interface needed to accommodate: Mode selection (various tracking and interaction modes). Navigation through available digital twins and their real-time data. Playback of recorded sessions from VR operations. Account management & access controls for different users. Camera view selection and dynamic scene adjustments. Quick-access shortcuts to enhance workflow efficiency.

After validating the low-fidelity designs, I proceeded to create high-fidelity UI/UX wireframes using Figma, incorporating: Digital assets and UI elements designed in Adobe Illustrator & Photoshop for a visually immersive experience. Seamless transitions and interactions ensuring an intuitive VR-ready UI. Human pose tracking data integration, where I ran AI models on digital elements and embedded them directly into the interface. As seen in the project video, the UI seamlessly transitions between multiple functional modes, including: Pose Detector Mode – Identifies human skeleton positioning in real time. Pose Tracker Mode – Continuously tracks human movement across the workspace. Heatmap Mode – Visualizes high-movement or high-stress areas for analysis. Interactive Mode – Allows users to manipulate digital elements based on their tracked movement. Digital Twin Mode – Displays and controls robotic arms, objects, and people within the scene. Each mode required a tailored UI layout to optimize clarity, usability, and functionality in an immersive setting.

This project was one of the steepest learning curves in my journey so far, as it required me to bridge two complex domains—Computer Vision and UX Design—while working with a cross-functional team. Beyond just the technical skills, this experience taught me the value of translating technical research into an accessible and usable interface. I gained a deep understanding of how to structure immersive experiences, balancing technical constraints with user needs. More importantly, I developed a valuable skillset in interpreting project requirements and delivering exactly what’s needed—both functionally and aesthetically.

Design Details

User Research & Pain Points

To create a fluid and real-time motion tracking system, I researched key challenges such as latency issues, complex user interactions, and device constraints across different VR/AR hardware. Existing motion capture systems lacked real-time precision, making interactions laggy and unintuitive. Users needed a seamless, gesture-based navigation system that would ensure smooth pose control without technical complexity. To solve this, I developed a low-latency, intuitive motion tracking UI that optimized performance and enhanced real-time precision for immersive experiences.

UX Architecture & Information Flow

The interface was structured to minimize input lag and maximize usability by integrating key features. Gesture-based UI enabled hands-free navigation, allowing for seamless interactions without physical controllers. Real-time data rendering ensured instant pose visualization using depth-based tracking, making movements fluid and precise. Additionally, an adaptive feedback system provided live responsiveness to motion errors, improving accuracy and enhancing user control.

High-Fidelity Wireframes & Visual Design

Bringing interaction to life required high-fidelity wireframes and visually compelling design, focusing on clarity, functionality, and precision. A minimal UI approach ensured an immersive experience by reducing cognitive overload and keeping layouts clean and intuitive. A dark-themed HUD enhanced visual focus in AR/VR environments, making key elements more distinguishable. Additionally, fluid motion graphics enabled real-time pose rendering, ensuring lifelike movement representation for a seamless experience.

Prototyping & Testing

Prototyping and testing were crucial to refining gesture-based controls and real-time responsiveness. Using Figma and Unity, I developed an interactive prototype to simulate real-world user interactions. Usability testing revealed that users preferred gesture controls over traditional UI elements, and multi-camera switching significantly improved tracking accuracy. A simplified mode selection UI led to faster adoption, making the system more intuitive for first-time users.