Network Team Challenge

VR and Tablet App Design

The purpose of this virtual reality experience is to educate the client's employees across the global offices on how the payment system works. This multi-player, fast paced, memory game, focuses on verbal communication to simulate network complexity and visually represent the client's four party model. Only one player is in a Vive headset and the rest of the teammates solve the problems on the iPad.

Role: VR App UI
Tablet UI Design
Art Direction for VR & Tablet app
Project Launch: July 2017
Software: Sketch, Photoshop
Hardware: HTC Vive, iPad
Project Duration: 2 Months

iPad App Design

Tutorial screens — iconography matches the brand
iPad player lobby screen — based on game lobby design
Symbol library — each tablet displays a different set
Question and correct answer screen

VR UI Design

WebVR prototype created with AFRAME. Click to play.

In the 3D world, the VR player is standing on a hexagonal platform that visually represents a large scale network wire. At each point of the platform, there is a beam rail that the user needs to interact with. There are five positive blue rails and one negative magenta one for fraudulent transactions. As transactions are constantly beamed into the scene, the user will pull the trigger of a single Vive controller to select and place transactions.

6 rails around each side of the platform
Fraudulent and correct rail designs

The VR player must grab transactions (glowing cylinders that descend from the sky) and put it in the correct rail with the rail number provided from the iPad players.

Symbol "7 in a circle" being placed in the correct rail

While in VR, it's important to induce a bit of familiarity with real world experiences and interactions. For instance, when a transaction is placed in a positive rail, it will beam up as if it was placed in a pneumatic tube. Whereas if the transaction is placed in a negative rail, it will disintegrate like it was placed in a furnace. There's also a digital countdown that displays the remaining time that the user has in order to complete as many challenges as possible.

Timer text is large, has contrast, is placed on a panel for legibility
Timer positioned at user's hips and mostly visible when looking at rail.

Visual indicators in the environment and spatial audio effects make it clear to the VR player when they don't place transactions in the correct rail. As the in-game timer runs out, the challenge increases as more transactions appear. In order to receive a higher score, users can solve multiple questions with proper teamwork and communication.

Magenta ring animates when transaction is placed in the wrong rail
Multiple transactions appear in space

Prev / Home / Next