Galen Drew
annotation.png

VR Collab UI

Unity Prototyping, UI, UX, Visual Design

 This VR Collaboration prototype was built by  8ninths  with me leading design. The premise was to create a space where multiple users could join up in a real environment captured through a process called  photogrammetry . Within this space users could interact with annotations left around the space, each able to alter an element of the space to previsualize interior design or change the architecture of the space. 

This VR Collaboration prototype was built by 8ninths with me leading design. The premise was to create a space where multiple users could join up in a real environment captured through a process called photogrammetry. Within this space users could interact with annotations left around the space, each able to alter an element of the space to previsualize interior design or change the architecture of the space. 

Hallmark Store: Retail Experience

In this case we used a capture of a Hallmark store that could really use some updating to demonstrate the usage of this tool. This video explores 3 types of annotations; adding a model to the space, altering a texture of the space, and altering the model of the space. We also explored voice annotations and more robust visualizations for a few unnamed clients. 

Annotations

Annotations

The annotations are the core of the experience. They are meant to act like a traditional web comment but take up 3D space. Because of this I opted for a design that incorporated web style layout (for the comfort and familiarity of the user) with abstractions of physical materials (to make the annotation feel more like a real object). They are meant to look like a pane of content sandwiched between two panes of frosted glass.

 Let's dive into the material idea more. The ultimate goal of translating an annotation this way was to conceptualize how a comment might look in real life. Due to the necessary scale of the comment I ended up using the effect of frosted glass, this way the user can still see through the annotation, keeping the space feeling open, while also giving the effect of physicality. I also employed a few unity tricks to get the middle layer of content to always render above the front layer, yet let the front layer obscure the background. This gave a nice parallax relationship to the panes of glass and content to make them feel volumetric while still being readible. 

Let's dive into the material idea more. The ultimate goal of translating an annotation this way was to conceptualize how a comment might look in real life. Due to the necessary scale of the comment I ended up using the effect of frosted glass, this way the user can still see through the annotation, keeping the space feeling open, while also giving the effect of physicality. I also employed a few unity tricks to get the middle layer of content to always render above the front layer, yet let the front layer obscure the background. This gave a nice parallax relationship to the panes of glass and content to make them feel volumetric while still being readible. 

Iconography

Iconography

The iconography of the app was based on traditional web conventions as well, taken into 3D. The icons were also designed to be easily visible from across a room in VR so that users could quickly identify interaction areas. 

 The above icons are the ones used in the application, which have a slight bob to them to add to visibility as well as a  fresnel  shader to give them the sense of being physical bubbles containing the icons. Ultimately I would have switched these to a more abstracted, readable form. They ended up being functional, but not as visible as we had hoped due to the transparency in the fresnel shader and the fact that the icons were not recognizable from all directions. 

The above icons are the ones used in the application, which have a slight bob to them to add to visibility as well as a fresnel shader to give them the sense of being physical bubbles containing the icons. Ultimately I would have switched these to a more abstracted, readable form. They ended up being functional, but not as visible as we had hoped due to the transparency in the fresnel shader and the fact that the icons were not recognizable from all directions. 

 What I would opted for had we another pass at the app, was a series of clean icons that were flat panes that billboard to the user's head position, as illustrated above. This would provide a consistent and readable experience from most distances.

What I would opted for had we another pass at the app, was a series of clean icons that were flat panes that billboard to the user's head position, as illustrated above. This would provide a consistent and readable experience from most distances.