At Odopod we love projects that challenge us to make information accessible, relevant, digestible and engaging. That’s why we were really excited when YouTube approached us to help make the YouTube Trends project a reality.

YouTube Trends allows users to get a timely view of what’s being watched around the world as well as use tools to compare viewership across cities, states, countries and age ranges. If you haven’t heard about it yet, watch this entertaining video introduction featuring the Gregory Brothers.

The project presented an interesting set of challenges. First of all, with the immense wealth of viewership data that YouTube has at its disposal, how could we slice the information to make it relevant? How could we make the data accessible in meaningful ways? What interactions could we add that would provide value without getting in the way of the experience? What existing Google tools could we leverage to get the job done right?

The vision was for YouTube Trends to become part of the YouTube brand universe and even though it couldn’t be too much of a departure from an aesthetic point of view, it definitely needed to be an exciting new product with a unique voice. So it was our goal to help define an identity and design that would remain on brand but could also stand on its own. Ultimately, the design had to serve as a great vessel for all the content to come.

At its core, YouTube Trends functions as a blog where new content gets posted several times a day. This is a curated experience; not only is trending video content surfaced, but stories are also written to provide a narrative thread and voice that create a cohesive experience.

Using Blogger as a foundation allowed us to take advantage of the existing functionality that a blog publishing tool already provides right out of the box (creating blog post entries, tagging articles, pagination, individual article pages with user comments, search, etc.). That way, we could focus our efforts on finding ways to enhance the blog experience.

API Galore

Using several APIs we brought relevant data from different sources into the blog. For example, some of the persistent widgets on the right column such as recent entries, categories and links were created using Blogger tools and APIs. The YouTube API, on the other hand, was used to bring in data related to the most shared and most popular videos on the web. The Twitter API was also utilized to bring in YouTube’s Twitter stream, which adds another fresh element into the mix.

From a technical standpoint, one of the most interesting ways we fed the blog with data was using Google Docs as a lightweight content management system and data source. This might seem an odd choice at first, but this approach definitely became an ingenious way of leveraging an existing Google tool. Google Docs probably doesn’t immediately come to mind to be used as a CMS but it’s definitely a viable option for managing lightweight content. Aside from the fact that this eliminated the need to build a custom CMS tool, one of the great advantages is that a lot of people are already familiar with spreadsheets so there’s not much of a learning curve on how to edit the content. Some of the components that use this method are Trending Topics, 4@4 blog posts and Charts.

Custom widgets keep it fresh

Since content gets published at a considerable frequency, it was important to provide YouTube with some easy-to-use tools to add more interesting and flexible ways of presenting data beyond what Blogger allows. To fulfill this need, several custom JavaScript widgets were written. These self-contained widgets can be easily added to a particular blog post in a couple lines of code.

Top 10 Widget

For example, for the list that displays the top 10 videos for a particular topic, it’s just a matter of creating an instance of the appropriate JavaScript widget, passing it the div id of the container where it will get populated and the unique key of the Google Docs spreadsheet that contains the data. The rest just takes care of itself: fetching all the data and images, adding the functionality to the list and applying all the styles.

Dynamic charts

Another great example of a self-contained widget used is the chart. This widget is smart, easy to use and highly configurable. It has different display modes to allow for the variety of data it can be populated with. For example, based on the date ranges and data provided, the widget will draw the best possible view for the given information. Spreadsheets are also used here as a data source allowing to store complex data such as points on the chart, number of views, date, comments, and even what color to display or to which video to link.

Slicing the data

The second major component of YouTube Trends is the Trends Dashboard. This tool allows users to browse and compare videos among different audiences.

Comparing video viewership across countries

The simple interface invites users to filter the current trending videos by location and age. Once different trends are compared, users can easily highlight what videos are unique or common across their search criteria. This not only provides a window into the behaviors and interests of viewers but also serves as a tool for YouTube to generate content for the blog (see this post).

Google Docs is used once again as a data source but in this case, it's taken one step further. To make all this data manageable and keep the UI responsive, queries to the Google Docs spreadsheet are used to get the subset of data selected by the user each time the values change. This functions similarly to how SQL queries work but instead of pulling data from a Database, it comes from a spreadsheet that can be easily created and edited by non-technical content administrators.

Closing comments

We are thrilled that YouTube decided to surface this content and create tools for the public at large to learn about what’s currently “poppin’” around them or across the globe in the universe of online video. We are very proud of the result and we hope that you find it as addicting as we do.