Yahoo! Music Videos on Facebook

[Reposted from http://www.krazydad.com/blog/]

The last few weeks, I’ve been working on a very cool application for Facebook, called Yahoo! Music Videos. If you’re on Facebook, you can check out the public beta now.

If you’re not already on Facebook, check out Facebook! It’s kind of like MySpace, but not as ugly.

Our app is a mashup of sorts, which combines the personalization features of Facebook with the massive video library of Yahoo! Music. When you visit its page, it gets the music info from your Facebook profile and your friend’s profiles and finds a collection of music videos which match the names of the singers and bands you and your friends have listed. From those videos, you can then find videos of related artists, view them, and share them with your friends.

If you’re not interested in software development, you’ll probably find the rest of this pretty boring. Go watch a video!

* * *

Yahoo! is a very big company, and like most big companies it can be difficult to turn projects around quickly. Learning how to do rapid development in a company of this size has been a real eye opener for me.

This particular project was started about a month ago, when I received an email from Ian Rogers asking if anyone was interested in getting Yahoo! Music onto Facebook. Ian is the head of Yahoo! Music, and I’m pretty sure that without his annoying naggingpersistent encouragement during that first week, the project would still be in the planning stages.

I got involved (even though I was already pretty busy on other projects) because a Yahoo!/Facebook app would amount to a mashup, and I love making mashups. Mashups are challenging because they involve multiple colliding technologies. In this case, not only would we be combining the Facebook and Yahoo APIs, which are very different, but I would need to be working in both PHP and Flash Actionscript, and I’d need to do a little image rendering on the back-end. I had been hired by Yahoo! pretty much on the strength of the mashups I had created with Flickr, using those same technologies, so here was a chance to exercise those skills, but also to get to know a new platform I had little familiarity with.

By the following day, I had a basic “Hello World” style app running, using Facebook’s awesome F8 APIs. By the way, you can read more about Facebook’s development platform here.

Within a few days, I had received a hastily hand-drawn spec (I contributed to it by drawing a little stonehenge monolith in the corner, marked 18″), and I began a series of little experiments to see what was possible to do on Facebook. I found out, for example, that for the most part, I wouldn’t be able to use Javascript, which is normally available and makes it possible to do most of the cool AJAXy things web users have come to expect. On the plus side, I found that we could embed Flash movies into our Facebook app, and make use of an embedded video player that Yahoo! music was already preparing for another project. The video player wasn’t a perfect fit for facebook, but I saw that we could slightly tweak it to fit our needs. Scott Haynie, from our web services team, helped me identify a set of existing Yahoo! Music services that could power the app, allowing users to search for videos in various ways.

Two weeks later, our design folks had transformed the hand-drawn spec into a pretty ambitious multi-page full color print-out, and we had set a tentative (and insane) release date of June 30, but I hadn’t gotten much done on the actual app, and I was starting to get nervous. I sent out an email stating emphatically that we needed another developer to concentrate exclusively on our backend or video player needs if we were going to get the application out in time. As it turns out, I was wrong. We didn’t get that developer, but we did get the app out.

In retrospect, I think I was feeling the same angst that a child feels, when tasked with washing a sink full of dishes. There was a mountain of work in front of me, I pretty much knew how to do it, but I was overwhelmed by the size of the pile. I needed to dunk my hands in the water to get over that initial hump of inertia.

So when I was done kvetching I got to work, and cranked out the first version of what became our Facebook app over the weekend. The app didn’t adhere all that closely to our original spec, but it was usable and fun, and more importantly, it contained a feature-set that was doable in the time-frame we had to work with. In making the app, I omitted the features that would have required building a back-end database. At the same time, I added some “low hanging fruit” features that were cool (like “Video Dedications”), but not in the original spec. This is a good example where building a quick and dirty prototype becomes an essential part of the application design process. It made me, the programmer, much more invested in the design process, and enabled our designers to get their hands on a working app so that they weren’t working completely in a world of hypothetical constraints. Fortunately, our project manager, Michael Spiegelman, encouraged this method of working. If I had been required to stick to the spec more slavishly, we would have been in trouble.

Now, I wonder what would have happened if we had added that second developer I wanted to the project. I think its likely we wouldn’t have made our date - the additional manpower would have justified maintaining more of the original feature set, and made the project more complex.

Instead, working closely with our awesome UED folks, Ruth Kaufman and Lino Wiehen, we modified the spec to more closely match what I had actually made. We essentially threw away the full color print out, and went back to working with hand-drawn specs. In retrospect, I think this is the way to go. The full color print outs really aren’t needed until most of the functionality has been fleshed out in a working prototype. Ruth and Lino produced a beautiful visual design that retained most of the functionality that I had introduced, but used the visual grammar of their original specs. Their flexibility made it possible for us to bring the app to completion in the remaining two weeks.

The last two weeks have been a mad rush as we raced to complete the app by June 30th. Last night, June 29th, we finally gave it it’s first “push” into the world, and I’ve been proudly tracking it’s progress since.

The app is still a little rough around the edges (hence the word ‘beta’ at the top of the page), and we’re still tweaking it, but I’m pleased to say it’s a very compelling way to view videos!

I hope you like it!

Oh yeah, I almost forgot! During those first two weeks, when I was still experimenting and procrastinating, I made a pretty cool mosaic of 3,600 of the artists on Yahoo! Music. Here it is.

Here’s the jumbo-sized version. Click on any of the artists in the image to view their page at Yahoo! Music.

Jim Bumgardner
Yahoo! Music