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

Demo Video

The video below shows the new SETTINGS UI panel accessible through the MIC/CAM SETTINGS text button.

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.

Contact Info

Scotland, UK
+44 7802 321045

Get in Touch