Things tagged ‘Broadcast’

Hors d’oeuvres

72 dots were at the centre of Jamie Oliver’s campaign to improve the nation’s school dinners.

In 2005, the TV series ‘Jamie’s School Dinners’ was commissioned by Channel 4 and we were asked to design the supporting website. The programmes, which followed Jamie as he started his campaign in the London Borough of Greenwich sparked a massive debate.

The brief was to create a site to enable, educate and inspire adults, parents and teachers to improve the standard of school dinners in the UK. The website provides a wealth of information which allows viewers to assess the standard of food being served in their school and then learn what steps to follow in order to action change.

Main course

The team members – Caroline Sutton (Producer), Julia Bard (Editor), Elizabeth Martyn (Writer) and 72 dots (Design) worked together to define the strategy, information architecture and features of the site. To increase the campaign’s penetration, we decided to create downloadable assets that could be used away from the computer. We created assets that viewers could print out and stick on their fridge doors. For example, the Do Something! action pack was aimed at parents and guardians who may wish to start campaigning at their own children’s schools or just improve their child’s diet at home.

From a design perspective, the challenge was to not only to convey a lot of information but do so in easily-digestabe chunks. We were aware that the primary audience were busy people and that the proportion of our audience who would benefit most from the information may also have literacy issues. In response to this we sought to add lots of level headings and provide clear navigational paths to content. For example, we used numbering in the Do Something section to signpost the order of events.

We also wanted to offer some cool stuff to our secondary audience, the kidz! We recognised that they probably wouldn’t want to read all the healthy stuff so we sought to tell the story in a completely different way. Food Most Fowl (designed in conjunction with motion graphic partner Keith Robinson) is a cartoon horror spoof on junk food and has been praised by users of the site and several schools have shown it in their school assemblies.

The dessert

The success of the website and the campaign was phenomenal to say the least. The forum on the site was one of the first places viewers visited to discuss their thoughts on the issue, making it one of Channel 4’s busiest ever.

Jamie has also held two webchats on the site after the broadcast of his shows. The first one was so popular, he agreed to do another the week after, even though he was on a ski-ing trip. He also gave an exclusive interview for the site, alongside his dinner lady sidekick Nora Sands.

In March 2005, not long after the series began, the Government announced a £280 million investment of cash to improve school meals.

Some History

72 dots worked on the Monarchy website from its inception in 2003. We were commissioned to do the initial design and production and have expanded it for the last four years. The fourth and final programme aired on Channel 4 television in December 2007 and we were again asked to integrate the latest content into the website.

Now featuring more than fifty biographies and numerous articles on significant documents, battles and events in English history, the website shows you the most relevant places to visit, websites to look at and books to read for further exploration. Specially commissioned maps were created by Nick Pearson and the content has been tightly edited and cross-referenced by Nancy Duin, an expert in the field. Consequently, it is easy to browse the site to find out who’s related to whom and understand their role within a wider context.

Interactive Timeline

At the heart of the website is an interactive timeline (created in Flash and driven by XML) which is the main navigational tool to drive viewers round the site. The timeline always centres itself on the current date focused on any given biography or other article. This allows the user to quickly see the wider context of the current item – which battles happened in this person’s reign or who preceded or succeeded them to the throne. For more focused exploration, the timeline can show a restricted set of data – just battles, for example, or a viewer can simply type in a date.

Notes on the Design

As the website was to accompany a major TV series and heavily promoted in the programme annos, it was fittng that the design should take its visual lead from the TV title sequence (made by Granada Bristol). Stills and artwork were derived from the broadcast sequence and further developed to create the header sections. Other elements were used across the pages to further enhance the visual appeal and denote page content.

The brief

We were commissioned to re-design an existing site for Channel 4 which was made entirely in Flash. Part of the brief was also to look at the overall architecture of the site: make it easier to find things; group the content so it was in a more logical order and create clear user-journeys across pages.

The existing website was produced completely in Flash and so was not search engine friendly. A lot had changed at the channel (E4, More 4 and 4OD had come online) since the website was released, so Channel 4 commissioned some new content from Available light to bring the story up to date. Stylistically, it was all looking a little tired too.

We were also asked to port the new site into Channel 4’s content management system so it could be updated easily.

Design challenges

The brief specified that we had to re-use the existing flash games which had been extracted from the original site. This posed the crucial design challenge – how to marry the new site design (modern, reflecting current branding guidelines and ‘on-message’) with legacy content executed in a completely different style?

An aspect of having to use the channel’s CMS was that the templates come with a fixed-with vertical navigation area down the left-hand side. Many of the legacy flash games utilised the full width of the screen so we had to design the new site with this very much in mind. The answer to this question was to scale the flash movies down in the HTML rather than re-engineer them so that the navigation could fit too. A simple answer, but it resolved the issue. We also set the background colours of the flash games to be transparent so they would merge more sympathetically with the new design.

Other challenges lay in making the old-school site standards-compliant; we introduced a CSS-based layout (data tables were marked up properly for increased accessibility) and employed some DOM-scripting to recreate the rich functionality that was present in the flash version.

The Outcome

The new design is much more than a lick of paint. Channel 4’s brand identity is fully expressed and the uncluttured approach makes the content much more clearer.

By grouping content more logically and (crucially) renaming section titles so they are more explanatory makes content easier to find. Re-ordering navigation items to delineate the information hierarchy gives context and meaning to end-users. You can find things, you can see what there at a glance. In our opinion, the website is a much more enjoyable and rewarding experience for the viewer.