Judges, please view Ramayana in Bahasa Indonesia here or view it in English here (password: Chr0m3)

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.

Let’s start from the very beginning...

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.

Tell the Story of Ramayana
Utilize Google Chrome
Make an amazing website

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 Google
products help us to tell the story.
  • Google Maps

    Maps

    Even a fictional adventure needs a basis for location, so Google Maps was a natural fit.

  • Google Talk

    Talk

    Google Talk enabled a dialogue between characters in a way that furthered the narrative while enhancing the user experience.

  • Google Weather

    Weather

    We found a fun and creative way to incorporate Google Weather into the story without changing the core narrative.

  • Google Docs

    Docs

    Google Docs was a unique way to offer communications from the characters to the users.

  • Aw Snap

    Aw Snap

    We love Google’s playful tone, so we leveraged that within the story wherever it made sense.

  • Incognito

    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.

illustration not approved
cloud cloud cloud

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
    Shinta
  • Rama
    Rama
  • Monk
    Monk
  • Rahwana
    Rahwana

Thailand

  • Shinta
    Shinta
  • Rama
    Rama
  • Monk
    Monk
  • Rahwana
    Rahwana

Mapping the Mission

Rollover each segment to reveal the different stages
Ramayana map 1 Ramayana map 2 Ramayana map 3 Ramayana map 4 Ramayana map 5
Click to see the map in detail.
map

Visual Storytelling

Rama Hunting Protection Circle
Drag the hand to see the sequence.

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.

User interface components

Browser windows

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.

Shooting the demon

How we used Canvas

The fire was built by duplicating a living
particle that would go from fire to smoke.
How we used Canvas

Code to update the tail verticies (segments)

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.

Code to update the tail verticies (segments)

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.

Code to update the tail verticies (segments)

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.

• Fi Development Team •


WebGL, With a Vengeance

We created a 3D environment where the
user could aim and shoot the deer.

All the physics is REAL.

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.

Code calculating arrow's path in 3D space

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.