Immersive Prototyping for VR

Three low-cost ways to test your VR experiences early and often with little to no development cost.

As designers, we all know the value of prototyping. Whether it be rough or high fidelity, coming to a client with a tangible thing helps to test the limits of your design, as well as inspire the meaningful conversation that drives great design forward. As Parade began work on a VR application last month, I struggled with how to bring our designs to life in a 3D space, with limited knowledge of code. What I needed were some low-fidelity ways of testing out environment directions, UI placement, basic interactions and motion in a 3D space.

Like any savvy millennial, I took my questions to the internet. A quick Google search turned up loads of resources for prototyping in VR. Though there are tons of articles and toolkits for creating realistic experiences using Unity, Java, and other code-based platforms, the freshness of the medium means there is very little in the way of approachable, non-code based tools. Since we don’t have an onsite development team, that limited quite a few of my options. After testing out quite a few tools, and techniques, the following are three low cost ways we’ve found invaluable in testing and communicating our design ideas to our clients and development teams.

Sketching and Storyboarding

Traditional UI sketches paired with schematic drawings help to communicate placement in the 3D environment.

Sketching and storyboarding have been great tools for quickly getting our ideas down and explaining our concepts to clients. Schematic sketches, in tangent with 2D mock-ups are also incredibly helpful in detailing UI placement within the VR environment.

Pros

  • Quick, cheap, and within our toolbox
  • Designs are not limited by knowledge or capabilities of a prototyping tool
  • Low-fidelity, great for early testing of concepts and ideas

Cons

  • Non-interactive
  • Low-fidelity

Equirectangular Mockups

Projecting this image in a VR Photo viewer helps to give you a sense of how your designs will feel in a 3D space.

For those of you who are not familiar with equirectangular images, they are essentially a 2D map of the surface of a 3D sphere. You’ve probably seen this in the form of 360˚ images, which are created using panoramic photography. Since they are 2D, you can layer UI elements on top of them, and when the image is projected using a 3D viewing application, it gives the illusion of a 360˚ environment. There are lots of templates for creating equirectangular mock-ups. These usually require that you then upload them to a unity project and view them through an Oculus or Vive. Instead, we saved them out as images, and viewed them through free Cardboard and Daydream VR media viewer apps.

Pros

  • This gives a realistic sense for how the UI will sit in a 3D environment
  • It’s higher fidelity than sketching, as you create 2D mockups and comps in Sketch, Photoshop or whatever you usually use, then project them in 3D.

Cons

  • Still no interactivity
  • Creating your own equirectangular environments can be a challenging mental exercise in perspective

Framer VR Prototypes

Interactive VR prototyping example created using Framer JS. https://framer.cloud/ajkWL

With the creation of an amazing VR component for framer, it’s relatively simple to create 360˚ VR prototypes. For detailed instructions on how to do this, check out this great Medium post by Sophie Rahier. You can’t project these into a headset yet, but they are still great for getting clarity on how your designs will feel in a 3D space.

Pros

  • Relatively quick and easy if you’re familiar with Framer
  • Great for testing out interactive motion and animations in a 3D environment

Cons

  • The component is fairly buggy, and has some strange quirks that always seem to appear when clients are around
  • A lot of the framer modules and functionality are a little more complicated to work with when using the component, if they work at all

Learnings and Takeaways

After experimenting with these methods of prototyping over the last few weeks, we’ve had a few key takeaways and learnings about VR that may help if your thinking about creating your own VR prototypes:

Think carefully about the environment

In the real world, our environment greatly impacts our mood, and sense of of well being. For example, riding on a warm, crowded bus might leave us feeling stressed or anxious, due to the heat, confined space and close proximity to others. The same goes for virtual spaces, and as designers we should be keenly aware of this. Large open spaces or voids can leave users feeling scared or hopeless, even possibly triggering fear in some, while tight confined spaces can be equally anxiety inducing. It’s important to think carefully about how the environmental elements that we design will impact our users emotions and fears, and be sure to include elements that help ground the user and make them feel safe to explore the world we create.

Be mindful with motion

Our bodies are trained to recognize the separation between mental and physical movement as a sign of poisoning. Meaning, when things move in our mind, but our body doesn’t feel this motion, this signals our brain that we’ve been poisoned, and triggers purging, also called motion sickness. While this may help us to survive, it has implications when designing for virtual reality. Quick or sudden movements in the VR space can trigger motion sickness, which some people are more sensitive to. It’s important for us to keep this in mind, and limit motion to that which aids the users understanding what is going on around them.

Use whatever helps communicate your idea

Since the medium is new, and the number of accessible tools is still very limited, use whatever you have to illustrate your ideas without getting lost in the technology. It can be easy to try and dive into a new tool or coding language to try and create a higher fidelity more polished prototype, but at the end of the day if you’re limited by that tool or your knowledge of the tool, it may not be the best thing for getting your point across. Use whatever combination of sketching, rendering, or animating helps to build and communicate your vision, and remember it’s just a prototype.


Prototyping Resources:

Equirectangular Resources:

Framer JS Resources: