Website powered by

Mixed Reality UI - Multiplayer Robots game with Magic Leap

This UI work has been created for a Magic Leap app briefly released to the public before the COVID-19 pandemic started. It is a local multiplayer game played within a specifically designed set displayed in a shopping center, which unfortunately closed one week after the launch.

You play with up to 5 friends in a room, wearing a Magic Leap headset (a mixed reality headset) and controlling a robot you have designed with a joystick and a button built into a table. The session lasts about 5mn, during which you are immersed in a robot-training simulation: your goal is to save a virtual city by extinguishing fire, saving citizens or repairing the buildings.

The entire UX flow and UI design have been made by myself, with Illustrator, Unity and the opinion of the game designer and programmers. I established the visual direction, designed the assets, integrated them in Unity's canvases and animated them with Unity's animation components in a matter of weeks.

Interface to guide the player through building their robot; they select the parts by using a joystick built into the table in front of them. The main challenge in XR is to take into account the 3D and physical space, as well as the absence of screen.

Interface to guide the player through building their robot; they select the parts by using a joystick built into the table in front of them. The main challenge in XR is to take into account the 3D and physical space, as well as the absence of screen.

Interface to guide the player through building their robot; they select the parts by using a joystick built into the table in front of them.
Recorded in Magic Leap.

Tutorial printed on the walls at the entrance of the experience; the session being only ~5mn long, we needed the players to understand as quickly and easily as possible what the game is about.

Tutorial printed on the walls at the entrance of the experience; the session being only ~5mn long, we needed the players to understand as quickly and easily as possible what the game is about.

Tutorial animated and recorded in Unity. I was looking for an accessible and clear way to explain to the players how to play the robot they choose, so I made this animation, which clips are triggered by code following player's actions.

HUD designed in Illustrator and animated in Unity showing the different states of "ammo" of the robots: power in use, reloading, empty, loaded, etc. The fill of the circles is static here but in game is changed with the code.

Leaderboard screen designed in Illustrator and implemented in Unity canvas, displayed at the end of the game.

Leaderboard screen designed in Illustrator and implemented in Unity canvas, displayed at the end of the game.

Example of UX flow to propose different ways the UI could look like throughout the experience, designed and shared with the team in Miro. [Note: the image is low-resolution, as I'm intending to show the structure rather than the content.]

Example of UX flow to propose different ways the UI could look like throughout the experience, designed and shared with the team in Miro. [Note: the image is low-resolution, as I'm intending to show the structure rather than the content.]