Heating Up the Charts: Billboard.com Redesign

Heating Up the Charts: Billboard.com Redesign

My former alma mater, Billboard, relaunched its consumer-facing website Billboard.com last week. I caught up with their VP of digital, Josh Engroff, about the goals, process and design elements of this project. Here's a look inside:



Goals of the Redevelopment

We had three main goals for the site when we started:

1. Make it about the music.  Our consumer traffic was already good - 4.5 million uniques per month. But to play in this crowded space we knew we had to add some things: streaming music, social features, fun apps, portability, an intuitive and attractive design. The working motto in the back of my head while we developed the site was "more music, more social, more fun". 

2. Leverage Billboard's core assets: especially the charts. Rather than data for its own sake, or data as a list, we sought to utilize the data as the foundation of a compelling consumer experience.  This meant exposing more of it - the Hot 100 and Billboard 200 are now totally unlocked -- and making it easy to go back in time to see what was popular in the 60s, 70s, 80s, 90s. Our music chart data goes back 50 years - no one else can say that. Let people interact with it! Significantly, we turned all the charts, current and historical, into music playlists (powered by the great music service Lala). 

3. Be comprehensive: the online music space is extremely crowded. For many users it's confusing - which service offers what? Which one will be around six months from now? Billboard.com eliminates that confusion - we have the music, we have the artist info, the access, the tours, the fans. Our search functionality is amazing - we have artist pages for nearly a million artists - not just those who've charted. For example, my cousin is a founding member of the Brooklyn band Ladybug Transistor - never charted, but they have an artist page on Billboard.com and nearly all of their albums are fully playable on the site.


The Process


Preparation: In September 2008 we drew up a 15-page product strategy document that became the basis of a formal RFP process which began in October. During September we'd had about 12 agencies in for capabilities presentations, and we picked a subset of that group to send the RFP to, some of the best in the business:
 
 â€¢ Razorfish
 â€¢ R/GA
 â€¢ Digitas
 â€¢ iCrossing
 â€¢ Method
 â€¢ Big Spaceship [Ed. Note: Big Spaceship designed the 2005 Billboard.com redesign]
 â€¢ Sapient 

The responses were excellent. In the end we chose Razorfish because (a) they had very specific experience in this space, (b) the individual team members were, to a person, extremely impressive, and (c) they had special technology skills that we needed.

Project Execution: The project timeline was aggressive and execution took a little over 6 months between kickoff and launch. In my experience that's pretty quick for a project of this size--this was a redevelopment, not just a redesign, and we were trying to do very new things with a great deal of data, both ours and third party. So in addition to retaining none of the old design, we retained very little of the old code base. 

In January, we began with one month of Discovery, which is essentially intelligence gathering: talking to website users and getting their input, conducting stakeholder interviews, performing a content and technology audit, and creating the advertising strategy. 

Phase 2, Design, started in February and had two sub-phases that occurred in parallel: creative concepting and wireframe development. The purpose of creative concepting was to figure out the overall aesthetic approach of the site - should it be minimalist and white, like a music blog, big and playful like Vimeo, modular and widget-y like Nike Plus? What role does photography and user gen content play? Can we tinker with the logo at all? One has to remember that for a 115-year old brand, these are not idle questions. 

We also thought about information hierarchy and layout. What elements should be on a particular page, how do you reveal chart info in a way that's both compelling and not overwhelming? What do we want the user to see and interact with first when they land on a new page? How can we link relevant content to other relevant content - in the way that IMDB does so well - to create an immersive, delightful experience? How do we make sure we never dead-end the user?

Phase 3, the Build phase, began in mid-March. I'm giving these phases discrete names but in truth they overlapped quite a bit, in an iterative fashion.  Build consisted of some heavy back-end stuff I'll spare you, and a lot of what is called presentation layer development, i.e. defining what happens when a user clicks on a particular element. 

One thing that helped us see the forest for the trees - and maintain our focus on the user experience in the midst of so much detail - was good documentation. Having functional specifications that define how everything works from a user's point of view is key to never losing the user's point of view, and thus a key to success. Documentation is one of those things that often gets lost in a project, because people mistakenly think it saves time.  But in my 12 years of doing this, I've never once regretted the time spent on documentation. And this includes a good style guide! 

Specific Design Elements of the New Site

Logo: We ended up playing with the logo a bit, most noticeably by shifting the colors inside the letters toward a more pastel palette. We did this partially because we really needed to make the point that this was a different billboard.com - we're not just saying it, we're showing it. This is not a hybrid B2B / B2C news site, but a consumer entertainment site all the way. And using the logo was another way of emphasizing that point. 

Use of layers: One of the most innovative things I think we did on the site was to make effective use of layers to enhance the experience. 

For example, we knew that we wanted users to have an unbroken music experience as they navigated from page to page on the site. This is fairly uncommon -- on most music sites, navigating to a new page causes the music on the page you're leaving to stop dead, which is a poor user experience. On Billboard.com, we put the music player in a separate layer - above the main webpage in what's called the "z layer" - so that jumping to a new page would not break the music flow. 

Similarly, the Visualizer - which reveals an artist's chart history visually, rather than as numbers - stays tucked away on the left side of the browser until the user summons it by clicking on the appropriate icon on a relevant page, like an artist or chart page. It can serve as a way to navigate the site by providing a widget-like interface into the world of the artist. If a user wants to see all of Michael Jackson's charted albums in one go, or drill into "Off the Wall" and see what songs were on it, or visit the chart from March 1, 1980 on which "Off the Wall" appeared in order to play other music that also charted at that time, he can. The Visualizer serves as a kind of a dashboard for this. When not in use, it stays unobtrusively docked to the left of the browser. 

BB.com2.png
We used technologies such as DHTML, Ajax, and Flash to do these things, but at the end of the day it was about creating a great user experience, not paying homage to a particular technology. 

Use of Photography: Our particular use of photography on the site is connected to the design vision and concepting phase I mentioned earlier. At the end of the day, the site is about connecting artists and fans, and nearly all the high-res photography we use on the site is of artists. This does a couple of things: 
1. Engages the user immediately: most people are on the billboard site to hear an exclusive by a particular artist, get more info about an artist, find out when someone's on tour, see a chart. Fans like seeing great images of their favorite artists, so we try to give them that - through slideshows, within the articles, on the artist pages. 
2. Suggests that this is not your brother's music blog: high-res photography, by its nature, feels premium. Billboard is a brand that has been around for a long time, one with great authenticity and access. We wanted the imagery to convey that. 

. . . . . . . . . . 

As the Vice President of Digital for the Media and Entertainment group, Josh Engroff leads strategy and product development for all of Billboard's digital properties, including Billboard.com, Billboard.biz, mobile applications, and the Billboard API.

Prior to Billboard, Josh was the co-founder and Chief Operating Officer of the popular music service Jango.com. He began his career 12 years ago as co-founder of the consumer software company Dash (named Best Online Shopping Tool of 1999 by Time Magazine), spent several years as a Client Partner at Agency.com, leading key accounts with Discovery Networks, Sony, and Polo Ralph Lauren, and co-founded the successful web design firm, Marching Ant.

Josh holds a Master's Degree from Princeton University and a B.A. from the University of Vermont.
  • Jeremy LaCroix

    I'm with Grant, the visualizer is a BIG idea.

    The visualizer alone is a wonderful example of re thinking how to expose information and drive user engagement on editorial sites.

    I can see this idea being adapted to other sites easily.

    I'm also a fan of the use of large rollover "hot spots" found in the CHARTS dropdown from the top nav bar. They are super friendly and inviting to use.

    All that is six months, WOW! It's important to note the time difference in what it takes to re-launch a site of this scale and complexity compared with how fast magazines can turn around makeovers. For instance I heard it took 18 months for a similar process on ESPN.com's re-launch. That's a lifetime in magazine speak!

    Kudos!

  • Grant Glas

    Marvelous work.

    The music player and visualizer in a separate layer is an innovative idea which I love. Being a frequent user of pandora and imeem, I really appreciate the design and interactivity of the new billboard.com

  • Mike Ley

    great redesign. everything is presented really cleanly throughout. i especially enjoyed digging around the artist pages and past charts, which had a last.fm feel, especially in the related artists.

blog comments powered by Disqus