Health and Score UI

WebXR work for Atmos, a US-based start-up (California, San Francisco).

Once I completed the ATMOS world editor UI, we started working on some new features.

So my next task was to design the HEALTH AND SCORE UI panels for an XR shooting mini-game that users would be able to play either in PvP (player vs player) or SinglePlayer mode.

For this task, I worked on:

• Designing UI elements and layouts
• Coding WebXR prototypes to review, test and validate the designs in VR mode

The Making Of

Lo-Fi Wireframes

As a first step, I created lo-fi wireframes to represent the actual plane primitives (the ones below in light-grey color) that would use textures to render the immersive UI's custom design in the subsequent iterations.

From left to right, the images below show the HEALTH AND SCORE UI layouts for the PvP and the SinglePlayer modes.

Hi-Fi Mockups

Once we validated the UI layouts, I moved on to creating static mockups to present and validate the requested sci-fi look-and-feel we implemented in the ATMOS world editor.

The images below show the wireframes/plane primitives and the designed graphic elements to render as textures.

HEALTH AND SCORE UI panel (PvP)

HEALTH AND SCORE UI panels (SinglePlayer)

WebXR Prototypes

I finally created WebXR prototypes to review, test and validate the responsiveness of the health bar, the score updates and the overall design the UI panels.

The videos below show the interactions between fictional players/enemies for both the mini-game modes.

HEALTH AND SCORE UI panel (PvP)

HEALTH AND SCORE UI panels (SinglePlayer)

Implemented Designs

The images below show the ATMOS world editor UI implementing the completed HEALTH AND SCORE UI panels matching the custom design and sci-fi look-and-feel.

HEALTH AND SCORE UI panel (PvP)

HEALTH AND SCORE UI panels (SinglePlayer)