ITV - Annabel's Kitchen - Case Study

     

MO was approached by CITV and Annabel Karmel to help develop a website to accompany their new kids’ cookery show, Annabel’s Kitchen.

Background


Hosted by Annabel Karmel, the award-winning children’s cookery book writer, the aim of the show is to encourage kids and parents to get in the kitchen and have some fun. Annabel serves up her favorite recipes and teaches children to cook, while a host of wacky puppets and gadgets bring Muppet-esque antics to proceedings, making for a fun and informative show.

Brief


MO’s task was to take this sense of fun and learning to create an online experience that would complement the show, serving as a repository for recipes games, character information and show clips.

Procedure


Having received a huge amount of reference from the actual studio set in Ireland, we began to get a good idea of the environment Annabel and the other characters work in – a large loft conversion with an open plan kitchen filled with odd machines for cooking, a tray of singing cupcakes and two crazy penguins – not your usual cooking show, but it certainly gave us a lot to work with.

Our first port of call was the User Experience. What did we want kids and parents to get from their time on the site? What was the core message and, most importantly, how would we serve up such a large amount of content in a fun and exciting way? Fortunately CITV wanted to make it a Flash site, so this did offer us a lot of scope in terms of animation and video, which we felt would play a key role.

After an initial project meeting with the team at CITV, we got together and started thrashing out some ideas. One that came to the fore was the idea of making the site like a pop-up book. This seemed to sit well with Annabel Karmel’s publishing roots and also gave us a great mechanism for introducing various scenes from the studio set that could serve as the backgrounds for our different site sections. Plus we then had a book, which we could also use to display recipes.

Having produced extensive wireframes to chart the UX, we began working on artwork for our pop-up world. The design team took the hundreds of reference photos we had been given and began chopping them up, re-comping them and then pasting them back together as little pop-up versions. We had the main kitchen, Pearl’s Desk, Jimmy’s fridge, the cupcake stand and Annabel’s Area.

Alongside this, the 3D team got to work creating a book to serve as the vessel for our site. They modelled up the book, so we could then experiment: opening and closing it, turning its pages, and shifting its position.

Character Implementation


The other aspects of the show that we really wanted to capture on the site were the great character puppets. Annabel’s two sidekicks are Pearl and Jimmy, two penguins from the South Pole. Pearl is a highly organized tech-savvy she-penguin with a love of fashion and all things kitsch. Jimmy is Annabel’s assistant chef and a bit of a budding inventor. His off-the-wall creations include the Fruit 'n' Vegetabilizer, Cookatron, and the Yummy Scrummy-o-meter. Finally we had the three cupcakes: Candice, Dionne and Lola, the Supremes of the pastry world; these three singing beauties provide much of the music for the show, including its theme tune.

We felt it would be important to have these personalities present on the site, so we decided to get some dedicated footage of the characters that we could use to welcome kids to the site. Our time spent working with Annabel and the puppets, to capture this footage, was a lot of fun and the character artists responsible for bringing the puppets to life were hugely talented – some of their improvisation proved to be far more entertaining than our actual script! All this was done against a blue screen, so our animation department could then crop and prep the movies for the site.

Games


As all these elements came together, our game development team started working on some of the mini-games for the site. These games were to be simple but fun, with a food related twist of course: a washing-up game (washing-up can be fun too!), a Fruit 'n' Vegetabilizer game, and an interactive cooking timer.

Tech


In the final stages, the Flash team began to pull it all together, building the pop- up scenes, creating transition animations so the scenes could flip back and forth, and then populating the site with all of the content we had created. We used After Effects to animate the flat panels of each scene in a 3D environment and then exported the sequences into Flash. Once stitched together we had an exciting navigation and transition system for our site.

Result


All the elements finally came together. The home page offered access to all the different sections of the site with little, interactive video clips of the puppets welcoming people to the site. Pearl’s Laptop provided access to character biogs, show info, downloads and images; Jimmy’s Fridge held the games and machine descriptions; the Cupcake Zone had a sing-along theme tune player; and Annabel’s Area had clips for Annabel’s top tips and a link through to the illustrated cooking book, full of recipes from the show and a sticker reward page to encourage kids and parents to try all the meals.

The client was very happy with the end result, feeling it offered a great extension of the show. The site proved highly popular with kids and parents alike, and even picked up some juicy awards along the way – making for happy clients and team all round!

Categories

Web

Case Study

Awards

  • Pixel: 2013
  • The Blades: 2011
  • Web Awards: 2012
  • IMA: 2012