An Immersive Design Project - Part II: Design Development

An Immersive Design Project - Part II: Design Development

Kc. details her well-thought-out immersive media project from Rookie Awards 2023. As the Immersive Media Category's Rookie of the Year 2023 and a recent graduate of The One Academy of Communication Design, Kc. offers a valuable framework for beginners in immersive design.

In the second article, recent graduate of The One Academy of Communication Design, Tan Kai Ching, known professionally as Kc., continues to share details of her well-thought-out immersive media project entered into the Rookie Awards 2023. Continuing from Part I, Kc., covers design development, from storyboarding, asset creation, and finally beta testing her product.


Continuing from Part I, I progressed to storyboard development after thorough research. In Part II, we’ll discuss Design Development, involving:

  1. Storyboards
  2. Scripting Plan
  3. Animatics
  4. Mood Board
  5. Styleframes
  6. Asset Creation
  7. Experience’s Beta Testing

Let’s dive in!

Interactive Trailer Content Development

“ You break the rules and become the hero. -Scarlet Witch”

Recall from the previous article, I gathered dialogues from interconnected sequels related to Doctor Strange: In the Multiverse of Madness (MoM). From there, I crafted a storyline for the core experience's interactive trailer – recapping events leading up to the new film’s storyline.

Core Experience: Mo-graph Storyboard

I drafted related storylines and scenes, drawing from extensive research in the project’s first half:

  1. The retro TV from WandaVision
  2. Doctor Strange’s fall into the Dark Dimension
  3. The multiverse-breaking violet cracks in the sky in No Way Home
  4. Loki series that explains nexus beings that endanger the multiverse

Core Experience: AR Storyboard

After the initial motion draft, I researched the movie’s significant elements to integrate into the AR experience within the trailer.

The rough sketches convey the messages of each motion scene like the shattered Mind Stone and broken Property deed, which recap Wanda and Vision’s broken promise, tied to Vision’s death and Westview’s destruction. The AR experience reverses this event, allowing users to retrieve the property deed and understand Wanda’s past better.


Mood Board

Following the AR storyboard draft, I compiled a comprehensive mood board covering art style, color palette, mood & lighting, supporting elements, typography, cinematography, etc.


Style Frame Development: Part I

Since I’ve proposed a 3D approach resembling 2D style, I began by modeling the TV intro's opening scene. Inspired by the diverse retro TV variations in WandaVision, I designed up to 5 TV models using Cinema 4D.

After 3D modeling, I applied color materials using Cinema 4D’s Sketch and Toon render presets. Despite trying to match colors with my researched scenes, the results weren't as expected. I then rendered it as a still frame and moved to Procreate, where I added graphics to achieve the desired 2D style, including illustrating the door opening to the dark dimension space behind the TVs.


Project Checkpoint Feedback

The day after Project Demo Day, I refined the core AR design and created sketch-based animatics to outline the entire AR user experience flow:

  1. Pre-Movie: Interactive poster in the cinema waiting lounge
  2. Pre-Movie: Unlocking the Core Experience tutorial
  3. Core Experience: Interactive trailer in the movie theatre
  4. Post-Movie: Interactive poster in the cinema’s exit hallway

Each stage includes essential elements for unlocking another experience because they are all connected.


Style Frame Revision

When the intended art style didn’t go as planned, it led to an unintentional shift toward a new art style that aligned with the campaign theme. Thanks to my lecturer Jonathan’s recommended tutorial, I refined them, resulting in a set of style frames for 4 scenes that now match MoM's theme and color schemes.


Enhancing Interactive Trailer Content

After style frame approval, I refined the story content with a Google Docs scripting plan to streamline the narrative. Realizing the video was too long for a trailer, I split it into 3 related trailers, each covering the backstories of Doctor Strange, Scarlet Witch, and Loki, all tied to the Multiverse.

0:00
/
Animatic compilation for 3 trailers

Core Experience Refinement

Regarding the AR Experience, I began by sketching a UI layout for the AR interface, drawing inspiration from GUI references.

As for the Interactive Trailer, all 3 trailers share identical TV opening and closing scenes while providing different AR viewing experiences. The ending of each trailer builds excitement for the related trailers, with the final trailer wrapping up the trio and leaving the audience anticipating the film’s release. Each trailer offers 1 collectible item that grants access to different AR portals at the last experience.

In the end, due to time constraints and the large project scale, I decided to go with just the 2nd teaser.


Style Frame Development: Part II

I then focused on crafting 3D style frames that aligned with the finalised storyboard & script. Modeling with basic shapes without 2D graphics, I established a cohesive concept flow and consistent color schemes.


Project's Beta Test

During the beta test of the internal project demo, I only had a rough mo-graph trailer with basic cut transitions and camera movement. Later, I incorporated recorded voiceover and main SFX to enhance the experience.

To save time, I directly linked Cinema 4D files to After Effects, eliminating the need for prerendering sequences. Additionally, I created a quick AR demo mockup, recorded the video in AE’s quarter view, and rendered it for project checkpoint submission.

0:00
/
Interactive trailer concept mockup

Core Experience Interactive Trailer Demo

At that time, I exported image targets to Unity 3D for basic image tracking from the unpolished motion scenes. Users could detect image targets when they held up their phones, but the collectible placeholders couldn’t be added to the inventory system yet. After the beta test, a survey gathered feedback and ideas for improvements from peers and lecturers to evaluate insights.

Stay tuned for the final article in this series, where we’ll dive into the in-depth process of all the AR experiences!

Link to my full project on The Rookies and Behance.