How We Brought an Ancient Epic to Life and Launched Chrome in Asia
The Client
Google is Google wherever you go, and we’re proud to call them a close and trusted partner. We share their love for an artful mix of fun and technology, and whenever we work together the results speak for themselves.
The Challenge
Beyond a digital retelling of this classic tale, the challenge was focused on staying true to the narrative as told in both the Indonesian and Thai cultures, in the context of a rich and immersive interactive experience. Building on the power and capabilities of the Chrome browser, along with a bevy of other Google services, we knew our tools were up to the task.
The Concept
Bringing a traditional story to an interactive medium was a unique challenge that offered an opportunity to flex our prowess with user experience and, most importantly, user engagement.
From Paper to Pixels
All the best ideas start on paper, and these were no exception... Freed from the constraints of digital parameters, we take a deep dive into what’s possible before reining things back into an actionable concept.
Strictly
Analog
Translating one of the most important literary works of ancient India to the digital realm involved a scene-by-scene retelling – first very rough, then layering in significant levels of detail as the timeline progressed.
Sketching
a Solution
At heart, design is a problem-solving discipline, and we use the inherently rough nature of sketches to address and resolve core challenges before refining them in the digital space.
The Boards
Tell the Story
An epic tale warrants an epic retelling, and storyboards were the keys to the kingdom, in terms of mapping the narrative to a flow and timeline that would fully do it justice.
Google Product Integration
Cleverly integrated Googleproducts help us to tell the story.
-
Maps
Even a fictional adventure needs a basis for location, so Google Maps was a natural fit.
-
Talk
Google Talk enabled a dialogue between characters in a way that furthered the narrative while enhancing the user experience.
-
Weather
We found a fun and creative way to incorporate Google Weather into the story without changing the core narrative.
-
Docs
Google Docs was a unique way to offer communications from the characters to the users.
-
Aw Snap
We love Google’s playful tone, so we leveraged that within the story wherever it made sense.
-
Products
Even an ancient adventurers need gear for their quest, so Google’s product search seemed a natural (and cheeky) fit.
The Design
The inherent beauty and visual pageantry of art and culture from the Indian diaspora presented a fertile canvas for lush design. We sought to strike a balance with bright colors and muted tones to evoke a visual theme deeply rooted in a historic context.
Inspiration
Clearly
Inspired
We didn’t have to look far for inspiration, drawing from the endless sea of rich textures and vivid colors common throughout Southeast Asia and the Indian subcontinent. From textiles to tapestries, landscapes to literature, it was all good.
Illustrative
Only
the Best
The only way to do proper justice to this ancient and beloved tale was to beautifully illustrate the characters and their environments. For this we turned to a seasoned specialist in illustration, and the results are quite obviously awesome.
The Main Characters
Four main characters dominate the narrative, but each one visually manifests differently based on region. The classic Indonesian depictions
are puppet-like, friendly and fairly accessible, while the Thai versions are a bit more fierce, and much more realistic in their visual style.
Indonesia
-
Shinta -
Rama -
Monk -
Rahwana
Thailand
-
Shinta -
Rama -
Monk -
Rahwana
Visual Storytelling
Elemental Interface
Clear
Components
To create a richly interactive storytelling experience, it was clear we needed a set of interface components that worked separately and together within a common visual theme.
As with any interactive setting, we had to think through and fully design all the various states within each component across the digital experience.
Layers
in Sync
With so many different elements working together, the seamless combination of the full component set was a key challenge. Ensuring all the pieces work together in visual harmony was a primary objective for the design team.
Technology
Ultimately, the technological components of the experience are most successful when they fade into the background and just simply work. In other words, a well-built digital experience really sings when the stuff that makes it work just gets out of the way.
Multiple Chrome Windows
Working Separately
and Together
Pop-up windows can only be spawned by, or focused on, a user interaction (e.g. a click), for security reasons. So in order to maintain a smooth story flow, we had to spawn all the windows needed by each of the five chapters at the beginning, when the user clicks ‘Start’, then store them for later on. We ended up hiding the pool of windows behind the main narration window so they wouldn’t crowd or confuse the user experience. A separate narration window ensured that the story didn’t get lost or overpowered by the stunning visuals.
Slaying
Deer & Demons
Digital physics played a big part in many of the gamification elements, including particle systems for fire, smoke, and forest ambiance. We built some spring-based tail physics for the burning scene, 3D ray casting and collision detection for the shooter in the forest, and inverse kinematics for the arm and bow in the penultimate scene.
How we used Canvas
The fire was built by duplicating a livingparticle that would go from fire to smoke.
Monkey
Tail Magic
A stretchy, flexible monkey’s tail was key to the third chapter of the story, and we crunched code until it was perfect. The end result was a fully mobile weapon of destruction, wielded by the user to burn the Kingdom of Giants.
Alengka
is on Fire
Realistic smoke and fire in the digital space is way easier said than done. This was a unique challenge that our development team tackled with vigor, leveraging all that Canvas has to offer.
Working on the Ramayana project really gave us the freedom to push the boundaries.
We were literally only held back by what we could imagine.
WebGL, With a Vengeance
We created a 3D environment where theuser could aim and shoot the deer.
Shooting
the Deer
Rendering 3D graphics without the use of plug-ins is the sweet spot for WebGL, and we were all over it. We put this technology through its paces, and surfaced with a realistic hunting experience sure to delight, despite the murder involved.
Takeaway
Talented partners, top-notch tools, and a timeless tale all came together to create an immersive and emotionally captivating experience in the digital space. In the end, the real star of the story is the Chrome browser, and the endless possibilities it offers to users, developers and creatives alike. We’re proud and excited to be leading the charge toward the future of interactivity on the web, and to be partnered with Google in such a meaningful way.
