UX/UI design, user flow, wireframing
The Hazard Factory is developing a VR learning platform for safety training. In a single session, multiple roles work together, each with their own tasks and screens. Studio Fox redesigned the workflow and interface so that the platform feels intuitive for each role and provides the team with a clear foundation on which to build.
We started by defining user roles that form the basis for all decisions within the platform. Administrator, instructor, host, moderator and participant were each assigned their own workflow and responsibilities for setup, live support, monitoring and results. This ensures that the platform does not display everything to everyone, but only what is relevant at that moment.
As this is a live experience, the UX revolves around timing and collaboration. We determined when status updates, alerts and feedback prompts appear, who can intervene, and how progress remains visible without disrupting the session. That framework formed the basis for the wireframes and the prototype.
Based on scenarios, we developed wireframes for the core workflows, from creating and scheduling training sessions to live moderation and follow-up. We streamlined dashboards, lists, detail pages and configuration screens so that users can quickly see where they are and what the next step is.
In addition to wireframes and UI, we delivered a comprehensive Figma design system featuring design foundations and reusable components. Colours, typography, icons, input fields, tabs and buttons have been fully defined so that the development team can build and iterate consistently without having to redesign everything from scratch each time.
In the prototype, we established clear patterns for status overviews, role-based actions, notifications and feedback moments. This ensures that the experience remains consistent across modules, even when scenarios or content change.
During a training session, the interface must adapt to the flow of the session. Trainers need to be able to start, pause and make adjustments quickly, whilst participants progress through the steps without any distractions. This clear separation of roles makes the platform feel predictable, even in a live setting.
The interface clearly shows what still needs to be done, where feedback is expected and where results can be found. This reduces stress during the session and makes follow-up afterwards easier.
Approach & result
This process resulted in a clear UX framework, wireframes, a UI prototype and a design system. The outcome is a platform experience that is tailored to each role, supports collaboration and served as a starting point for further iterations during development.
Next case
AssessmentQ is a platform for digital exams and assessments. Studio Fox developed the initial creative concept for a new web design, serving as the basis for a phased revamp of the site with a fresher layout and improved structure.