Device Settings UI

WebXR work for Frame by Virbela, a US-based company (California, San Diego).

Iterating on the CONNECT/SPECTATE UI panel, we included the option for the users to change the device settings before connecting to and entering a Frame.

For this task, I worked on:

• Tweaking the spacing in the main UI panel to add the MIC/CAM SETTINGS text button
• Designing the layout of the new SETTINGS UI panel
• Styling the WebXR UI elements by editing the code in Babylon.js
• Coding the logic in Babylon.js to toggle the visibility of the two UI panels
• Reviewing, testing and validating the implemented designs in desktop and VR modes

The Making Of

Static Mockup

The hi-fi mockup below shows the design iteration on the previous version of the CONNECT/SPECTATE UI panel, which now accommodates the MIC/CAM SETTINGS text button, and the new SETTINGS UI panel.

Implemented Designs

Coded version of the updated CONNECT/SPECTATE UI panel.

Coded version of the new SETTINGS UI panel.