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

 

Speakeasy!

Personal Project | Magic Windows and Mixed-Up Realities with Professor Rui Pereira | Dec 2017  

AR Development | Interaction Design | Storytelling

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

Featured in AR in Action

 

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. Is there an 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 guides? "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 hurry to an important meeting, which 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 arrive at the speakeasy. Have 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 you to the destination using your real-time location data and orientation with GPS and compass built into your mobile phone. The concept is to find the closest speakeasy anywhere in the city, but I demoed one example: from Tisch School of the Arts, Angel’s Share is the closest speakeasy. I dissected each section of the journey to plan for its 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 ten 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