A participant in the experience alongside some UI Images

experiential vr

cisco cx Mission Possible

2019

CLIENT

AGENCY

The Cisco CX Mission Possible VR experience took place at the Cisco CX conference in San Francisco. The experience was intended to showcase the outstanding customer support of the company through a series of VR puzzles that allowed the participant to progress whilst being helped by one of the Cisco experts.

This wasn’t your average VR experience though, on one side you have the participant with a HTC Vive headset on as they stand in front of a bespoke desk containing dials, buttons & a cube they’re able to interact with. Whilst on the other you have a Cisco CX representative who’s guiding them through the level from a 16:9 screen and a headset on the opposite side of the room.

If that wasn’t enough, both people weren’t seeing the same thing so teamwork, skill & knowledge were the key elements to guide users to success in this experience. Furthermore, having two installations side by side allowed for a competitive twist as participants racked up points to come out on top.

Initial flow

In mapping out the overall experience, we had to split it up into user types in which there were three; User (Participant), Support (CX Expert) & Spectator (the audience). From here we can map out all three journeys at once to understand how they will be reacting and working with each other.

The purpose of the participant - at least at the beginning of the project - was to gain interest of passers by (spectators) in the hope that they will line up to register and take part, however this changed due to the location of the booth.

In the flow you can see how the support & users have similar journeys in that they are sharing the experience in different ways. It’s worth noting that the games themselves weren’t defined at this point and were actually better defined once the infrastructure of the flow, hardware & fabricator was already established.

A photo from the event of participants taking part in the experience

installation

There were two parts to the experience.
‍
The first was a 16:9 interactive screen that the Cisco Experts were able to use to interact with by tapping the screen at various points they were able to release up to three clues to help the participant if they were struggling to complete the puzzle.
‍
‍
The second part was the bespoke desk where participants would not only be in VR, but they’d also be interacting with the buttons, dials & the cube at various stages of the experience.
‍
Above is the concept of the desk - accounting for wheelchair users - next to the physical implementation at the actual event. It was a pretty close match with some tweaks made to the cube positioning due to logistical purposes.

dashboard

For the VR side there wasn’t much UI to design as a lot of the puzzles mainly involved 3D objects, however, the challenge came in the form of creating a dashboard for the Cisco CX expert to not only interact with, but oversee what the user is doing in an abstract manner.
‍
The reason each section needed to be abstract was so that spectators wouldn’t know what was going on if they were looking at the screen, although it was still important the CX expert could understand what was happening.
‍
The first thing I did was assign blocks to the interface highlighting their purpose & level of importance. In the red / orange areas are elements that were more of a gimmick or non-interactive such as health stats, wave form, tech feed & the avatar face which is a scanned image of the participants face and puts them on the large back screen. The purple block is a secondary interaction where experts can control the in-game camera views, whilst the green areas are the main interactive areas. These areas were actually fairly different in the final build as the only interactive area was the menu button.
‍
Using this as a guide allowed me to frame the subsequent puzzles and roughly map out how they will work so that I can design better when it comes to the UI. You’ll also notice in the final dashboard there are actually two sides that have a lot of non-interactive elements, and in addition there’s a progress bar along the top to show how far through the experience the user is. All this is intended to be communicated via the expert to the participant.

The design for the initialisation state for the CX expert dashboard

Styling

The visual design was heavily inspired by Cisco Spark which utilises bright colours against various light greys which became the foundation of the dashboard in particular. This was important because of the dark lighting at the event can mean super harsh contrasts if the colours are pure white, so light greys were the way to go.

I worked closely with a motion graphics artist to mimic the movement, look & feel for the loading states and used their primary colour palette to create small UI elements to be used on the dashboard tracker as well as in-game notifications.

By taking all of these pieces I was able to create visual interest around the dashboard without creating too much clutter and ensuring that the colours and elements used were designed with purpose.

A collection of references of the Cisco Spark branding

An animation of moving shapes inspired by Cisco Spark

A sheet of design elements used across the experience

puzzle 1: create the network

The first puzzle tasked the user with using the dials on the desk to rotate shapes onto the pedestals in the 3D world. These shapes were broken up pieces of icons with different combinations mapped to each of the three dials, so the user had to orientate the dials in the perfect position so that each shape would come together on each of the pedestals.

To show this visually, I chose to design an isometric diagram that would have three levels; each level corresponds to a different dial and the closest the dial is rotated to the correct position, the more that level evolves and expands. All three levels need to reach maximum expansion for the game to complete. Remember, the user isn’t seeing this, the CX expert is, so they need to communicate how close they are to having the dial in the correct position.

The game 1 UI for the CX Expert dashboard

puzzle 2: activate the network

The second game involved the cube in the middle of the desk; in VR 6 panels were displayed in front of the player and each panel represented a face on the cube. Each face consisted of shapes and a faint path leading from one edge to the other. Players had to match up these shapes by picking up the cube, rotating it and touch the side of the cube to the panel to attach it with the main goal to create a joining path around the cube.
‍
The CX Expert needed to help the player place the correct face on the cube by describing what's on the current face such as the shapes, the colours and their position. Experts could rotate the cube on their screen to see whether they'd applied it to the wrong side, and an extra piece of UI was displayed along the bottom connecting the path when the player matched the correct face.

The game 2 UI for the CX Expert dashboard

puzzle 3: repair the network

The final game raised four platforms in the VR world and each platform became tethered to the players hub. On the remaining buttons on the desk there are four icons hovering on each button; a bolt, a bug, a cloud and a key. When the game begins these icons start travelling down the tether and the user must press the corresponding button in order to succeed. The twist is that the shapes all look the same to the player and it’s up to the expert to communicate what button to press and the direction in which they’re coming.

On the design each platform represents each of the in-game platforms and an icon is displayed on top of each of them; this shows which icon is next in line to travel down the tether. At the bottom where the lines meet represents the location of the player and their current orientation.

The game 3 UI for the CX Expert dashboard