Design rounds make the world go round — XR Design/Devlog

Samuel Tate
The PHORIA Project
Published in
5 min readJul 27, 2020

This year the PHORIA XR team developed the app that delivered the latest PHORIA stereo 180 project, ‘ecosphere’.

‘ecosphere’ is a VR nature documentary that uses world first cameras to shoot at 60 frames per second. We knew we had a big responsibility to do this content justice, creating context to guide the user into these experiences.

Initial mock ups by our creative director Ray

Design considerations

We started with the basic template of the video player that dynamically loaded from tiles. We’d already created a few custom video player apps, and learnt a responsive front end made it possible to update content on the fly. Then we decided to have some fun with it. What if the tiles were volumetric, becoming portals that opened up, or even spilled out into the users world?

Initial concepts. Be careful what you draw …
… because you’ll have to make it.

Know when to fold ‘em

Our idea was that the tile should expand into a portal and blend one reality with another — but what we found was that the ‘realistic style’ just didn’t actually feel that good at human scale. We couldn’t cross the uncanny valley. After receiving feedback that the users just didn’t connect with the environment, we changed tack. Despite the fact that we’d taken the idea pretty far, we decided it was time to go back to the drawing board.

Wait until people go wow

We spent a week or so playing around with a tonne of different art styles and compositions. No holds barred experiment city. We were building out cartoon words, electro-tron worlds. We were putting monkeys and elephants every which way. Then all of a sudden we stumbled into Narnia.

The breakthrough moment was when we tried taking our previous environment and making it ‘miniature’. Everyone we showed immediately had a smile on their face or reached out longingly. The ‘wow’ moment. It worked because the size added a layer of abstraction, so while it was semi realistic it wasn’t judged as harshly. Plus people just love miniatures.

Look at that tiny monkey.

From here we started developing the idea of the ‘platform’ — a 3D space that would anchor the user, and also be the source of the content. We had this idea of ‘matter’ being generated by (and maybe also being the source of) the platform.

Mock ups and finished product from the design team

This matter acted as a great anchor to then play around with 2D/3D UI paradigms. What we realised is that we really had mocked up the future of desktop, where we were combining a 3D ‘workspace’ with a 2D ‘display space’.

From nothin’ to somethin’.

We realised that by miniaturising we could actually use the home planet geometry as the control panel. Then by making room for 2D content alongside it we could leverage all the incredible stills and film from the shoot. The ‘desktop’ of the future might end up with some combination of proximate 3D interactive zones and 2D displays in this way.

Initially the ‘interaction layer’ was in the foreground, with static content in the background. However, we realised that having the action and content in the same space was easier to parse. This process sped up when design and development sat together and quickly prototyped the compositions, and iterated. We made more progress in a day than we had in the weeks prior!

Doing the art justice

With this concept in place, we knew now that we could be more detailed and ambitious with our ‘terrariums’ as we started calling them. Our artists worked with the content team to create worlds that were visually compelling, and matched the native flora and fauna with each featured location in the series. We also had the chance to bring in native animals. When they were tiny they were just so cute!

More concept art from Cindy our amazing artist!
Look at these tiny fish! They’re just like in the picture — Cindy is a wizard.

Bringing it together

It was a big task to get all these disparate elements to come together. Here we had the idea of a spark of ‘matter’ — a spirit guide through the experience, that also seemed to construct things. It would lead the users gaze and actually build and deconstruct each element like a 3D printer. It was a hint of sci-fi and a hint of magic, and it acted as the golden thread throughout it all. For this we actually repurposed the compute shader we’d used for the initial portal concept. Waste not, want not!

For the final front end we used a reactive framework, where every object listened to user selections and took actions independently. This made it really easy to integrate and add new art, while also creating a port to the GO version with lighter shaders. All the metadata for each episode, including preview content, is actually held in DLC and reconstructed at runtime. This means that in the future we can add new content. All the content needs is a GPS coordinate it’ll add itself to the globe!

Final reflections

The thing that we really learnt was how far you can push an experience if you have a clear design ethos in mind. We wanted to create a gradient of detail that would take people from 3D to stereo. We knew we needed 3D content that supported and guided the user into the video content. With these north stars we pushed and didn’t settle, and we were all so happy with the final result.

With ‘ecosphere’ we have a truly engaging platform where people can visit and experience stories of the world. We have a whole suite of behind the scenes and additional footage that users will soon be able to unlock. We hope that as we release new episodes, we find new ways to connect people with our beautiful earth, and the stories of those preserving it.

Make sure you go try it out on Go or Quest, and as homework, see how fast you can get the world to spin!