VR App

Joshua Bell VR

2017

CLIENT

Sony PlayStation

In my role at Sony PlayStation’s Immersive Technology Group, I was tasked to create the User Interface for the 360 Virtual Reality music experience, Joshua Bell VR.

The app is a 360 degree, stereoscopic 3D, VR video experience for PlayStationVR in which world-famous violinist, Joshua Bell, plays Brahms Hungarian Dance №1 alongside pianist, Sam Haywood.

The VR video experience uses innovative techniques to give the user an incredibly immersive front row seat to watch the performance and features positional tracking & impressively sharp visuals.

The project won a 2017 Lumiere Award for Best VR Music Experience and gained critical acclaim as one of the more premium, passive experiences on PlayStation VR.

Simple Flow

To ensure that the content was loaded in time, we began loading the experience from the very activation of the app through the initial loading screen to the main menu. The flow established a simple navigation through the options presented at the main menu — play & credits — and detailing general placement of elements and fades to and from black/white.

Some animated loading icons for the experience

Loading Animation Icons

Although we begin loading the video in the background from the very beginning, it was still possible that the video could still be loading when the viewer reached the main menu.

To accommodate for this, we decided to add an additional screen which would show an animated loading icon and some text revealing the location and date that the video was shot.

For the loading icon I created a few different designs to capture a classic yet sleek feel, while including both instruments included in the experience itself — piano and violin.

Styling

As a starting point to get an idea of the look and feel for the UI and overall branding for Joshua Bell VR I actually began in Unity, testing out various “scenes” and “sets” that I thought might be an interesting space to see within VR. The biggest obstacle in this regard was not making it too simple, while not making it too dramatic in which it would overshadow the main experience. We had to understand that viewers weren’t here for the menus, and when designing in VR it’s hard not to want to utilise that medium to the maximum.

From moving abstract shapes, to a piano and violin on a wooden floor, we landed on a simple design using 2D image planes that reflected both the classical aspect of the music genre and the more contemporary medium of VR. The design contained — quite simply — the title of the piece, the performers and the buttons that would activate the two routes the user could take. It began very simple, then gradually transitioned into a more Art Deco-inspired design with asymmetrical shapes and layout.

Although a sans serif font can look better, a serif font was chosen due to the thicker lines which make it much easier to read at greater distances and smaller sizes.

Menu Design Elements

I created art deco elements to construct the design for the main menu and these designs influenced the design of the main command buttons — cross, square and circle. Originally the goal was to present the button symbol alongside an icon, however, the discrepancy in size created imbalance when the designs were placed together.

I decided to scrap the icon and include text alongside the command button to prioritise the clarity of their meaning. Additionally, to encourage pattern recognition I ensured the button symbol colours reflected those of the physical buttons the controller.

The final designs had to be translated into 23 different languages for localisation purposes. As we couldn’t simply hand over the PSD’s to the localisation team, I had the task of re-creating all the buttons and the main menu graphic to match the correct language — it’s the price you pay for choosing image files over text!

The environment was also accompanied with musical notes that would float around the user to give a deeper sense of space and create ambience.

A top-down diagram of the elements of the experience demonstrating the depth in VR

Placing Elements in VR

I kept all elements within a metre of each other and offset them in Z depth to reduce the need for the user to move or rotate their head further than necessary. Careful thought had to be taken to ensure the placement of these elements didn’t cause depth conflicts — particularly retinal rivalry — which can be common when using many elements that are close together.

Marketing

Aside from the User Interface I was also responsible for creating some of the marketing material around the project, particularly the logo of the experience and assets for the PlayStation Store. I utilised the classical feel with the art deco shapes to augment these assets to give an idea of the type of experience this is.