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

Final Designs

This first image shows the custom design for the PvP HEALTH AND SCORE UI panel matching the sci-fi look-and-feel.

This other image, instead, shows the HEALTH AND SCORE UI for the SinglePlayer mode.

When the users starts the game, the enemy's UI panel is displayed above its own 3D model and follows its position.

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)

Contact Info

Scotland, UK
Edinburgh
+44 7802 321045
contact@thedart76.com

Get in Touch