Expo: Towards Rapid VR Prototyping

Jon Wade
Shopify AR/VR
Published in
5 min readOct 31, 2017

VR development is exciting, in part because of the immense, unexplored territory for creating usable, engaging, and delightful experiences. However, in these early days our ability to predict which ideas will turn into great experiences is still maturing and can often be wrong.

Whiteboard during Thread Studio production. Not ideal for VR!

Our team has experienced this faulty forecasting first-hand. We brainstorm, whiteboard and pantomime many intriguing ideas. We filter them down to what we think is most promising and invest time into building usable prototypes. The outcomes can take us by surprise. What was imagined as a sure-fire idea reared unexpected problems, while minor or gimmicky sounding features provided delights worth keeping.

Enter Expo 🎪

After several cycles of development, it became clear that getting our process into VR as early as possible was essential. This was difficult to do within the landscape of VR tooling. So, at the beginning of 2017, we began developing features for early-stage VR prototyping in a tool named “Expo.”

A standard, leg-free work day for the VR team at Shopify

Expo is an Unreal template containing starter code and assets that allows us to jump into VR within minutes of creating a new project. We can quickly produce visual representations of our ideas and perform standard VR interactions, all within a collaborative setting.

Expo Features

Marker

The core brainstorming tool in Expo is the marker. The marker affords 3-D drawing with basic customization of size and color. Once a drawing is completed it becomes a physical object in the world that can be picked up, moved, duplicated, and pinned to a player avatar.

The fundamental workflow of brainstorming in Expo: draw objects & interfaces then manipulate them naturally

Rich avatars

To explore the nuances of social VR and to express our identity, each of our team members has an avatar in Expo. The avatars support a number of expressive features. The faces include voice-driven lips and synthesized, but believable, eyebrow movement and blinking. Hands support the vocabulary of gestures provided by the Oculus Touch and we are extremely excited to incorporate the finger tracking supported by Valve’s “Knuckles” controllers when we get them.

It’s amazing how expressive our avatars are using only information from the headset & motion controllers

Wizards of Oz

Avatars can choose to turn invisible at any time while retaining the ability to manipulate objects and talk. This serves as great way to do “Wizard of Oz” prototyping. When testers interact with elements that would require logic and animation, one or more invisible agents can act out that behaviour instead.

Pay no attention to the man behind the vendo-4000!

Similar to paper prototyping and other techniques, this allows usability testers to interact with an experience closer to our intended output, but before significant development effort is spent.

Scaling

A more recent addition to Expo is the ability to dynamically scale the size of our avatars. It has a been a surprisingly useful feature for creativity. At a large scale a user can draw full rooms and spaces in an ergonomically friendly way. At a miniaturized scale small objects can be produced in fine detail. For example, one team member created a jewelry store for a brainstorming session with highly detailed rings.

Mini-Jon & Byron discuss a watch UI

The Web in VR

We have incorporated the awesome BLUI Plugin into Expo. With it we can display HTML content and browse the web from within VR. A huge benefit is the ability to bring external docs into VR, be it an issue tracker from GitHub or a user-flow script from Google Docs. The browser preserves the real-time collaboration features of these tools, allowing people outside of VR to make changes that are immediately reflected in VR.

We expect the bridge between the 2-D web and VR to create other magical results in the near future.

A whole new dimension to the web

In our experience, anything that keeps us from having to remove the VR headset is a win for development speed. We are looking forward to the recently announced Oculus Dash platform that will allow us to debug code and perform other 2-D desktop-bound tasks within the VR headset.

Session Recording

Expo’s components are built with multi-user networking in mind and leverage Unreal Engine’s network replication. As a tremendously useful by-product, we are able to take advantage of Unreal’s replay recording & playback functionality. More powerful than mere video recording, replay recording allows us replay a scene from any angle, whether from an interactive camera or from the perspective an any person (or thing!) that was a part of the scene.

Controlling playback speed, timeline location, camera position and perspective in an Expo replay

Further, we can touch-up art and sounds post-recording and replay the performance. This has been a tremendous help in creating videos, GIFs, and exemplary content to share with others, while also documenting our explorations. Because Unreal engine is a multi-platform engine, these replays can be viewed in numerous ways: in VR, in a regular 2-D window or even on mobile devices. This functionality was used to produce all the videos/images for this post!

How We Use Expo

We use Expo both as a starting point for projects and as a tool for ideation and prototyping of new ideas. The tools organically support the entire project life-time, from being the first-step creative tool during brainstorming, to annotating and communicating required changes in the final stages of a project.

For ideation, the team will often jump in a half-hour session and ponder a single aspect of the VR commerce experience. For example, “What are different ways to manage a ‘shopping cart’ in VR?” Each team member gets their own semi-private space where they can explore and build ideas in the quantity or depth they choose. When time is up, we work our way down the row letting each member of the team show-and-tell.

Brainstorming time! “How do users explore product variants?”

This process in Expo has provided benefits beyond its use as a tool. The rapid expression and exploration of ideas in VR has allowed us to more effectively communicate.

Kae showing the group an interface concept

Our explorations in Expo has lead to meaningful team bonding. Similar to ice-breaker exercises for sprints, it’s not uncommon to start a week with a VR warm-up where we goof on silly scenarios or doodle outlandish outfits and scenes for each other.

Some ideas can only be communicated using the power of VR

Start Prototyping in VR Now

We developed Expo because the tools for collaborative prototyping did not exist at the start of this year. Since then, the landscape has dramatically improved and there are many tools providing prototyping workflows with no requirement to do your own development:

  • Facebook Spaces and SteamVR Home allow teams to create quick doodles and play with props together.
  • MasterpieceVR has professional-grade sculpting tools and the critical feature of multi-user interaction.
  • Mindshow allows a single user to pantomime and record avatars and objects interacting to create shareable vignettes.

In addition to these released tools, the development of tools aimed at VR UX professionals is well under way and should surface with time and industry growth.

Our team has already experienced a great return on investment from VR prototyping that is simple, sociable, and shareable. We encourage everyone to find tools to accelerate their prototyping and make team communication faster and more fun.

Much coffee was consumed during Expo development

Have your own great prototyping and brainstorming workflows in VR? Let us know in the comments below!

--

--