Moo Jun Jie UI/UX Designer
02 — Internship, Virtualtech Frontier · 2026

MyXR Lab: two kinds of admin, and a classroom inside a headset.

Twelve weeks on both halves of one XR learning platform. I mapped the web dashboard that institutions run it from, then designed the in-headset interface for an electric-vehicle course.

Role
Design Intern (UI/UX) — admin user flows, PRD sections, in-headset UI panels
Company
Virtualtech Frontier Sdn Bhd, Visual Experience Design — supervised by a senior designer
Timeline
12 weeks, January–March 2026, logged weekly
Tools
Figma, FigJam
Scope
Admin flows for two roles, two PRD sections, a UI kit for a VR/MR course
The MyXR Lab wordmark, a blue badge topped by a robot head, beside a 3D render of Boomy, a grey robot mascot with goggles and brown gloves.

Fig. 01The platform’s identity, created by the VTF team. Boomy, on the right, comes back inside the course as the voice of the hint panel (Fig. 10).

What I did
  • Researched EV types and components for the course
  • Wrote the PRD’s login and module & level selection sections
  • Mapped the admin dashboard flows for both admin roles
  • Designed the glass visual style shared by the dialogue boxes and panels
  • Designed the dialogue, hint, info and tutorial panels
  • Designed layered exploration, the EV panels and the drag-and-drop assessment
What the team did
  • The rest of the PRD: goals, Bloom’s mapping, comfort rules
  • The platform’s age tiers and module format, set before I joined
  • The MyXR Lab logo, the three characters and the 3D models
(01) The briefOne platform, two surfaces

One learning platform, used on a laptop and inside a headset.

MyXR Lab is Virtualtech Frontier’s XR learning platform, and I worked on both ends of it: the web dashboard institutions use to run it, and a headset course for future EV technicians.

Content is tiered by age — under 12, teens 13–17, and TVET or polytechnic learners 18–23 — in 60–120 minute modules split into roughly 15-minute sections. Assets stay low-poly so standalone headsets keep their frame rate: lag and nausea are what the team defined as a poor XR experience.

Insight

Both halves had the same job: show each person only what they need right now — an admin only their own institution, a learner only one layer of the car.

(02) Part A · The dashboardTwo role trees

One dashboard, two very different admins.

“Admin” hid two different jobs, so I mapped them as two separate trees instead of one flow full of conditional states.

The Master Admin at VTF registers, edits and removes institutions, drills into analytics from institution to class to student, and manages each institution’s admin account. The Super Admin at a school or polytechnic only works inside their own institution: their account, their classes, their students and their assessment reports.

Permission boundaries became navigation boundaries — each role’s dashboard only lists the modules that role can use. Tenancy is fixed at activation: the school name on a Super Admin’s form cannot be edited.

The complete admin dashboard flow file in two columns. Left, Master Admin: institution management (add, view and edit, remove, analytics) and super admin management (register, edit, remove). Right, Super Admin: account management, class management and student management.

Fig. 02The whole flow file. VTF’s Master Admin on the left, the institution’s Super Admin on the right — the two columns share no modules. Open full size ↗

Super Admin student management flows: register a student by filling in details or importing a CSV file and assigning a class; review and edit a student profile or download a CSV assessment report; remove a student account after two confirmations.

Fig. 03Student management on the Super Admin side. A student is registered once into the institution’s library — by form or CSV import, keyed on a unique IC number — then assigned to a class.

(03) Part B · The thinkingEV research, PRD

High-voltage work is dangerous to practise, so the course lets learners fail safely.

The second workstream was a headset course on electric vehicles for TVET learners — taught in VR first, then practised hands-on in mixed reality — built from a product requirement document I co-wrote with the team.

The PRD’s case for VR: simulate real workshop tasks and SOPs, give hands-on practice without real-world risk, and allow safe failure with immediate feedback. Its learners — school leavers, community-college students and early-career trainees — prefer tasks to memorising theory.

I researched EV types and components first, then wrote the login and module & level selection sections. In VR the entry experience decides whether a trainee comes back, so both had to be effortless.

The PRD’s comfort rules — teleport-only movement, sessions capped at 15–25 minutes, every instruction voiced — set the frame for the whole course. Inside that frame, each panel I designed answers a specific rule.

PRD rules and the interface decision each one led to
PRD ruleSectionMy interface decision
Avoid forced tutorials6.4 UI designThe mentor’s first line is a fork: “I’m new here, guide me through” or “I’m familiar, I’ll skip the tutorial” (Fig. 05).
Friendly welcome with a mentor character5.3 Gameplay journeyProfessor Farahdi opens the course in a floating dialogue box with her portrait, before any controls appear.
One instruction at a time4.2 UX principlesDuring assessment a single Current Task panel holds the one instruction in play (Fig. 12).
Large, high-contrast text in short phrases4.3 Accessibility & comfortType size and box placement tuned for reading comfort in the headset first, looks second (Fig. 09).
Avoid colour-only indicators4.3 Accessibility & comfortEvery speaker has a colour and a name in the header, so colour is never the only cue.
Introduce 1–2 new concepts per scene4.2 UX principlesStructure, power source and energy flow are three separate layer switches (Fig. 08).
Unlock the next task only after understanding is shown5.3 Gameplay journeyComparison Mode stays locked until all four EV types have been explored (Fig. 06).
Incorrect actions trigger hints, not failure5.3 Gameplay journeyHints come from Boomy in a panel of their own, separate from the story (Fig. 10).

TableFrom requirement to screen. The rules are quoted from the team PRD; the decisions on the right are the panels I designed.

Professor Farahdi, a mentor character in a lab coat and green hijab, beside her dialogue box: Before we begin. Would you like an introduction to the facility? Two response buttons below read I’m new here, guide me through and I’m familiar, I’ll skip the tutorial.

Fig. 05The entry fork. A first-timer gets the guided tour; a returning trainee skips straight to the lesson, so the tutorial is never forced.

FigJam board titled VR Research with three user journey maps, curriculum syllabus and topic comparisons, a VR game study, a UI component frame, an automotive game frame and EV research notes.

Fig. 04The VR research board in FigJam: journey maps and syllabus comparisons on the left, the EV research notes on the far right.

(04) Design · 01Layered exploration

Show the car one layer at a time, not as one exploded diagram.

An EV holds more structure than a learner can take in at once, so the lesson breaks it into visual layers that the learner switches on in sequence.

Structure, power source and energy flow are three separate toggles, and a component opens an info panel only when the learner asks for depth. The learner sets the complexity curve instead of absorbing it all at once.

The four EV types get the same treatment. Every spec panel keeps one layout and one order — energy source, range, energy flow, key features — so whoever reads one can compare the other three without relearning the frame.

EV Panel screen with four cards — Battery Electric Vehicle, Fuel Cell Electric Vehicle, Hybrid Electric Vehicle and Plug-in Hybrid Electric Vehicle — each with a car cutaway, a one-line description and an arrow button, above a Comparison Mode button reading Explore all 4 EV type to unlock.

Fig. 06The category screen. Comparison Mode stays locked until all four types are explored, so the lock itself is the prompt to keep going.

Battery Electric Vehicle panel: large high-voltage battery pack, 480 km per charge, energy flow from charger to battery, power converter, electric motor, transmission and wheels, zero emissions. Hybrid Electric Vehicle panel: petrol and a small battery, 800 km per tank, energy flow from fuel tank through the engine and generator to the wheels, no plugging in. Fuel Cell Electric Vehicle panel: hydrogen gas and electricity, 600 km per tank, energy flow from fuel tank through the fuel cell stack to the wheels, pure water and zero emissions. Plug-in Hybrid Electric Vehicle panel: grid electricity and petrol, 480 to 800 km, energy flow from both the charger and the fuel tank, zero emissions in EV mode.

Fig. 07Four panels, one frame: only the energy source, range and energy flow change. Compare the flow strip at the bottom left of each.

Layer Exploration panel with three switches: Show structure (on), Show Power Source and Show Energy Flow (off).
Info panel titled Battery Pack explaining that it stores electrical energy, supplies DC power to the motor and can be recharged by an external charger or regenerative braking, with an OK button.

Fig. 08Three independent layer switches, not one all-or-nothing view (left), and the info panel a component opens on demand (right).

(04) Design · 02Dialogue system

In a headset, a dialogue box is a comfort problem, not a type problem.

Text that is hard to read in a headset is tiring, so I tuned font size and box placement for readability and comfort first, looks second.

I ended with three variants: a standard box with back and next, an auto-advance box for narration, and a floating box with a portrait for each speaker, all in one glass style I set for the whole UI. Each speaker keeps one colour — teal for B.O.O.My, green for Professor Farahdi, red for Professor Kaldor — so the learner knows who is talking before reading a word.

When the story asks for a choice, there are only two options, and the next arrow stays disabled so a decision can’t be skipped.

Standard dialogue boxes for B.O.O.My (teal), Professor Farahdi (green) and Professor Kaldor (red), each with back and next buttons. Auto-advance dialogue boxes for the same three speakers, without navigation buttons. Floating dialogue boxes, each with a framed portrait of its speaker: Boomy, Professor Farahdi and Professor Kaldor.

Fig. 09Standard, auto-advance and floating, top to bottom. The header colour names the speaker in every variant.

B.O.O.My dialogue box with a back arrow, a greyed-out next arrow and two full-width response buttons, Option 1 and Option 2.
Hint panel with Boomy and a light bulb beside a teal Hint box and a progress bar.

Fig. 10Two response options with the next arrow greyed out (left). In the hint panel, Boomy carries the hint, so help has its own voice (right).

(04) Design · 03Instruction vs story

Instructions and warnings must never look like the story.

A learner has to tell instruction from narrative at a glance, so tutorial, hint, info and safety panels each got their own labelled header, separate from the character dialogue.

The safety note is the loudest of them: every high-voltage circuit, up to 800V DC, is orange-coded and must be treated as live until de-energisation is verified. It is the one panel nobody should skim.

Tutorial panel titled The Trigger Button: Press the trigger button using your index finger, above an illustration of a VR controller with the trigger labelled.
Note panel with a light bulb: All high-voltage circuits (up to 800V DC) are identifiable by orange outer insulation. Technicians must treat all orange-coded components as live until de-energization is verified.

Fig. 11A tutorial teaches the controller (left); the note carries the high-voltage rule (right). Neither borrows a character’s colours.

(04) Design · 04Assessment

Test the knowledge without a keyboard or a quiz.

For the assessment module I designed drag-and-drop matching instead of a quiz: the learner shows they understand by putting things where they belong.

Two tasks share one frame. First, drag each EV type and its energy-flow chain onto the matching cutaway car. Then grab the right energy source from the parts shelf and fit it to the car in front of you. One Current Task panel at the top holds the single instruction in play, and Boomy confirms progress in the same dialogue style as the rest of the course.

Assessment mock-up in a car workshop: a Current Task panel reads Drag and drop the correct EV type and energy flow to matching vehicle model. Four cutaway cars each have empty Name and Energy Flow slots; one is filled with Hybrid Electric Vehicle (HEV) and Battery, Inverter, Electric Motor, Wheels. Loose labels for the other types and flows sit along the bottom, and a VR controller hand points at a slot.

Fig. 12Task one: match each EV type and its energy flow to a car. Figma mock-up over a reference photo; the grey blocks stand in for 3D props.

Assessment mock-up: Current Task reads Grab the correct energy source component to the corresponding EV type. A battery pack is being fitted into a Battery Electric Vehicle (BEV) cutaway, a parts shelf on the right holds hydrogen tanks, batteries and a fuel tank, and Boomy says: Great job! Power is stabilizing and Kaldor is blocked! Go to the core system and activate again.

Fig. 13Task two: fit the right energy source. The reward is in the story — Boomy reports the power coming back — so the test reads as part of the simulation.

(05) The outcomeHanded over

A flow file, two PRD sections and a UI kit for the headset.

Everything went to the team as working files: the admin flow file for both roles, my two PRD sections, and a UI kit for the EV course.

The kit holds three dialogue variants for three speakers, four panel types, the layer toggles, the EV category screen with its four spec panels, and the drag-and-drop assessment.

(06) ReflectionWhat the studio taught me

Studio work starts with the client’s brief and ends with a file someone else can open.

Client feedback isn’t interference — it is the brief getting more accurate. In a studio, the design has to serve the business behind it.

Handoff is a design skill too: Figma layers organised so a colleague can work in them, and a Figma deck rebuilt as a genuinely editable PowerPoint because that was what the client could use.

Next, I would put the dialogue boxes and layer toggles in front of trainees wearing a headset and check two things: can they read a full box comfortably, and do they switch layers on their own or wait to be told?

Next project · 03

Coffee Je: a slow-coffee brand, from concept to accessible system.