Design System for VR Training

Limitations of Legacy Tool & UI Interactions

Every tool interaction and UI element was rebuilt from scratch for each sim. This led to several recurring issues

High production time. 30–40% of sim development was spent repeatedly programming, animating, and debugging common interactions like drills or sliders, often taking 5–10 hours each.
Inconsistent usability and quality. Without a shared standard, tools varied widely in interaction patterns and polish, making it harder for learners to transfer skills between sims..
Lack of reusability. No way to share or modify existing interactions; sim builders often had to dig through old projects or recreate assets entirely.
Expensive iteration. Feedback or changes during production required major rework since interactions weren’t modular or validated in advance.

Example of incosistent VR sliders

Tools from Engineering

To begin addressing these issues, we collaborated with our engineering and product team developed core tools that laid the foundation for a more flexible, reusable, and measurable design system.

Node Flow/SDK 2.0

Problem: Legacy sims forced linear paths and lacked flexibility in task order.
Solution: A node‑based flow system that allows non‑linear user journeys, mirroring real‑world processes and enabling meaningful user choice.
Contribution: Tested early prototypes, surfaced bugs, and proposed new features based on real production workflows. Created documentation to help sim builders onboard into the tool and adopt preferred workflows, ensuring it supported better learning outcomes, improved usability, and faster production.

Asset Manager

Problem: Every tool and interaction was built from scratch, leading to inconsistency and wasted production time.
Solution: A centralized library where reusable, pre‑programmed assets (tools, interactions, UI elements) can be stored, shared, and adapted, ensuring consistency and speeding up development.
Contribution: Tested the prototype, gathered feedback from designers and other stakeholders, created a recommendations deck for the project manager, and wrote detailed tech specs to guide engineering updates and future iterations.

Design Challenge

Legacy sim production required every interactive element to be designed and built from scratch. This led to inconsistent visuals, unpredictable behavior, and heavy production overhead. The challenge was to create a unified approach to interaction design that supported consistent quality, faster build times, and scalable training content.

Solution

We identified and leveraged opportunities in NodeFlow and the Asset Manager to design a modular system of tool and UI templates that improved usability and learning outcomes while streamlining production. This approach turned complex builds into quick, repeatable workflows that scaled across our growing sim production pipeline.

Interactable UI Templates

Legacy sims required every interactive element to be built from scratch, resulting in inconsistent behaviors, visual styles, and significant production overhead. By leveraging NodeFlow and the Asset Manager, we developed a system reusable interactive tools and UI templates to standardize quality, reduce build time, and create a foundation for scalable VR training content.

Final Prototype

Case Study. VR Exploded Diagram

Reusable exploded diagram template that standardized visuals and VR interactions. Reduced production time from two weeks to under an hour.

Problem. Exploded diagrams were built manually for each sim, taking 1–2 weeks per diagram and leading to inconsistent visuals and difficult updates.
Solution. Procedural script generates exploded diagrams with labels and connectors directly from model hierarchies. Overrides allow clean customization and integrate with the Asset Manager for reuse across sims.
Result. Setup time was reduced from weeks to under an hour, creating consistent visuals that scale across future sims. These reusable templates improved production speed, enhanced learner experience, and provided a flexible foundation for new training modules.

Concept Sketches

Unity Template Setup

Final Prototype exploded

Final Prototype closed

Final Prototype detail

Slider Redesign thumbnail sketches

Slider Redesign 3DMax mockup for feedback

Final Slider in Unity

Prototype video (0:45)

Animatic prototype and final VR sim (0:55)

Case Study. Urban Planning Diagram

Early prototype transformed abstract urban planning concepts into interactive VR diagrams. Combining prefab and custom elements, we created animatics that aligned stakeholders early and guided production.

Problem. Conceptual career sims lacked patterns for diagrams. Design occurred during production, causing costly revisions and inconsistent UI.
Solution. Developed modular templates mixing prefab and content‑specific elements. Prototyped interactions as animatics for early feedback, enabling approvals before production and ensuring visual consistency.
Result. Prototyping early sped up approvals and reduced rework, creating a reusable framework for future conceptual sims and scalable design practices.

Early ideation and sketches. Team workshops for concept alignment, reference sharing, and initial proposals.

Sketches for GIS tech diagrams

Sketches for Urban Planner diagrams

Sketches for Architect sim diagrams

Interactive Tool Assets

We used the rollout of new engineering tools as an opportunity to rethink how tools and interactions were designed, creating modular systems and best practices that maximized both learner experience and production velocity.

Video of interactive tool assets demo scene (1:25)

Case Study. Interactive Tool Assets

Problem. In the old system of itneraction templates tools, objects, and feedback were tangled together, making updates slow, customization hard, and interactions overly linear. Training sims felt artificial: drills followed fixed orders, ghost hands gave away answers, and using multiple tools or targets was nearly impossible.
Solution. We split the system into three modular parts. Provider (the tool), Receiver (the object), and Feedback (the guidance). This followed the Single Responsibility Principle, where each part does one job. This flexible framework allowed for easier customization based on the specific learning needs of each sim
Result. We built 12 modular tool assets and refactored 9 blank interaction templates, cutting interaction setup times from weeks to hours. The improved customization allowed for more realistic tools in VR, boosting learner engagement and training impact.

Breaking interactions into modular Provider, Receiver, and Feedback components created a flexible system for XR interactions that’s easier to update, customize, and scale. The feedback is driven by the state of the tool based on the user's inputs.

Single interaction with feedback

Provider drill and Receiver screw with feedback

Drill interaction scaled to multiple screws with custom feedback

Camera interaction for assessment (0:20)

Camera Interactable Asset

Because smartphones are so common, taking pictures with a phone is a familiar action for many jobs, and therefore appears in many of our training simulations.
Examples include a claims adjustor documenting damage for an insurance claim, or a diesel mechanic recording tire wear for a customer.
Using the flexible system, we repurposed the camera interaction into a reusable learning and assessment tool. Sim builders could quickly adapt it for a scenario where the learner identified and documented potential hazards in a workspace, something that previously required custom coding. Delivering the activity diegetically mirrored real-world behavior, boosting both authenticity and learner engagement.

What I learned.

Design systems multiply impact. A well-structured design framework accelerates production and reduces costs while maintaining the quality of the user experience and the learning efficacy of the training simulation.

Flexible systems are efficient. Modular, adaptable systems reduce rework and facilitate customization and scaling to meet the needs of diverse projects.

Scalable by design. A thoughtfully built system creates the foundation for growth, allowing production to scale quickly and efficiently without sacrificing quality.

Design System for Interactive VR Assets

// virtual reality training simulation