Rhapsody: Web Player

Music Player

RealNetworks circa 2004

RealNetworks had a long relationship as a premiere streaming partner for Comcast. As part of a pilot program, RealNetworks partnered with Comcast to produce a co-branded radio player powered by the Rhapsody music platform.

For those folks who don't know about Rhapsody, it was basically the Spotify of it's time, the OG streaming music service.

Funny enough, the Comcast radio project was the catalyst for the Rhapsody web player. The higher-ups realized that Rhapsody should probably also have their own web player. About a month into the Comcast project, I started to work on the Rhapsody version of the experience.

Objective

One of the most popular ways to share music was via playlists. Back in the day, Rhasody had a feature that allowed users to create shareable playlists, but in order to listen to those songs it required: 1) the desktop app and 2) a subscription.

To grow marketshare, we decided to build a free experience to allow potential customers try the service before they buy. "Rhapsody 25" was born to allow potential customers to play any and up to 25 tracks per month.

Secondarily, the same UI had a Radio mode that played algo-driven radio stations supported by commercial breaks.

Visual Iterations

These were early design based on Rhapsody 3.0 also done in tandem with the Comcast Radio project.

Wireframes

Back in those days wireframes were made in Visio. As a designer, I could not abide by that tool. I designed wireframes using InDesign (Illustrator didn't have multi-artboard support).

Documentation

Before the age of Figma, it was the wild west when it came to design documentation, especially for a company with a small design team. Back then it required you to measure pixels in Photoshop, then export them to a graphic format to share with the developer. They originally were shared as individual graphics, which was a mess to track.

To aggregate individual files, I started to compile them into PDFs using InDesign. The rest of the design team followed suit as this made it easier to track design specs.