PW-Protected Frame UI

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

As part of the continuous development of the FRAME WebXR platform, we implemented a feature to allow users to restrict access to a Frame by setting password protection.

For this task, I worked on:

• Designing the layout of the new PW-PROTECTED FRAME UI panel
• Restyling a placeholder WebXR UI by editing the code in Babylon.js
• Adjusting the size and position of the virtual keyboard
• Reviewing, testing and validating the implemented design in desktop and VR modes

The Making Of

Original Version

To start testing the new password-protection feature one of my teammates created a placeholder WebXR UI panel.

Static Mockup

Once they got the password-protection feature working, I moved on to designing the UI layout.

The hi-fi mockup below shows the restyling of the placeholder WebXR UI.

Implemented Design

Coded version of the PW-PROTECTED FRAME UI panel.