storytelling with ar html5 and whats next

Next Generation Creative Review

Augmented Reality, HTML5 and What’s Next

Kevin Doohan, Red Bull Tom Giovagnoli, Anthem WW #andwhatsnext

Why AR and HTML5? Two new pieces to the storytelling puzzle

Where does the story start? Let’s look back to look forward

first technology created a space for stories

then technology made stories more sacred

then allowed us to share our stories widely

and allowed us to bring our stories to life

now technology has pulled us all into the story

The story isn’t told anymore– it emerges in pieces. And the presumption is that you are always involved, always invited and that we’re creating this thing together.

The new story arc– with tools like AR and HTML5– is across the beginning, middle

and end of the individual experience.

Augmented Reality Adding New Dimensions to the Story

AR: adds a layer of what WAS

Museum of London. Historical images layered over the visible world.

AR: adds a layer of what WAS

National Geographic Channel. Big screen overlay brings dinos to the mall.

AR: adds more layers what IS

Lego Store kiosk shows a fun, animated scene of each model.

AR: adds a layer of what ISN’T

Fujitsu touts high security standard with virtual security guards.


Comic books come to life, with heros literally leaping off the page.

Markerless, flash-based augmented reality breaks new ground.


AR: adds a layer of what COULD BE

Users literally step right into a new pair of Converse to find the cool look.

AR: adds a layer of what COULD BE

Zugara turns the online shopping moment into a real shopping moment.

AR: adds a layer of what SHOULD BE

A virtual 3-D model demonstrates proper installation procedures.

AR: adds a layer of what we WANT TO BE

Why just race when you can use Red Bull cans to build the track?

AR: adds a layer of what we WANT TO BE

A desktop app promotes Iron Man by putting you “inside the mask.”

AR: can add a layer of lore and legend

Gnomes from 6,666 years ago have arrived with beer? Let’s see ‘em.

But is there an augmented elephant in the room?

Augmented reality is still finding its form factor. But as the experience becomes more frictionless– and thus more ubiquitous– its

ability to add endless layers to the story around us will change the way we live.

AR: will ultimately add to every part of the story

Wearable sensors and image detection will add multiple persistent layers.

AR: will ultimately add to every part of the story

Techniques like “articulated natural web” and “holographic overlays” arise.

HTML5: The Story is in the Experience

“if HTML5 is the bones then CSS is the skin and the muscles are the javascript”

HTML5: a beautiful orchestration of elements

HTML5: can provide “feel” beyond the video

HTML5: can create a shallow sense of depth

HTML5: can make the story more fluid

Multiple elements of text, graphics, video, and vector art play beautifully.

HTML5: can create an environment for info

This project turns an IMDB-like data base into a relative, visual experience.

HTML5: can give the story a living design

Mesmerizing by bringing a print-like design into a parallax environment.

HTML5: can give the story a cinematic feel

The opening sequence for this LA talent agency is big screen-worthy.

HTML5: can help us author the story together

Every second by a different artist, yet a continuity of soul.

HTML5: can let us inhabit the story personally

The meaning becomes personal when the words and images are yours.

HTML5: can make us the victim of the story

The terror also becomes yours when you become the hunted.

HTML5: can let you steer the story yourself

Three worlds. Three dreams. A music video you can explore and add to freely.

HTML5: can take the story anywhere

Responsive Design means one code base, but differently-sized experiences.

The real promise of HTML5 is to help us orchestra experiences that let our stories

truly scale– across platforms, across devices and even across time.


A platform for Michelob ULTRA that will different devices– and expectations.


We built the Do Network for Lenovo to connect locally– and scale globally.

The smartest marketing today just sets up the game, and lets consumers play it out.

So you have to know your game.

New Shapes in Storytelling: Art, Alchemy and Applications

Next Is: a mindset unafraid to mix and mash

Google’s Project Rebrief shows, yet again, the power of good ideas.

Next Is: marketing + gamification + mobile

Another genius call: creating their own economy of points.

Next Is: gesture and pattern recognition

The Kinect SDK is part of a revolution in input and control.

Next Is: brain controlled skateboards

Rapid advances in “mind reading” and high-res brain-scanning are here today.

New is: moving social to the right brain

Is it great user experience or just the way we think? Either way, it works.

New is: mass micro manufacturing

From “post-digital” to “re-physical.” The real world strikes back!

Next Is: micro-casting and personal channels

Personal recommendations flow freely. Is this the new face of curation?

New is: wysiwyg app-making

Cabana lets you create very simple or very truly rich apps in minutes.

New is: seeing the cross-pollination of ideas

Personal data mining? Social heat-mapping? Just call it cool.

Next Is: self-assembling anthropology

With Cowbird, Jonathan Harris makes the story the story. Beautifully.

Some Final Thoughts On where we are #andwhatsnext

Embracing new technologies means thinking like an alchemist. Mixing and

mashing– sometimes failing and flailing– until you make turn something into gold.

The digital story isn’t something you receive. It’s something you experience

with all your senses, including your sense of control.

Fearlessly diving into each new wave of technology is essential. But keeping your eye out for sea changes is the bigger trick.

The story– as an actual tale or as the story what will happen between brands and consumers– isn’t told anymore as

much as it emerges between us all.

It’s not a conversation. It’s a dance. Sometimes you lead. Sometimes you

follow. But you’ve got to share a rhythm if you want to stay together.

Soon the world will truly start personalizing around us. What will it

mean to live our lives inside the bubble of our own story?

Technology Changes the Story: Little Red Riding 2012

Once upon a time, there was a girl called Little Red Riding Hood, who traveled through the woods using Google Maps on her mobile phone to navigate the poorly-marked road. She was on a quest to deliver food to her sick grandmother, who had sent a message to the girl’s Facebook inbox requesting the best rated motza-ball soup on the Lower East Side.

Along the way, a terrible wolf spots her and decides that he’d like to eat the girl. Using the 4G wi-fi connection on his 5-inch phone tab, he begins searching popular recipes for little girl. He finds several on Pinterest alone.

He approaches Little Red Riding Hood, she exclaims, “Oh, what a large touch screen you have!” She then posts a rather artsy photo of the wolf on Instagram, to which she receives many tweets, texts and Facebook warnings in reply.

In the meantime, the wolf checks in at her grandmother's house, becomes Mayor and swallows the old woman whole. He then plays Angry Birds Space, cues up “Hungry Like the Wolf” on Spotify, and patiently waits.

When Little Red Riding Hood arrives, she notices that her grandmother looks suddenly very large and hairy – in stark contrast to her most recent Match.com photos. The girl quickly consults Twitter, only to find her grandmother’s update “Being eaten by a wolf. Help!” Luckily for her, it had been retweeted so many times that it sat near the top of her feed – right next to the wolf’s recent update, “’Bout to eat sum grl. LOL. #YUMYUM”

Little Red Riding Hood turns and runs out the door immediately, only to run into the Huntsman, who should have been there to help, as Bottlenose was putting all the signals together in a semantically cohesive fashion, but was simply too busy episnorting season one of Game of Thrones on HBO Go, and really couldn’t be bothered.

The end.

Tech and Storytelling: Red Riding Hood 2012