An Interactive Love Story

The Challenge

A blank canvas is both a blessing and a curse. And this project was the biggest, blankest canvas I’d ever seen. Ultimately, we landed on three key objectives for the video:

• Capture the emotional spirit of the song
• Use animation to tell a visual story
• Give the viewer agency over how the story plays out

‍

‍

‍

‍

The Solution

To meet those objectives, we developed a story about one day in the life of a young woman. From the moment her alarm rings out in the morning to when she closes her eyes to sleep.

And we told that story in the form of an animated (and interactive) scrolling web-comic. Allowing the viewer to interact with each vignette—and change its emotional state—to build their own narrative sequence.

‍

‍

‍

‍

Developing The Story

Jeff Buckley’s performance of this song undulates with emotion. It’s soft, sweet, loud, passionate, and at times, quietly distant. To illustrate each emotional state (and lay the groundwork for experiential design), we storyboarded a sequence of vignettes that would serve as snapshots of our characters’ day.

‍

After designing the narrative foundation, we created three distinct versions of each vignette with different emotional states: single woman, single man, happy couple, unhappy couple.

In total, we designed 288 unique story panels.

‍

‍

‍

‍

Designing The Experience

Interactive videos were not a new idea, but we wanted to push what was possible. Go beyond the choose your own adventure format. By giving the viewer control over each moment of the story, we provide a rich emotional experience.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

User Experience Design

Eko’s incredible team of developers and engineers helped ensure the viewing (and interactive) experience went smooth.

We emphasize unique panels to encourage interaction and add orchestral accents to the song in real-time (e.g., additional string instruments, vocal harmonies). We even designed a brief onboarding sequence opening the video to help viewers get started.

‍

‍

‍

‍

Animating 288 Vignettes

We opted for a more traditional animation approach to breathe life into all 288 story panels.

Typically, you’d build character rigs and props to re-use from scene to scene. But our story was different. Panels varied in size, as did the characters and objects within them. And with potentially limited visibility on screen, spending all that time prepping each panel (and its states) for animation seemed wasteful.

So we treated each panel as its own short, looping sequence. Akin to an animated GIF. Each panel was animated frame-by-frame and stayed true to the illustrative art direction.

We took this approach for two reasons: to keep the focus on the bigger narrative (not just one panel) and to keep the video load as light as possible.

‍

‍

‍

‍

Adding a personal touch

To say thank you and add a personal touch to the experience, we present the viewer with a digital poster (and download option) personalized to their story experience at the end of the video.

‍

‍

‍

‍

The Result

The result is a beautiful mixture of artistry from many creative disciplines.

The development team built a new interactive video technology. The design and animation team crafted an emotional story that allows viewers to step into and experience the narrative.

And with a blessing from Jeff’s mother, we paid a respectful homage to the beloved musician while introducing a new generation to his wonderful music.

‍

‍

‍

‍

As a bonus, we created a brief making-of video that pulls back the creative curtain and offers a glimpse into how this special video was made.