SproutOnline Homepage Screenshot

Sprout provides shows and original programming for preschoolers and their families. Launched in 2005, Sprout has grown to include video-on-demand, a cable television channel, multiple websites, mobile apps, an online store, merchandising, and more.

SproutOnline.com, the primary web property for Sprout, hosts thousands of videos, flash games, downloadable crafts, printable coloring pages, activities, recipes, and more. SproutOnline.com was designed and developed by Operations & Technical Services (O&TS) within NBCUniversal.

Why Drupal was chosen: 

SproutOnline.com comes from a history of CMS’s that were buggy, proprietary, and prone to crashing when updated. Drupal’s open-source nature with its zero licensing fees, enterprise support through Acquia, low hosting costs, and the availability of Drupal developers was a key factor in the choice of CMS. Additionally, the O&TS team within NBCU has a successful record of implementing Enterprise Drupal sites, which also influenced the decision.

Describe the project (goals, requirements and outcome): 

Sprout's primary goals were to decrease development and hosting costs while improving website uptime and reliability. Some of the other specific requirements included:

  • Central hub for all our website content and resources including graphics, video and digital media
  • Admin controls, permissions, and workflows to handle content creation and publication without requiring development resources
  • Scalable architecture to handle 25+ million page views and unique visitors a month
  • Ability to handle and manage digital media, including images, flash games, audio files, and 3rd party hosted video content
  • Social media and user account integrations
  • Seamless integration with our video hosting provider
  • Ability for mobile apps and flash games to interact with the database, including user authentication, submitting photos, retrieving account information, and more.
Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

There were a number of reasons these module were chosen.
Services and OAuth
Sprout required a secure, standards-based method for mobile apps and flash games to interact with Drupal. Services was chosen for its wide-spread adoption, community support, and ability to provide a REST server with JSON request and response formats. Services provides integration with core Drupal functionality including nodes, taxonomy, users, files, and more, all of which met requirements.

OAuth was chosen after attending the DrupalCon Portland 2013 session by Fernando Paredes Garcia on SaaS, Drupal Services and OAuth. OAuth was selected because it is an open standard for authorization and used by a large number of organizations including Twitter, Google, Amazon, Dropbox, Facebook, GitHub, and more.

Panels, Panopoly and Fieldable Panel Panes
Panels and Panopoly are a recent addition to our Drupal experience, we originally built the site using Context. After a few months of using Drupal, however, an internal conversation began around the question “is there a drag-and-drop interface similar to our old site that would allow site admins to create pages on-the-fly?” Hence we dug into Panels.

Panels provides users with the ability to create pages with customizable layouts and content through the UI. Users can simply create a page, select a layout, and upload images and content. Fieldable Panel Panes allows us to provide users with a number of structured content panes, such as video players, scrolling video carousels, accordion carousels, DART advertisements, and more. Users are able to build individual pages and custom microsites through the UI.

Migrate
SproutOnline.com has always been an interactive site with new user registrations and constantly changing content. A critical requirement was that we would be able to “flip the switch” and turn on the new site with zero content loss and a small window of time for a content freeze. The migrate module provided us with the ability to automate the majority of data migration from our old CMS to Drupal with less than an 8 hour content freeze. This included hundreds of data points and millions of pieces of content. The migrate module was the core component in making this happen.

Aurora Theme
Aurora is an HTML5, Sass and Compass powered base theme built to encourage best modern front end practices. It is used across the majority of NBCUniversal websites and was selected because of its minimalist and non-invasive nature.

Media
The Media module allows site editors to upload and insert media assets into a WYSIWYG editor, such as images, videos, and more. It provides a simple interface to view the entire library of assets and can be configured to provide customized views of assets as well. Sprout uses the Media module to manage all our inline video and image assets.

Memcache, Entity Cache, ESI, Akamai
One of the core requirements for Sprout was a CMS that would scale to meet our current and future traffic patterns. On the backend we have 8 web servers configured with memcache and APC, 2 varnish reverse proxies (active and hot spare), and 2 database servers (primary and secondary), hosted by Acquia. Akamai's CDN is also utilized. The result is a graphic and video intensive site with an average page load time of less than 3 seconds.

Flash Video Game Integration
The integration with flash video games has been the most interesting, challenging, and constantly updated part of the site. Sprout has several hundred flash and HTML5 games on the site, all with different requirements for implementation. Some games are a single file, some have hundreds of related files, games vary in size, while other games may submit user generated content and webcam videos to a content type within Drupal. All games are uploaded and managed in Drupal through a single content type with a number of fields; admins simply select the "game type" (HTML5 game, flash game, flash UGC game, etc) and input the associated fields.

Community contributions: 

Contributions authored by developers at O&TS related to this project include:

Project team: 

SproutOnline.com was designed and developed by Operations & Technical Services (O&TS) within NBCUniversal. Team members include:

  • Jay Tuten, Project Management
  • Junko Otsuki, Design
  • Brian Eagan, UX
  • Pradeep Venugopal, Development
  • Suzi Arnold, Development
  • Jason Savino, Development
  • R.J. Townsend, Development
  • Jeremiah Thomas, QA
  • Neetu Sharma, QA
  • Cynthia Cortes, Client Engagement
SproutOnline.com The Chica Show Landing Page
SproutOnline.com Video Section Landing Page
SproutOnline.com Microsite
SproutOnline.com Send2Sprout - Users can submit content to be used on air
SproutOnline.com on-air TV Schedule

Comments

panditvarunHSK’s picture

This site so cool & beautiful. Can you please tell me what menu is used in this?

varun pandit

rj’s picture

Thanks! We use the standard Drupal menu across the site, there are 15 menus total.

--

R.J. Townsend
rjtownsend.com

Yuzver’s picture

rj, look in meta on front page, double "google-site-verification".

rj’s picture

Thanks Yuzver. Correct, we have more than one vendor who needs access to Web Master Tools for the site and therefore needed to have each vendor verify the site separately, see this short post for details.

--

R.J. Townsend
rjtownsend.com

amedjones’s picture

great job ! the video section blew my mind , loved how you customized the interface

thanks for sharing

i want to be Drupal when I grow up

develCuy’s picture

Glad to have contributed with my grain of salt by influencing you to adopt OAuth.

Great case study btw!

--
A drupalero latino,
Working at Dilygent and
Blogging at http://develCuy.com