Glow
Glow is an interactive bedtime story for families who cannot be together. This is a prototype developed by me and my team during a weeklong hack-a-thon at eko (where I currently work as a software developer). Eko is an interactive video company that enables others to build “choose-your-own-adventure” videos.
The hack-a-thon occurred during May 2020, around the start of increased social distancing and quarantine. Everyone was encouraged to build interactive videos around the theme of “connection”. My team decided to focus on bedtime stories, a fond tradition from all our childhoods. Telling a bedtime story forms a deep connection between the reader, the story, and the listener. Our goal with Glow was to find a way for grandparents to interact with their grandchildren, even though they may not be physically close together.
Goals
Create a compelling story
We aimed to build out an example of what an interactive bedtime story might look like. We hoped to “user test” it with our coworker’s family to see if a) children liked the story and b) it was easy for a grandparent to record themselves reciting the script.
Prototype a profitable app
We also wanted to imagine what this might look like at scale. What if we had 1000 compelling interactive stories? How could we put this into the hands of grandparents around the world and what would that look like? How can we make this profitable?
The Story
We wanted to mimic the interactions between an adult and a child building a story together. When my coworker was young, her father used to tell her “Vicky Stories”. Vicky was a blue alien who lived on a blue planet, but it was up to my coworker to fill in the blanks with what happened in Vicky’s life. The bones of the story were the same, but she got to hear a different story every night.
Interactive video allows for the viewer to be an active participant in the story. Any grandparent could record themselves reading a story to their grandchild, but only an interactive video could recapture some of the exchange between grandparent and grandchild during story time.
My coworker wrote the story as a poem, similar to many children’s books. It also made dividing the story into a branching narrative quite easy- each stanza was a different segment of the story. The story took on the following structure:
The Animation
While my teammate wrote the script, I was responsible for the animation. Some models were taken off of TurboSquid (a free 3D model website), but the storyboarding, shading, lighting, animation, and rendering were all done by me. The hack-a-thon only lasted a week, and I had about 4 minutes of content to produce. The short time span led me down the pathway of a “puppet show” style which would allow for non-photorealistic textures and very simplistic animation. I used Arnold as my rendering engine, and mainly stuck to Lambert textures to reduce render complexity. While the shading and animation are relatively basic, I wanted to include a variety of textures so it was still visually appealing.
In order to render everything within the deadline, I made use of a free trial of Microsoft Azure and leveraged their Azure Batch service. I slightly modified the Azure Batch Maya plugin to work with Maya 2020 and was able to get 4 batch renders going at once (3 using the trial version of Azure, 1 locally on my machine).
Storboards (1/3)
Storyboards (2/3)
Storyboards (3/3)
At first, I began to explore the puppet aesthetic. I wanted something that wouldn't require expensive rendering, since I only had a week for 4 minutes of content.
I noticed that children's book illustrations often included simple shapes, but many textures. I wanted to bring that in to the materials, so decided to use simple patterns on the sand blocks. This also made the scene more visually interesting, without making it too complicated to render out.
I needed to be quick with the modeling, so our main character was made an astronaut. Since children's books often have the main character in some kind of costume, it felt like an acceptable "hack" without breaking the visual aesthetic of the story.
Per my teammate's suggestion, I added a pattern to the astronaut suit. This had the effect of making it seem more like children's pajamas, thus adding to the playful atmosphere we tried to cultivate.
While the majority of the video has very simple lighting, I needed to experiment a bit with how to signify "glow". I ended up doing this by using some simple spot lights and disc lights within the helmet and right over her heart. By fading the lights in and out, I was able to create a "pulsing" effect- this made it seem like her heart was glowing.
The User Interface
There were several challenges when designing the UI of this video. Users make their choices in the video via buttons, but our main users are children who would not be able to read. As such, we had hoped that any button elements would visually signify the available choices and clearly be “clickable”. Our original plan was to use images for the buttons- if the choice is between the red hat and the blue hat, we wanted to show the red hat and the blue hat as buttons. However, because of time constraints, we were unable to render out images for each model, and had to fall back on using text based buttons.
Another challenge was figuring out how to composite the video of the grandparent reciting the story and the animation itself. We knew we wanted to create an interactive video for mobile, which meant vertical video. However, the animation and the grandparent recording were horizontal. We attempted to divide the screen into thirds- the top third would be the grandparent video, the middle third would be the animation, and the bottom third would be the button area. My teammate felt that simply stacking the videos on top of each other was too distracting, and instead tried to build a “FaceTime storybook” experience.
The App
Ideally, Glow could be one of many interactive videos a grandparent could send to their grandchild. My team envisioned a web app where grandparents could browse through a collection of stories, pick their favorite, and then begin to record themselves reading the story. Once the video was compiled and “plugged in” to the existing story, they could simply email it to their loved ones.
Target Audience
Anyone who wants to give their loved ones the experience of one-on-one story time but cannot physically be with them. This is particularly relevant during quarantine, but can also extend to families who are scattered across the globe.
Need State
They want to be able to connect to their loved ones, and to know that their loved ones have something personalized they can treasure.
Value Proposition
Anyone can connect over Zoom to read a story. The value here is that a seemingly magical piece of content- an animated book that you can read with your Nana- can easily be created and then loved, over and over.
The Prototype
As part of this effort, I created a simple prototype of what the web app might look like. It can be seen in its entirety here.
The prototype shows how a user might select a story and begin recording each segment. While the user of the interactive video is a child, the user of the web app would be an elderly person. As a result, the goal was to make the UI as straightforward as possible and make each step of the process short and quick. We discussed having the grandparents simply upload videos for each segment, but I felt that it would be easier if the entire process was guided. Our users can check each recording, and choose to re-record if they so choose. There is also a sample video to show them how the pacing might sound for each segment of the story.
The profitability
A simple way of making this profitable would be to charge for each interactive video made. However, there are certainly more creative ways to make this a unique, shared experience for families. Perhaps this app partners with popular toy brands and develops interactive stories with the toys as the main characters. Grandparents could record themselves reciting the story, and choose to purchase the featured toy(s) to mail to their grandchild.
Reflection
Looking Back
While live-action interactive video can often be cumbersome, animation offers several advantages. Interactive video is inherently a branching narrative- each choice the viewer makes leads them down a different path. For live action, this can involve multiple takes of the same shot, with slight dialogue changes. With animation, it may only require multiple renders of the same short. A key example of this within Glow is the color of the camel’s hat. Early on in the story, the viewer can choose the color of the hat. In order to stay consistent, a live action version of this story would require every scene thereafter to be shot twice. In this animated version, it was simply a matter of changing the texture and rendering out the hat in a separate render layer.
Moving Forward
While the idea shows promise, eko does not yet support templatizing videos- each video must be made manually in Eko Studio. Eko Studio has a complicated workflow and allows you to do things like create UI or add code to your project. With templates, one person comes up with the skeleton of the story, and other people are allowed to drag and drop their own content into the skeleton.
Allowing creators to templatize videos would further enhance the customized experience eko aims to offer. Bedtime stories are simply one use case where templatizing could be used. In this case, it offers a child a uniquely personal message from a loved one. Imagine what it could do on an app like TikTok, where people often duplicate someone’s video but film their own content.