Slice of Lime was asked to develop the strategy, design, and development for the Big Green Rabbit website. Already a popular PBS show, the website’s objective is create an immersive and interactive online experience.

Kick-off

As with all projects at Slice of Lime, we started with strategy first. Big Green Company had already compiled rough ideas around what they wanted the website to do and who their target demographic was. With a focus on children aged 2-8, it was agreed that the website should not be like the typical cluttered web experience. Even popular kid destinations, like Disney.com, had far too much noise and distraction for our tastes.

Instead, the site would have simple, friendly navigation, bright colors, and plenty of animation, sounds, and voice overs. Above all else, the website would encourage exercise – a key component of the TV show.

Since Big Green Company is grounded in the world of broadcast television, we found that the best way to communicate our ideas was through storyboards and scripts instead of information architecture flows and wireframes.

We started with storyboards to visually outline the 4 main areas of the website experience; Play a Game, Watch a Show, Learn a Dance, Sing a Song.

Each panel in the storyboard outlined not only how we would would flush out the site visually, but it also described the functionality, special effects, and script elements that would be needed along the way. We also took time to define complicated areas of the site, like “game play.” What should the games be? How complicated should we make them to solve?

Using the storyboard as our foundation, the writer for the Big Green Rabbit TV show was able to create the script for the website.

From there, we create a master “Assets List” which was comprised of over 2,000 individual elements needed to make the site function properly. This included sound effects, audio, video, and animation elements.

Video Production

Armed with the script, storyboards and assets list, we led a 3 day video shoot and audio session at the Comcast Media Center.

This is where we shot all of the blue screen footage of Charlie (the Big Green Rabbit) and Isabelle (the show’s star). All in all, we captured about 75 individual video clips and 300 audio clips to use with the website. We took alternate video shots of Charlie and Isabelle, some with them walking across the blue screen and others with them walking in place so as to give ourselves options later on in the process. As it turned out, we used the walking in place clips because they had a much smaller file size and improved the user experience.

Development

After the video shoot, we began assembling the framework of the website. It was important to us that we use a system that allowed the site to grow over time and to easily swap out elements as new “episodes” of the site rolled out. For example, we created physics algorithms within Flash that dictated how signs hanging from the top of the page would randomly swing. This made it easy to add new signs and apply that same function to them.

Another example is our “bouncing ball mechanism”, custom code that made it easy to plug in words to the Big Green Rabbit songs and have a bouncing ball dance across each syllable of the word as the song played. Once this mechanism was built, future songs were added quickly.

We worked with the talented Bernard Derriman from Squetch for all of the character animation. We provided him with our storyboards and described the character interaction to him over Skype (he lives in Australia). He would start by turning around some basic animation boards.

After making revisions to the animation boards, Bernard created full color Flash animations and sent them to us. From there, we tweaked the animation to fit with the rest of our framework.

We introduced “getting exercise” into the site with our Learn to Dance section. Isabelle teaches you the basics of each dance (6 per webisode), then teaches you to music, and finally teaches you with an animated music video.

We also spent a good amount of time optimizing the site for performance. Because the site has such a wide audience, we wanted to lower the barrier to entry as much as possible while balancing the fact that the site should be highly interactive. We tested bandwidth issues constantly, finding ways to cut down on file size along the way.

We developed the site in an iterative fashion, flushing out one section at a time and testing that unique section. We were careful to make sure that the site was usable for our target demographic. Our navigation had text, but what if our visitor can’t read yet? We used a consistent color palette for each section and used voice overs to tell our visitors what section they were about to navigate to.

Interactive Testing

As the site came together we agreed that it was important to test our audience.

Using the camera built into our laptops, we travelled to friends’ homes who had children in our age range. As the child interacted with the site, we used software to track their facial expressions and where they were clicking. This provided invaluable feedback and led us to make several significant changes to the interface of the site.

Analytics

Lastly, we setup Google Analytics inside Flash to track where visitors to the site were clicking and where they were visiting from. This data will help inform future changes that we’ll make to the site. We are also gathering data through customer uploads on YouTube and other social media sources. For example, here is a video uploaded by a fan of the website on YouTube. It is an excellent glimpse into how people are using the site and required no action on our part other than searching for the content itself:

We invited you to check out the Big Green Rabbit website. We had a great time working on it and with the amazing folks at Big Green Company. As Spud, the couch potato, likes to say on the site, “Go on, click on Charlie!”

Posted in B2C, Web, Work, Youth

Responses are currently closed, but you can trackback from your own site.