Designing UI/UX for Interactive 3D Training
At Metaverse Solutions, I design the interfaces, interaction patterns and task guidance used across browser-based vocational training simulations. The simulations cover different professions and environments, from healthcare and hospitality to ICT, technical work and construction. My role is to translate real-world procedures into clear interactive experiences: deciding how learners understand their objective, interact with the environment, perform tasks and receive feedback as they progress.
UI and interaction design across vocational training simulations.
Making complex workflows understandable
Vocational procedures rarely translate directly into a digital experience. A learner may need to navigate an environment, identify the correct object, collect a tool, perform several actions in sequence and understand whether each step was completed correctly. The interface needs to provide enough guidance to keep the learner oriented without turning the experience into a sequence of instructions to follow blindly.
Complex procedures
Turn real-world workflows into understandable steps.
Procedures need to be broken into objectives and interactions while preserving the decisions and actions that are relevant to the profession.
Guidance inside 3D
Support the learner without competing with the environment.
Objectives, prompts, indicators and feedback need to work alongside navigation, tools and interactive objects rather than constantly occupying the learner's attention.
Consistency across simulations
Make new environments feel familiar.
Although each profession introduces different tasks, recurring interaction and interface patterns reduce the amount learners need to relearn when moving between simulations.
Task guidance within a structured vocational procedure
Tool-based interaction and focused practical tasks
Navigation, workplace tasks and environmental guidance
Translating vocational workflows into playable task flows
Before designing individual interfaces, I first look at what the learner actually needs to accomplish. A real procedure may contain many individual actions, dependencies and decisions. I translate that process into a task structure that can be communicated through the environment, interaction system and UI.
This separation helps me decide what belongs in the interface, what should be communicated through the environment and what only needs to appear when the learner interacts.
Teaching the system once
A learner shouldn't need to discover a completely different control language every time the task changes. Across the simulations, recurring actions follow familiar interaction conventions so learners can focus on the vocational task rather than relearning the controls.
“The task changes, but the basic interaction language remains familiar.”
Giving learners the right information at the right moment
One of the recurring UX challenges across the simulations is deciding how much information the learner needs and when they need it. Rather than placing every instruction on screen at once, I separate guidance into different layers.
“The goal is to keep the learner informed without making the interface responsible for every decision.”
Designing patterns that adapt across environments
The training simulations cover professions with very different environments, tools and procedures. The content changes, but many UX questions remain the same: What is my current objective? Where do I need to go? What can I interact with? What action is available? Did I complete it correctly? What happens next?
By reusing familiar patterns for objectives, interaction prompts, navigation, task progression and feedback, new simulations can feel consistent without forcing every profession into the same workflow.
“Consistency lives in how the learner uses the simulation. Flexibility lives in what the learner is asked to do.”
Supporting different forms of interaction
Different vocational tasks require different forms of input and feedback. Instead of designing every interaction independently, I work with reusable task patterns that can be adapted to the procedure being simulated.
Position objects or components in the correct location.
Perform practical actions using interactive tools.
Identify, check or validate relevant conditions.
Follow a required movement or procedural path.
Complete interactions involving multiple components or stages.
Select, carry and deliver the correct object to its destination.
Designing for implementation
My work doesn’t stop once an interface is designed in Figma. Because I also work directly with the simulations in Unity, I can evaluate designs in the environment where they will actually be used. A task interface that appears clear as a static screen may behave very differently when the learner is simultaneously navigating a 3D environment, carrying an object, operating a tool or following a multi-stage procedure.
Working close to implementation lets me refine hierarchy, interaction states, timing, feedback and reusable behaviour while the experience is being built.
Define the interface structure, hierarchy and interaction states.
Integrate the design with the simulation's tasks and interaction systems.
Evaluate the interface in context and refine it around the actual learner experience.
Screen recording or screenshot of the final UI interactions running in the WebGL simulation.
“Implementation is part of the design process, not simply the handoff at the end.”
Improving the experience through implementation
As task sequences became more complex, learners needed a clearer way to understand what they were currently working on without repeatedly searching through instructions.
Prioritize the active objective and structure supporting information around the current stage of the task.
Introducing objectives, controls and interaction rules at the same time can create unnecessary information before the learner has entered the experience.
Prioritize what is needed to begin and reinforce the remaining interaction rules through consistent prompts and contextual guidance.
Continuous tasks such as painting are not simply complete or incomplete. Learners need to understand both the current stage of the process and their progress within it.
Expose the active stage — such as Primer, First Coat and Second Coat — alongside progress feedback so the learner can understand both what they are doing and how far they have progressed.
Designing systems, not individual screens
Working across multiple training environments changed the way I approach interface and interaction design. Instead of asking only “What should this screen look like?”, I increasingly ask: What should remain familiar from previous simulations, and what needs to change for this particular task?
That shift has helped me think beyond individual interfaces toward the relationship between task structure, interaction, guidance and feedback across an entire experience.
Consistency reduces learning overhead
When familiar actions behave predictably, learners can spend more attention on the vocational task rather than relearning the interface.
3D experiences depend on contextual feedback
Unlike conventional interfaces, the environment itself is part of the experience. Objects, prompts, task states and feedback need to work together to communicate what is happening.
Reusable patterns create coherence
Shared interaction and UI patterns make it easier to design new simulations while still allowing each profession to have its own workflow and requirements.
Final platform overview highlighting cross-sector simulation UX in action.
“One interaction language. Different vocational experiences.”