UPDATE: We WON! The Tonight Show with Jimmy Fallon is this year’s “Outstanding Interactive Program.” Congrats to David Diers, Elliott Foster, the rest of the Four Kitchens Web Chefs, Lullabot, CP+B, and the NBC Digital team!
A website we helped build has been nominated for an Emmy!
The Tonight Show with Jimmy Fallon website and app are in the running for this year’s Outstanding Interactive Program category. Jimmy Fallon’s vision to bring the Tonight Show directly to his fans through an immersive digital experience is a landmark moment in television, and we are thrilled and humbled to be a part of such an incredible show and an amazing team of industry leaders.
The goal of the project was simple but incredibly complex to implement: Highlight “shareable moments” from the show and make it easy for visitors to share these regardless of their context, device, or platform. Oh, and the site had to launch just in time for Jimmy Fallon’s takeover of the Tonight Show from Jay Leno.
NBC assembled an all-star team of designers and developers to work hand-in-hand with the Tonight Show‘s editorial staff to develop a semantic data model to isolate and categorize jokes and segments, craft an engaging experience for users, and ensure the website would perform under load when the show airs five days a week:
- The Tonight Show‘s editorial staff provided valuable insight into the content and user experience.
- NBC Entertainment Digital was responsible for hosting and long-term stewardship.
- CP&B implemented the frontend and assisted with Node.js, Drupal, and the API design.
- Four Kitchens and Lullabot joined forces — for the first time ever, believe it or not! — to design the content API, architect the CMS (including Drupal), and provide project support and oversight.
The Tonight Show site was innovative both in terms of user engagement and platform architecture. Built using Drupal, Node.js, Kraken.js (a Node.js framework), Backbone.js, and Marionette.js (a frontend framework for Backbone.js), the site represents several leaps forward in web architecture and content modeling:
- Drupal acted as a CMS with a services layer and was not responsible for the display of any content or markup. Instead, Node.js and Backbone.js handled the frontend. The Tonight Show site was a headless Drupal implementation before “headless Drupal” even had a name!
- The Drupal backend used best-of-breed software architecture for an API-driven site using a COPE (create once, publish anywhere) methodology. This approach ensures the site is modern both experientially and behind the scenes.
- Simplified Drupalisms and abstracted content requests so that only basic OOP PHP expertise was needed to receive, understand, and answer content requests of the Drupal backend.
…And all of this was done in an extremely short period of time! To meet the (extremely) tight deadlines, we selected a decoupled workflow, allowing us to iterate faster. This, in turn, encouraged further decoupling.
If you’re interested in learning more about the API design and CMS architecture used in the Tonight Show‘s website and app, you should check out our case study session from DrupalCon Austin 2014: Here’s Drupal! Tonight on The Tonight Show with Jimmy Fallon.
Thank you to The Tonight Show‘s editorial staff, NBC Entertainment Digital, CP&B, and Lullabot for an awesome project. We are so fortunate and humbled to be a part of such an amazing moment in media history.
Extra-special thanks to David Diers and Elliott Foster. These are the Web Chefs who made it happen. You are both awesome, forever.
Making the web a better place to teach, learn, and advocate starts here...
When you subscribe to our newsletter!