Network Team Challenge

VR and Tablet App Design

The purpose of this virtual reality experience is to educate this client's employees across the global offices how the payment system works. The goal is to create a fast paced, memory game that focuses on verbal communication to simulate network complexity and visually represents the four party model and fraudulent transactions.

Role: Layout Design, App UI
Project Launch: July 2017
Software: Sketch
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

In the 3D world, the VR player is standing on a hexagonal platform that is a large scale network wire. At each point of the platform, there is a rail with a beam that the user needs to interact with. There are 5 normal rails and one fraudulent rail for fraudulent transactions. As transactions are constantly beamed into the scene, the user will engage using a single controller and pulling the trigger to pick up or select a transaction.

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

Inducing a bit of familiarity with real world experiences and interactions is important in Virtual Reality. Unlike when you place the transactions in the normal rails and the transactions beam up, the fraudulent rail burns the transaction like a furnace. There's also a digital timer that displays the remaining time that the player has to complete as many transactions as possible.

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

The VR player must grab transactions (glowing cylinders that descend from the sky) and put it in the correct rail with the information provided from the mobile players. There are five correct rails, which are primarily blue, and one fraudulent rail which is magenta.

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

Visual indicators in the surrounding space helped the users understand when they didn't put the transactions in the correct rail. One of the challenges the VR player faces as the in-game time increases is the number of transactions that appear in space. Users can try to solve multiple questions with proper teamwork and communication to find more correct rail placements and receive a higher score.

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

Prev / Home / Next