Plug Power:
VR Training Experience
A reusable spatial UI system for training new employees on high-risk industrial procedures.
VR training experience
Meta Quest 3
PRODUCT
UI/UX design
Design system
Spatial layout (ShapesXR)
Illustration & Motion
Developer handoff
MY ROLE
June 2025 - August 2026
TIMELINE
Game developers
Instructional designers
3D artists
SMEs
Production managers
COLLABORATORS
Some details are simplified or redacted to protect confidential information. The illustrations and dialogue I created for this project are not shown. This case study covers design process and decisions, not proprietary workflows.
Worked from SMEs, instructional designers, process documentation and on-site photos to understand the training.
01
Sketched the main menu in Procreate, then moved straight to high fidelity.
02
Built a reusable interface system for navigation, tasks, feedback and progression.
03
Checked scale and readability in ShapesXR, then handed the layout to developers building in Unity.
04
At a Glance
New employees had to learn two complex industrial processes where a single mistake on the job can be extremely costly. Traditional training doesn’t give them room to practice and fail without consequences.
The problem
The Challenge
VR gave employees a place to practice, make mistakes and repeat procedures until they were confident, before ever touching the real thing.
Why VR
Design Goals
Information should be understood quickly.
Clarity
Type, scale and contrast hold up in VR.
Accessibility
Users know what to do next and where to find help.
Guidance
The UI supports the environment, not the other way around.
Immersion
The Design Process
Understand
Sketch
Design
Map in VR
Hand off
Work with developers to bring it into Unity
Learn the training from SMEs and documentation
Review scale and readability in ShapesXR
Build the interface system in Figma
Plan the menu layout and hierarchy
Understanding the Training
Before designing anything, I needed to understand how the processes actually work and where learners would need guidance. The instructional design team defined the learning flow and objectives. My job was to turn those requirements into clear interactions and UI.
01
Learn the process with full guidance.
Tutorial
STAGE 01
GUIDANCE
Learn the process with full guidance.
Tutorial
STAGE 01
GUIDANCE
Learn the process with full guidance.
Tutorial
STAGE 01
GUIDANCE
The real processes
SMEs
The procedures
Process Docs
The environment
On-site Media
Meta Quest games
VR References
Sketching
The main menu needed to stay simple, so I already had a clear direction. I sketched it on my iPad in Procreate to work out layout, navigation and information hierarchy before moving into high fidelity.
02
Level cards, working out states
SKETCH
The level menu as built
FINAL
Stage menu, layout and hierarchy
The stage menu as built
Designing the interface system
Plug Power provided brand colors and typography, but a VR interface needed its own system. I built one from scratch: reusable components, consistent patterns and clear states that work across every stage of the training.
03
Green is selected, white is available/unlocked, gray with a lock is locked.
NAVIGATION
Selecting a stage shows a short preview, so users know what to expect before they commit. Locked stages stay visible so they can see what's ahead.
Pick a stage, preview it, then start.
Four levels, three states
LEVEL PROGRESSION
Level cards show three clear states: completed in blue, selected in green, and locked in gray with a lock icon. The info icon opens the steps for a level, so users know what they'll do before pressing Start.
Steps preview for the selected level
See what's ahead before you start.
The three wrist panels
TASK SYSTEM
Three panels stay on the user's wrist: a task list, a tools-needed list, and an error panel that lists what to fix. Each has its own color and header, so they're easy to tell apart.
Always know what's next.
A single row tracks the whole sequence. The label names the task the trainee is on, and each marker fills with a check as its task completes, confirming the action without a popup interrupting the work.
Progress you can read at a glance.
The task row filling as each task is completed
Success, warning, error
FEEDBACK SYSTEM
Success, warning and error messages appear as popups, each with its own color, icon and label. Warnings explain what's blocked and what to do next. Status colors stay consistent across the experience: green for success, orange or yellow for warnings, red for errors, and gray for inactive states.
Say what happened, then get out of the way.
Designing for VR
VR has fewer interface conventions than web or mobile, so I explored existing Meta Quest experiences for reference. A few decisions shaped everything else.
04
Where each piece of the interface lives in the scene.
A 3D map for the developers
In ShapesXR I laid out each interface around the user: what lives on the wrist, in the HUD, or in the scene, and how large and how far away it should be. That layout became the guide the game developers built from in Unity.
Scale, placement, readability
Being inside the space let me judge panel size and text legibility much better than I could on a flat screen.
Clarity over expression
The interface could have been more visually expressive, but that would have pulled attention from the task. I kept it to clear shapes and consistent states.
No full-screen interfaces
Information lives on the wrist, in the HUD, or in short popups, so users can keep their eyes on the environment.
The timer only appears when it counts
Tutorial and Simulation have no timer. It appears in Evaluation, where the user performs the process alone against the clock. Showing it earlier would have added pressure to stages meant for learning.
From Figma to VR
A flat Figma canvas can't show how an interface feels in a headset. So I brought my designs into ShapesXR to see them in space.
05
Why ShapesXR
Flat screens don’t show size or distance in VR. A panel that looks right in Figma can feel too big or too far away in a headset.
ShapesXR was the 3D guide for the developers. It showed them where each panel sits and how large it is.
It let me check readability and reach before anything was built.
Figma
The stage menu, designed flat
ShapesXR
The same menu, mapped in 3D
VR Game
Built in Unity by the developers
The Final Experience
The finished training takes a user from picking a stage to completing the process on their own, with the interface guiding them throughout.
Highlights
Navigation: users pick a stage from the stage menu.
Level progression: completed, current and locked levels are clear at a glance.
Task system: Tasks, Tools and Errors stay on the wrist, so the view stays clear.
Feedback system: popups show success, warnings and errors. A HUD timer appears in the
Evaluation stage.
Each stage gives less guidance than the one before, until the user performs the process alone against
the clock.
Testing with SMEs
We built the first process and presented it to the subject matter experts. They were happy with it and impressed that we could pull it off in VR. With their approval, we went on to build the second training process.
The second process had its own stages, levels and tasks, so I adapted the same interface system to fit it.
Reflection
Collaboration is part of the design work. I worked with developers, production managers, SMEs and other designers, and each one needed something different from me. Developers needed positions and sizes, SMEs needed accuracy, managers needed progress.
Building one clear system first made the second process faster to design. The menus, level progression and feedback carried over, so I only had to fit the new tasks into it.
Designing for VR is designing for space. Size, distance and reach matter as much as layout.
What I learned
Test with real trainees. The SMEs validated accuracy. I still want to see how fast a new employee finds their tasks.
Push the system against a third process to find where it holds and where it breaks.
What I'd do next
The part I’m most proud of is that the system held. When the second process came with its own stages, levels and tasks, I didn’t redesign the interface. The new content fit into what was already there.
