Case Study: RockPeaks.com

RockPeaks.com aims to be the web’s largest database of live rock and roll video. Launched on March 9th, 2009 using Drupal 5, RockPeaks was conceived and designed by Barnaby Marshall and Carmen Dunjko of Pod 10 Art+Design, while the build was expertly handled by developers Rowan Kerr and Adam Hunter using a mix of off-the-shelf Drupal modules and a significant amount of custom coding.

Aim: The site’s mission is to make it easy for music fans to watch and learn about live music performances they’re interested in, and to let them add to, edit or correct the information that surrounds the video clips, each of which are indexed by title, artist, show/venue, and year, and a series of other taxonomy terms.

Mash Up: RockPeaks incorporates articles from Wikipedia, video embeds from YouTube and other streaming sites, “Buy” links out to Amazon, “RoIO” links out to the trade-friendly music community, downloadable professional and fan-generated artwork, as well as original written reviews from its contributors.

Editorial Schedule: RockPeaks publishes 2 reviews a day Monday to Friday – a loose “Daily Feature” and a themed “Peak of the Week”. The staff blog about “Notable Clips” which are available for review, and all artists and shows/venues have a wiki-like page that summarizes key information. The site is something of a hybrid between a database (like the IMDB) and a traditional music magazine

Design: The site employs a layered, transparent look, and eschews the bright white backgrounds found on so many web 2.0 sites, favouring a darker, more TV-is palette. An early attempt to use SiFR to provide custom fonts for headings was abandoned as too CPU intensive, and the use of Flash on the site is restricted to the upper gallery area, and to animated rollover thumbnails on reviewed clips.

Information Architecture: “Clips”, “Artists” and “Shows” are the principal node types on the site. Clips are the most sophisticated, as they have many different states – unprepared, available for review, under review, undergoing editing, ready for publication and published – and they also contain the largest amount of subsidiary data (info pertaining to who, when, where, what etc…) The very best “peak” clips are written up by site contributors and published as finished Reviews.

UI & UX: As befits a Drupal site, there are many ways of viewing and searching for information. The primary navigation takes you to key landing pages with alphabetized, table of contents style indexes, while a series of JavaScript list boxes serve up “search results” that are presented in table form with sortable column headings. Both Artist and Show pages feature a JavaScript twirl-down expandable tree gadget that lists either all of an artist’s known Film TV or Video appearances or all of the performances on a given show.

Tools: Community contributions to RockPeaks come via a series of tool icons, that typically trigger a thickbox screen with an inline form or field set. Contributors can correct dates and facts, flag clips as being missing or enter new embedded link information and the like. For material that has not been commercially released, the clipboard icon allows visitors to sign a petition, which will be submitted to the rights holder when a certain threshold of signatures is met.

Contrib Modules: RockPeaks uses the following modules: CCK, Views, Panels, Advanced Profile, Advanced Forum, Bio, User Badges, User Points, Signit, Fivestar, FCKEditor, Scheduler, Service Links, Share

Custom Modules: S3 Backup, Flash Gallery Module, Clip Module, Wiki Excerpt Module

The majority of effort in coding RockPeaks went towards UI features, theming and the workflow of clips. Views & Panels are used in several places with RockPeaks-specific data (thanks to the Views API) to allow for flexibility in presentation over time. It would be nice to say that no modules were harmed in the creating of this site, but a few minor patches to the core node, search and user modules were required to handle the unpublished nature of clips before they are promoted to reviews.

In an effort to minimize page load times, static assets are served from Amazon S3, JavaScript has been bundled into a single file and compressed using Yahoo's YUI Compressor, and images have been combined into sprites wherever possible. CSS files are combined with Drupal, served locally and compressed server-side. Almost nothing has been left un-themed thanks to the power of Drupal's phptemplate engine with its ability to define different template files for different situations and inject custom data into those templates. A sprinkling of JQuery helps to streamline the experience for site contributors by minimizing page-loads when interacting with clip data.