Redesigning the app bar

Prototype made in Figma

Illustrations for controller button mappings

Controller mapping on the documentation webpage

VR locomotion system

Parabolic teleport laser with playspace and sensor visualizations

Design problems
1. Straight teleport laser - The user could not teleport to a surface higher than their hand could reach. The user would also accidentally end up teleporting very large distance and lose spatial context.
2. Loss in tracking - Oculus users would turn away from the optical sensors in the real world and lose tracking. They also do not have context about their position in the real world with respect to the virtual play space area. This can lead to injuries where the user can bump into real world objects.

1. Parabolic laser
2. Playspace and sensor visualization

Dynamic avatar capsule fitting to determine teleportability
Dynamic avatar capsule fitting to determine teleportability
Rendering playspace visuals in front when occluded to signify teleportability
Rendering playspace visuals in front when occluded to signify teleportability

The play space area assets were rendered in front of the occluding object to indicate to the user where they are teleporting. The teleportation laser goes into "cannot teleport" state if the surface is steep enough where the user would start slipping or the user would collide with the environment if they teleport there.

Different states of teleportation visuals

Teleport transitions

Observer sees an avatar smoothly move across the space when they teleport

When a user teleports in the virtual world, currently the transition for an observer is very abrupt. The user is at the original spot in one frame and the destination spot in the next frame. We wanted to make this transition smoother so that the observer can track the movement of all the avatars in the world. We tried using a particle trail to represent the user moving through space, but this added visual noise and abstracted the avatar representation which was undesirable. Doug Wilcox, our animator created the animation of anticipation, transition and landing states to solve this problem.

Credit: Doug Wilcox

Designing the loading experience

Storyboard for the loading experience of the user in VR and desktop

Different states of the loading banner when going from one virtual world to the other

Avatar management app
Users can create bookmarks for their favorite outfits and quickly wear them when needed. The app also provide accessory customization options and avatar settings.

360 Camera App
Social VR platforms need to have high-quality, experience capture tools. There is a unique opportunity to allow the users to record highlights of their experience and share them with their friends. We wanted the user to be able to capture 360 degree photos in addition to the regular image capture mode. I designed the interaction and visuals for the app. We used a 3D model of a camera that the user can place in the environment and control remotely through the tablet app.

Social shopping in VR
We set out to create an experience similar to shopping with friends in the virtual world. Explorations included bringing in a pair of people and conducting user research about social adjustment of accessories. I designed the 3-step experience of selection, adjustment and checkout of accessories for your avatar. The environment design was done by Alan Zimmerman and 3D modeling of accessories was done by Jimi Yuom in collaboration with freelance 3D artists. I also designed the tablet checkout experience that allowed the user to buy these avatar accessories using High Fidelity Coin (HFC), a blockchain based stable cryptocurrency.

Marketplace for virtual goods
I designed the marketplace user flow and inventory app that allows the user to buy five categories of items using High Fidelity Coin (HFC). The five categories of items are: avatars, apps, wearables, content sets, entities.

Wireframe of purchasing an app from the marketplace

Screen states for a user purchasing a virtual item from the marketplace

Visual design spec for developers in Figma

Wallet and Inventory apps were initially separate but were later combined to get High Fidelity on the Oculus store. You will notice that there are two different visual languages in the UI, this was the result of moving fast to get High Fidelity on the app store, and keep the design changes to a minimum.

V1 of the Inventory app

V2 of the Inventory app where it was merged into the Wallet app

Back to Top