"You don’t need maps anymore. Just hold your phone, be immersed in the augmented wonderland, and follow the characters."

 

Speakeasy!

Personal Project | Dec 2017  

AR Development | Interaction Design | Storytelling

Tools: Unity3D, ARKit, Mixamo, Sketch, and Adobe creative suite

 

Synopsis

Augmented Guide (AR + Map) 

Since I moved to New York, mobile maps have become an essential part of my life. But sometimes, maps are boring and I still find it hard to navigate using the maps. Is there any alternative way to find routes so that I can be more engaged? What if I bring my favorite characters to life and make them into my personal attendants to guide me? "Speakeasy!" is an AR map, in which my favorite characters guide me to the closest speakeasy bar. 

 

Concept

Characters from “Alice in Wonderland” guide you to the closest *speakeasy, which is a secretive bar hidden in random places around the city. Capturing White Rabbit’s essential characteristics, I made him run in a rush to an important meeting, turned out be a mad cocktail party at speakeasy under a rabbit hole. So, you should follow him closely before he runs away. Cheshire Cat appears and disappears at every corner to tell you to make turns. If you make it to the rabbit hole under a big tree, you will finally be there at the speakeasy. Have some fun at the mad cocktail party!  

*speakeasy: an illicit establishment that sells alcoholic beverages. From speak + easy. - dictionary.com

 

Development

Unity3D (C#based) + ARKit (iOS) + Google Maps API

Google Maps API finds the closest speakeasy bar to your location and starts directing to the destination using your real-time location data and orientation with GPS and compass built in your mobile phone. The concept is to find the closest speakeasy anywhere in the city, but I demoed one instance: from Tisch School of the Arts, Angel’s Share is the closest speakeasy. I dissected each section of the journey to plan for development in Unity3D. Below is the simple plan for demo: 

speakeasyUnityDemoPlan.png
 
Code for   attaching AR video   to main camera

Code for attaching AR video to main camera

Code for tapping on mobile screen to place AR models

Code for tapping on mobile screen to place AR models

Code for getting location using GPS

Code for getting location using GPS

Code for generating a plane in the real world to position AR models

Code for generating a plane in the real world to position AR models

 
Building in Xcode

Building in Xcode

 

Character Animation

I used open source models for the White Rabbit and Cheshire Cat, and imported them into Mixamo to rig their bodies and animate. I used 10 different animations for running and dancing.

 
 

UI Design / User Flow

 
speakeasyUX.png

About

Character Introduction

Get Ready

speakeasyUX2.png

AR Starts!

speakeasy_userflow5.png
 

 

Demo 

 

 

Some Concept Shots in Unity3D

speakeasy_final.png