Designing UI/UX for Interactive 3D Training
At Metaverse Solutions, I design interfaces, interaction patterns and task guidance for browser-based vocational simulations. My work helps learners understand their objectives, perform practical tasks and receive feedback across different professions.
People exploring vocational roles through practical simulations, including learners unfamiliar with the profession or with navigating 3D environments.
I design task flows, interfaces, interaction patterns and guidance, and build UI implementations and interaction prototypes in Unity.
I work with developers and artists to connect the interface, task systems and environment, with client input informing vocational requirements.
UI screens, contextual prompts, task checklists, onboarding and feedback across healthcare, hospitality, ICT, technical and construction simulations.
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.
Logistics breakdown based on research and client input.
Surface-cleaning interaction with contextual instructions, tool controls and progress feedback
Shared components through all sectors.
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.
Translating a technical procedure into a sequence of objectives, interactions and feedback.
Underfloor-heating example: the learner selects and places a component, receives confirmation when the placement succeeds, and continues through the installation sequence.
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 and pick up the correct object.
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.
Refinement — giving learners control to leave a task
During testing with clients and the team, participants reported feeling stuck because they could not leave a minigame before completing it. I added an exit option so learners could return to the wider simulation whenever they wanted. Feedback on the revised version confirmed that this addressed the feeling of being stuck and gave learners more freedom and choice during gameplay.
Final UI interactions running in the WebGL simulation.
“Learners can close a minigame at any time to respond to changing priorities, such as an urgent patient-care task.”
What this work taught me
Designing across five vocational environments taught me to balance consistency with the needs of each profession.
Working in both Figma and Unity has also made evaluating interfaces in context a central part of my process.
Start with the task
Map the practical procedure before deciding what guidance and controls the learner needs.
Evaluate in context
An interface that works in Figma still needs checking alongside movement, tools and interactions in Unity.
Adapt shared patterns
Reuse familiar controls and feedback while allowing task flows to reflect each profession’s priorities.
UI, task guidance and interaction design across healthcare, ICT, hospitality, technical and construction training simulations.