Every year, National Geographic Networks previews new and returning shows on their two television channels, National Geographic Channel and Nat Geo WILD, for ad agencies around the world. The ultimate goal is for people from these agencies to get in touch with Nat Geo’s ad sales division to buy ads during the shows for their clients.
Commercial Progression previously worked with the ad sales team on one Drupal site, so when they wanted to combine the functions of that site with another, totally redesign everything, and generally make it bigger and better than ever, they knew where to turn.
So, what’s this thing supposed to do anyways?
The main purpose of the site is to preview shows for potential advertisers, so that means a lot of video clips (and occasionally some static images for good measure). All of the clips have to be categorized by network (currently NGC or WILD but who knows what the future holds). For most of the year, previews are also categorized by the quarter (or quarters) in which the shows will air. Then, around mid-March, things start to get interesting.
Starting around mid-March and running for a couple months is “Upfront”. “Upfront” is when new shows are unveiled and networks make their big pushes to sell ads during their shows. For National Geographic Networks’ ad sales site this means several things”
- Site traffic surges when they start sending e-blasts to potential advertisers and tends to remain high throughout the upfront season.
- Previews need to be added to the “Upfront” section of the site which uses an entirely different classification scheme (eg “New Series”, “Returning Series”, “Special”).
Besides the show previews, there are “case study” videos for each network, photo galleries, slideshows, and even a couple simple pages.
So how does it work?
All images and videos are categorized using a single, hierarchical taxonomy vocabulary. Terms are assigned to content using the Hierarchical Select module and content automatically get’s associated with the entire term lineage (eg NGC -> Programming -> 2Q13).
Pages, images, and videos all have their own requirements and thus are all separate content types. Image and Video content is never directly exposed to users so minimal effort was spent styling those content types. Instead, they are presented to users on category pages (eg ngc/programming/2q13) that show a grid of previews for all images & videos in the category. When a user clicks on a preview, the selected item is shown full size above the grid.
Slideshow eh? Sounds simple enough.
For the network homepages, Natgeo wanted slideshows where they could feature videos or linked images. On the surface this sounds really simple: Add a link field to images, setup a view with displays for each different slideshow, setup views slideshow, add the views to the pages and then spend hours trying to style the slideshow & pager so they’re pixel-perfect to the designer’s vision.
But wait, there’s more! What happens when a video is playing? The slideshow shouldn’t automatically transition when something is playing even if they move their mouse away. If they manually change slides, the video needs to stop playing so they don’t have a hidden video playing, especially if they’re trying to play another one.
The site is finished and tested, the client has signed off, it’s been deployed to production and had a “soft launch”. Everyone is proud of what they’ve done for such a well-known client and ready for something new after months of intense focus on that single project. Then, comes the official launch day and the team at National Geographic send out an e-blast to thousands of people offering them a chance to win a free iPad if they’re one of the first hundred visitors to the site.
Want to find out what happened (spoiler alert: it wasn’t pretty)? Want to find out how we rapidly designed and implemented a cloud-based hosting solution? All of that and more will be covered in an upcoming post.