NFB Drupal project is a Webby Awards 2008 Honoree

Meïdia Studio's most recent Drupal based project for the National Film Board of Canada, CitizenShift, has been honored by the Webby Awards 2008.

Our latest realizations, CITIZENShift and its sister site in french, Parole Citoyenne, have been both launched in beta last December. Both sites are interactive platforms where people can explore social issues through films, photography, articles, blogs and podcasts - spaces for everyone to engage with other activists and creative people, and to share media content.

Meïdia Studio was responsible for creating the concept, graphic design, development and integration of the backend, testing and quality assurance of both platforms along with CITIZENShift and Parole Citoyenne's teams.

Project Details:

Meïdia Studio was approched by the National Film Board of Canada to relaunch the two existing web sites, CITIZENShift and Parole Citoyenne. In depth researches were made by both teams to find which CMS would best suit the needs of the new platforms, which were to be created upon a definite concept and really special needs. The decision to use Drupal was made after evaluating the flexibility, the functionality and the available documentation of Drupal.

The requirements and the development process

Along with CITIZENShift and Parole Citoyenne's team we worked and identified the following main requirements for the new platforms to create:

• Two different web designs / Drupal theming templates for CITIZENShift and Parole Citoyenne
• One user database for Parole Citoyenne and CitizenShift, single user sign-on
• Meta tags and user tags
• User profiles, user roles
• Dossiers (+ Actions), floating content, comments
• Content moderation
• Listing of dossiers chronologically, alphabetically and thematically (Meta tags)
• Image upload (jpg, gif, png) and related meta information
• Audio upload (source: mp3 file format) and related meta information
• Video upload (Quicktime video format as source, automatic transcoding into Flash) and related meta information
• PDF file upload and related meta information
• Search
• Send dossier as a link to a friend
• Event calendar / event history
• RSS feeds
• context sensitive help (creative commons, tagging, etc.)
• Ajax scripts for many navigation items and tooltips; "Flickr"-style content navigation

There were many known issues which we were aware of:

• the existing database of CitizenShift and Parole Citoyenne with a lot of content and relationships between content
• thousands of existing video and audio files
• the used content management system was custom made by using Java and JavaServlet technology: it was not easy to maintain the code and it was not easy to publish content, especially multimedia content like videos
• videos had to be converted manually to be published on the existing web sites

From this knowledge we created a detailed concept which is mentioned in the text below, and a scenario (wireframe document). Once these were approved by CitizenShift and Parole Citoyenne's teams, we moved to the graphic design stage, which once approved lead to the start of the backend development in Drupal.

From the best of our knowledge after creating some projects using Drupal as a content management system, we started the development phase, working with the constraint that in order to start the Drupal theming, at least 80% of the backend had to be ready.

The basic assembling of the modules was quite smooth, saving our energy for the most complex which was to come. The development of the "logic" behind the scene was one of the most complex task in this project: how dossiers and content types (video, audio, article, file, hyperlink, photo) relate to each other and how to integrate these types on the dossier pages by using jCarousel, thumbnails of videos and images, default thumbnails, etc. All these functionalities were put into a module, so an update of the Drupal core as well as third party modules could be done easily. It is also important to mention that this module is also shared between the two web sites, like the other modules.

The Drupal theme was developed by just using blocks and rules. We also looked into Panels and Views modules but decided to just use blocks and rules. This allowed us to keep things simple, without having to many "intermediary modules", which can make things more complicated sometimes.

Here is the list of modules we used

• Video
• Audio
• Image
• CCK
• Forward
• SimpleFeed
• Pathauto
• Legal
• Captcha
• Tagadelic
• Community Tags
• jCarousel
• JQuery Update

The concept

How to translate the requirements into the re-design of the two web sites? We at Meïdia Studio started by creating the basic concept, from which we created a detailed wireframe document which visualized the basic architecture of the two web sites: the front page, the dossier pages and the user profile page. Here is a summary of the basic concept:

What will people find on Parole Citoyenne and CITIZENShift?

• people created documentaries and stories : created by the citizens, directed by the editorial teams of Parole Citoyenne and CitizenShift (dossiers)
• a community : of engaged citizens, of observers, of creative citizens (photograph artist, film artists, writers, thinkers)
• variety of content : a new kind of content, different from what is brought by traditional media
• a reliable source of content : Parole Citoyenne and CitizenShift are serious, reliable, valuable sources of information created by citizens
• voices and space : for the audience to discuss, share information and knowledge

How will people interact on Parole Citoyenne and CITIZENShift?

• by creating a piece (text, audio, video, picture) for a specific dossier
• by suggesting a topic for a dossier, create a piece and suggest it to the editorial team
• by publishing on blogs, and on the web, a short extract from a dossier
• by participating by information organization (tags), by discussion (comments), by adding hyperlinks, by attending live events

The front page(s) consist of:

• one or several featured stories (editorial team choice)
• an area to address the audience directly about how they can participate
• a navigation area by topic, authors, timeline and search (dynamic content)
• a "live" area showing recent activity on the platform (recent stories, recent contributions, etc.) (dynamic content - moderated)

This structure enables different entry points to navigate into the content:

• for researchers who will use the search functionality and the timeline access
• for people who wish a more guided introduction, by accessing the featured stories.

The dossier pages:

The design of the dossier page was created according to one simple rule: intuitive access of all information in one page. The pages are divided into several sections:

• The top navigation with the basic navigational tools
• the context of the current dossier showing the topic of this dossier (meta tags), the previous and next dossiers within the same topic (meta tags), a tagging area for user tags as well as additional information of the current dossier, like licenses and creation time. Additionally a list of the contributors of this dossier is shown (authors)
• the dossier showing all related information: a user can browse AND watch/look/listen to all videos, pictures and podcasts without leaving the page. For example: a video is loaded into the feature video frame by just selecting a video thumbnail. Only reading of related texts and consulting the hyperlinks needs a change of the current page
• the participatory element of the dossier consists of sharing (send to a friend and dossier URL to share) and user comments.

The user profile page:

shows information about the author and a short biography. It highlights his contributions to dossiers and his latest actions to make the viewer to further navigate on the site.

Hope this summary will give you a good insight into the project! If you have questions don't hesitate to get in contact with us.

Links
http://citizen.nfb.ca
http://citoyen.onf.ca
http://www.meidia.ca/?l=en (more info on past Drupal projects)

Contact
Marie-Chantale Turgeon, founder Meïdia Studio, m-c@meidia.ca
Christian Car, Creation & technology, Meïdia Studio, c-c@meidia.ca
+1.514.965.2597
http://www.meidia.ca/?l=en