VUSE Alto Unboxing Augmented Reality
August 2018, New York
AR, Unity, Mobile Application
Havas Worldwide
Alto Unboxing AR is an interactive augmented reality experience designed and built for VUSE’s new Alto product launch.
My Contributions
Creative Coding
Visual and Animation Design
Interaction Design
Design Tools
Unity 3D
Vuforia Image Recognition
Cinema 4D
Project Objectives
Alto Unboxing AR app aims to create a “virtual product trial” experience that puts a virtual Alto product into the hands of consumers who are interested in learning the product before the purchase. It allows users to navigate and discover product features and benefits in multiple layers from top level product assembly, key components with the associated benefits to full operation of the product virtually in x-ray view.
Ideation
Vuse Alto is an cigarette alternative for smokers looking to switch to e-cigarettes. The product has a modern, sleek design with revolutionary heating system and long lasting battery technology to deliver smoother vapor and crisper flavor. We leverage augmented reality technology to fully reveal the product features and user benefits to in a 3D 360 degree view using a mobile interface.
Storyboard
the
Prototype & Project Building
1. User Experience Design and Project Architecture
As the lead creative technologist on this project, I designed the following user experience diagram based on the high level storyboards shown above. This diagram shows the end to end user experience flow, and it also provided an engineering view of proposed user experience to inform the Unity project structuring and application architecture decisions.
The AR experience is consisted of several different states, including InTheBox, Rest, SeeInAction, Heater, FlavorPod, MouthPiece, Battery and SmartConnect. These states are triggered by touch events.
Here is the code of “TapEventController” function, which sets the ViewState responding to the UI button that is tapped by the user.
Once a ViewState is changed from TapEventController, “ViewStateController” that’s implemented using “Singleton” design pattern, takes over the execution of subsequent programming tasks including resetting the object position, playing the object animation, updating navigation UI elements, activating particle systems and enabling rotating gesture after the animation.
2. The Visual Effects of the Key Product Components
a. Feelm Heater
The Feelm Heater is the most important component of Alto product. The revolutionary technology combines a metal film with a ceramic coil, which is a breakthrough in material and heating technology for producing smoother vapor. It also improves the safety and draws less battery.
I designed and implemented a particle system that illustrates the coil effect when it’s activated. The images below show how I transformed from the original 2D visual storyboard into the special visual effects in the AR environment to highlight the benefits of Feelm Heater.
b. Flavor Pod
This is a 1.8ml volume pod that can produce 680 puffs from the long-lasting pod. There are four flavors to explore and the ingredients include 5% pharma-grade nicotine made with nicotine salts.
Four distinctive particle systems combined with various vapor effects were created to show the differences between the four flavor choices that user can select from.
c. MouthPiece
In order to illustrate the comfort and effortless pulls of the ergonomic mouthpiece, I designed and animated three paths of air flows with two blowing along the mouthpiece smooth edges and one is flowing through the mouthpiece to the heater and the flavor pod.
d. Smart Battery
This 350 mAh smart battery is long lasting and allows user to vape a few days without charging. It leverages LSI technology to maintain a consistent draw with no performance drop off when battery runs low. In order to show the long lasting and consistent power of the Smart Battery, we decided to design and use a looping video to create a more sophisticated and realistic visual effect.
e. Quick Connect
Quick connect is an easy click & go feature that be characterized by the action of magnetic field. I created a particle system that demonstrates the benefit of using magnetic field for connection, I also designed and created an animation that simulates the easy click & go action and its secure connection.
