The Cred.fm landing page for new users

Cred.fm – The Music Service

Cred.fm is a music project I worked on as creative director and lead designer from January 2011 through December 2013.  The project went through several phases, from a streaming music/social game hybrid to a curated playlist service, and included widgets that could be embedded on various platforms. This page focuses on the “Music Service” portion of the Cred.fm project.  For the game stuff, click here. Below you can see a glimpse into the various phases the project went through and my part in them.

 Music for Facebook

Early music layouts for Facebook
Early music layouts for Facebook

Initially the project was decided to stay on Facebook, which imposed size restrictions on the app size we could realistically do.  This led to interesting problems for how information could be presented in an attractive yet still functional way.  Additionally, the project managers felt it was critical we provide curated playlists, so attention was paid toward putting these front and center.

A final attempt for Facebook
A final attempt for Facebook

We struggled with getting traction on Facebook for the music streaming, but despite interest from user tests, we were never able to get significant traction.  Fortunately, with declines in Facebook app performance overall we were able to finally go for an independent site installation, which allowed us to be more competitive instantly.

A Fresh Start

A semi-modern look for Cred.fm
A semi-modern look for Cred.fm

With something of a fresh start, I went and designed the site to be more modern.  A wrinkle was thrown in right away, which is that YouTube updated their minimum video size requirements to be a larger resolution.  Project managers insisted on a floating music player that allowed the user to browse underneath it, so design had to be oriented around that.  Immediately I integrated features such as Twitter and Tumblr integration into a “music feed” while highlighting our new curated playlists.  Users could still create their own playlists and share them, of course,  as this was one of our most popular features throughout the life of the project.

Embeddable Content

Widget

Embed Cred.fm playlists on your site or Tumblr
Embed Cred.fm playlists on your site or Tumblr

The CEO of Credible Research saw an opportunity for embedding Cred.fm content across the internet, and so focus was directed towards creating widgets that could serve such a purpose.  This took many forms over the course of the project, from users embedding the widget on their Tumblr, to full-service collaborations with music blogs.

The widget embedded in CraveOnline
The widget embedded in CraveOnline
Client dashboard for their own embedded widgets
Client dashboard for their own embedded widgets

This initiative led to designs for widgets that could fit into a wide variety of situations, from sidebar integration to main content integration.  I also designed a simple dashboard and functionality for clients to manage their widgets and featured playlist content.  Playlists were embedded on a variety of sites, here are a few samples: Washed Up Emo, LA-Story, This is Albatross. A promo site I designed for prospective Cred.fm partners

A promo site I designed for prospective Cred.fm partners — click for full size

The Final Pivots

A "LA" version of Cred.fm -- click for full size
A “LA” version of Cred.fm — click for full size

With the CEO and a separate group working on widget sales, I felt we needed to focus on what Cred.fm would provide as its own site in a more direct manner.  We settled on focusing on the young “hip” scene, especially around LA where we were based, and being deliberate about targeting young tastemakers.  This meant focusing on what we identified as three main “scenes” — hip hop, electronic, and indie music.  With this in mind, I focused less on an “everyman” site as we had previously worked on and towards a more hip, young, modern look with a lot of bold colors.

A look at a possible "tablet" Cred style
A look at a possible “tablet” Cred style

At this point I decided that we needed to focus on the playlist creation process and making playlists fun, beautiful, and easy to share.  This led to the final Cred.fm implementation, currently online and also shown below:

A mockup for the final Cred site layout
A mockup for the final Cred site layout — click for full size

I made a lot of decisions in the interest of making the site more modern and functional.  For one, I took the music player off the page and relegated it to a popup that began and updated when the user selected a playlist.  This allowed them to browse Cred.fm or other sites easily while having music playing, and without the large video covering up a lot of space.  I also wanted to ensure we used a lot of large images, and integrated relevant scene feeds from Twitter and Tumblr to indicate a sense of authenticity.  We allowed users to upload their own images to customize their playlist cover art, and tracked listens and favorites for users.

Artist and Genre Content

In the final months, we moved to incorporate Artist and Genre pages into Cred.fm.  These pages hold artist information sourced from various places (such as Wikipedia) but also playlists with music featuring the artist in question,  similar artists, and so on.  This functionality was another feature that could easily embed into a partner site, giving them hundreds to thousands of pages of content or their site, which they could then monetize themselves.  Some examples on Cred.fm as they were implemented are here: Foo Fighters, Daft Punk, Kanye West.

Artist Pages
Artist Pages — click for full size

That’s all, folks!

That concludes my work on the Cred.fm project.  Feel free to check the gallery below for more samples of what I worked on.  If you’re interested in what came before the music service part, specifically the game stuff, click the link below. Cred.fm – The Game

 

Gallery

Here’s a bunch of mockups and images from various stages of things I worked on related to the music service part of Cred.fm.

designed experiences