A Virtual Reality Advertising Experience

  • Client: Senior Project
  • Role: Three.js Development & UX Design
  • Timeline: 3 months, 2014

About the Project

What if there was a more engaging way to reach consumers that would increase brand awareness. Combining experimental browser-based 3D and Interaction Design to create engaging advertisement. There has been some exploration into VR advertisements with the a VR headset such as oculus but that requires consumers to either own a VR headset or to go to a physical location. With my solution I wanted to create a phone based VR that is accessible to everyone, wherever they are. I also wanted to think about moving from a Graphical User Interface to a Natural User Interface.


These are my initial sketches, I was trying not to erase and to let things overlap to help creativity. I sketched the scene, some interactions, feelings, and descriptions.


Working through the workflow to create an easy and natural way for user to flow through the application. As well as help me visualize the application.


With the Interaction model I was trying to figure out a natural way that the user can interact with the content within the application.

  • Navigation that allows the user see the world.

  • Move phone towards the pillar you are looking at to move closer, pull phone away to exit.

  • Navigation that allows the user to navigate around the pillar.

  • Wave your phone back and fourth over the Fire pillar to activate it.

  • Blow on your phone on the Air pillar to activate it.

  • Shake phone on the Earth pillar to activate it.

  • Tip your phone over on the Water pillar to activate it.

  • Drag shoe to rotate the shoe in 3D.

  • Two finger Expand on the shoe to enter exploded view.

  • Click on a piece of a shoe to see more information about that piece.


This demo is a work in progress but it shows the scene working on a mobile phone as well as some animations. I still want to take this farther and try to incorporate the gestures and pillar interaction. Make sure you try this with a Chrome browser and turn up your sound.

Open this link on your smart phone or tablet chrome browser: http://goo.gl/ZGJv1e

Final Thoughts

I'm really excited to keep moving forward with this project. I learned quite a lot about Natural User Interfaces, Interactions, thinking deeply about design and the design workflow, as well as developing with wegGL. I had a lot of problems I had to overcome on both the design and development side but thinking through my problems made me a better designer and developer. My final take away is that I highly suggest everyone try something they have never done before, it might just turn out awesome.