3D/VR learning experience

Hazardous environment 3D/VR training for industrial engineers

At a glance

We crafted an immersive 3D/VR project that transforms online training for oil refinery employees. This cutting-edge virtual environment allows users to navigate a multi-floor 3D space, interact with training content through hotspots, and master complex machinery systems—all without setting foot in the refinery.

Visit our website

Drop us a few lines at [email protected]

See the whole case below 👇

Type:

Services:

  • UX Research

  • Business Analysis

  • UX/UI Design

  • Learning Design

  • Development

Sector:

  • eLearning, Virtual Reality

Technologies:

  • Svelte (JavaScript Framework)

The challenge

Oil refinery environments pose significant risks such as exposure to toxic chemicals, hazardous machinery, and heights. Traditional training methods, like textbooks and PowerPoints, fail to engage millennial recruits who prefer dynamic, interactive content. Our mission was to create a zero-risk, immersive experience that prepares new hires to navigate the facility, understand the production process, and recognise key equipment.

Our goal was to break down complex training into digestible modules, ensuring recruits build foundational knowledge step-by-step without feeling overwhelmed.

Key solutions

  1. 3D Environment orientation

    • Interactive hotspots & locations: Clickable location circles with pulsing blue lines guide users through the space. Hotspots reveal equipment details and training content via modals.

    • Visual equipment search: A sticky toolbar with floor navigation and location previews helps users find and familiarise themselves with equipment.

    • Multi-level interactive floorplans: Custom illustrated maps and interactive hotspots for detailed navigation and equipment identification.

    • Live radar orientation: A radar UI shows users’ positions and orientations within the facility.

  2. Learning about complex equipment

    • Multi-sensory learning: Hotspot interactions open modals with bite-sized content, including text, videos, images, and 3D animated diagrams, explaining the internal workings and related systems of the equipment.

  3. Replicating in-person guided training

    • Guided learning tour: Audio tours lead users through the facility, explaining equipment and systems, enhancing orientation and understanding.

  4. Web and VR delivery

    • Virtual reality mode: Full-screen and VR modes enrich the interactive learning experience, making navigation and equipment understanding seamless.

Technology stack

  • We leveraged the latest technologies for this project, including Three.js and the Svelte framework, along with WebGL, DeviceMotionAPI, and WebXR, to create a fully immersive VR experience compatible with both mobile and desktop devices.

Project highlights:

  • 57 Explorable Locations

  • 6 Audio Tours

Need help with a 3D/VR training experience?

We thrive on technical challenges. Get in touch to see how we can elevate your training solutions.

___

Visit our website

Email us [email protected]

Stay updated at

Linkedin | Dribbble

Full Clarity
UX | Product design | App development

More by Full Clarity

View profile