Have you ever been listening to your own music playing on shuffle and said, “Wow, I didn’t know I owned this song?” Or heard a song and said, “I wish I had more songs just like this one?” Or realized that your music ran out an hour ago and you’ve been listening to nothing but air, and yet you’re still wearing your headphones? These are the problems that Soundflavor set out to address with its new application and website.
Soundflavor is a technology based on a vast database of information about the euphonic makeup of songs, and all of it is keyed into the Soundflavor system by trained music professionals. Songs in the database can be sorted by a wide variety of characteristics: Tempo, mood, genre, type of instruments and so on. Using these characteristics, Soundflavor can match a song to other songs, an artist to other artists or create playlists based on a single song or set of songs, all with the same “flavor” of sound. If you’ve ever put on a song at the beginning of a party and wished you could just tell your computer to play the same kind of music for the rest of the night, Soundflavor is for you.
Product Strategy
Soundflavor came to the table with a preexisting website, which already had an established user base and several successful partnerships. Their next goal was to develop a more robust and consumer-oriented demonstration of their technology. Through Adaptive Path’s New Ventures program, Soundflavor and Adaptive Path set out to create a service that would best utilize and showcase the Soundflavor technology.
The combined team came up with a new strategy for the service, one that included two elements: A desktop application and a complementary website, each specially designed to share a high degree of interaction and sychronization.
Dubbed the Soundflavor DJ, the Windows-only application (Mac version coming soon!) was designed to supplement (as opposed to replace) iTunes, providing functionality and flexibility that the standard iTunes interface doesn’t offer. The DJ acts as a control for iTunes and, more importantly, allows users to “flavorize” the music they’re listening to by matching one type of music to a similar selection of music, all in real time. This allows listeners a greater degree of control over the mood in their current listening environment, much more than is possible in the list-based iTunes interface.
Figure 1: The Soundflavor DJ application (click to enlarge.)
Branding
Siren Systems (since renamed Soundflavor) started out with a playlist-sharing website at Soundflavor.com, which originally was designed as a one-off proof-of-concept for the Soundflavor technology. The Soundflavor team, however, felt that neither the functionality of the site nor its existing identity, which had a very 70s feel, accurately reflected the value of the service.
For the new Soundflavor website, the AP team developed a concept that tapped in to the very personal role music plays in people’s lives. The idea was to evoke the creativity and individuality inherent in the process of putting together a playlist, thereby demonstrating that this site was for people who wanted to showcase their highly individualized relationship to their music. The approach referenced the rawness and physicality of non-digital playlist creations (“mix tapes,” for example) to draw a parallel between the way music curating worked in previous mediums and the way it works online now. The team carefully selected a strong visual icon, one that could work independently or in conjunction with the logotype: They chose a cherry, which was actually inspired by the one aspect of the previous site identity that the Soundflavor team liked.
Figure 2: The Soundflavor logo.
The cherry icon was selected because it had a strong visual presence, and also because it represented a number of ideas: The concept of being “cherry picked” as well as the idea of getting the best selection out of a random set of possibilities, as with a slot machine. In fact, “cherry picks” became the name of the Soundflavor-selected tracks, indicated by a small cherry superimposed on the album cover in the DJ application.
For the development of the Soundflavor DJ application, the team took a different approach. Because this was an actual playing device, a design was selected that evoked familiar playing devices, from turntables to the iPod. The fact that this was a music application was fortunate because the design conventions for music apps allow for a much greater degree of interface fun than your standard GUI application. The team took full advantage of this opportunity without going too over the top. They also took inspiration from the range and variety of existing music apps on the familiar Macintosh platform.
The final design is playful but functional. It introduces new concepts for a musical application into the mix while also reinforcing the idea that the application works well as a supplement to iTunes.
Designing the Soundflavor Player
Because it was the more critical component, the Soundflavor player was designed before the website. The rough concept for the form of the player was designed quickly, over two days of intense brainstorming sessions. Using rough sketches on a whiteboard, the team created an initial “vision prototype.” Though the design of the application would change radically from this initial prototype, the core ideas and the base functionality remained entirely intact.
Figure 3: The Soundflavor vision prototype (click to enlarge.)
The process of developing a high-fidelity prototype served both to inspire the team throughout the development process and keep them focused on the functionality that was originally outlined in the spec. Although at times the prototype did become a hindrance: Due to various technical constraints, the form had to change later in the process. But even then, the vision prototype proved useful because it provided a baseline against which the team had to successfully argue for the necessity of these revisions.
Conceived of as a desktop widget, the player would show upcoming and previous songs in its (collapsible) “arms” or “wings.” In its center, the current song being played would appear. Listeners could increase or decrease the number of “flavorized” (Soundflavor-selected) songs, as well as create playlists based on whatever was being played. Rough wireframes outlined this basic functionality.
Figure 4: A Soundflavor DJ rough wireframe (click to enlarge.)
These wireframes, while allowing the development team to begin their work, were unable to properly explain and detail the system, so a more elaborate version had to be created.
Figure 5: A Soundflavor DJ detailed wireframe (click to enlarge.)
Using (and revising) the new wireframes, the AP team developed a visual design. A particular challenge was finding the right affordance for the flavorizer control. Dials, sliders and knobs were all tried and discarded.
Figure 6: An older version of the Soundflavor DJ flavorizer.
A technical constraint—which later turned out to be not a constraint at all—caused the player to morph from its initial round ball (seen in the vision prototype, above) to its final rectangular shape. This caused considerable changes to both the visual and interaction design. For example, where to fit the album track names became an issue. The original player had room for four buttons, and it had to be whittled down to just two. This turned out to be a good thing, however, as it focused the designers away from turning the application into yet another music player.
Finally, the team added one feature that they were all dying to have for their own personal use: A contextual silence-filler, perfect for those times when an album or playlist runs out, leaving the listener—otherwise distracted by work or some other task—absentmindedly listening to the sound of silence. With Soundflavor running, this is no longer a problem. Instead, the application looks into the listener’s library for music similar to whatever was playing before and keeps the music flowing, thereby solving a simple but common problem while also proving the value and power of the Soundflavor technology.
Designing the Soundflavor Website
The second element of the Soundflavor service is its website. On the website (not yet launched), users can create and share playlists either via existing playlists (theirs or someone else’s), by picking one song at a time or by using the Soundflavor technology to build entire playlists based on a single song or artist. The website is still under development, but suffice it to say that it uses a set of design metaphors intended to better model the human experience of sharing music with one another.
A particular information architecture and interaction challenge the team encountered while building the site was how to display search results. Searching on, say, “Elvis” would bring up not only Elvis Presley but also Elvis Costello, plus any song with the word Elvis in the title. The end result could potentially produce an unwieldy list that proved difficult to fit on a page. A solution was devised to display both artists and songs in an Ajax-powered display that could expand particular artists when necessary.
Figure 7: Search results on the Soundflavor website (click to enlarge.)
The Application Goes Beta
In August, 2006, the Soundflavor DJ went into private beta. As always, having live users interact with the product revealed some hidden flaws as well as some unexpected approaches to using the service.
Unsophisticated users were having difficulty getting started when the application first launched, so the team devised a process to preload songs and provide a simple display of the software’s features. Users also had a surprisingly strong reaction to a feature that had been de-emphasized in the design: They were very interested in finding and playing music that they didn’t yet own (but could buy). Based on this feedback, the team reworked things to make it easier for a user to “shop” for new music within the application.
Lessons Learned
It’s no secret that application development takes both time and attention to detail, and settling on scheduling strategy for how much detail to include can be a particular hurdle. Documenting states and animations in wireframes proved to be a difficult chore, but the tight collaboration between Adaptive Path and Soundflavor’s engineering team, which started right at the beginning of the design process, eased the struggle considerably. When working in a startup environment, time is of the essence, so the team ultimately chose not to use the documentation process as a way to communicate ideas in advance. Instead, the application and site design were iterated in person, while after-the-fact documentation was generated to capture major points of agreement. In some cases, the Soundflavor developers were moving so quickly that new features and directions made it from the whiteboard into the application prototype before they ever found their way into our wireframes.
Another aspect of working in a startup environment is that the possibilities are wide open, and the creative energy, though incredibly valuable, can sometimes threaten to overwhelm the process. To appropriately constrain the feature set to something that could be developed in the time available, we needed to keep the scheduling limitations constantly in mind. There was no shortage of good ideas generated by both teams, many of which we had to keep track of separately so they wouldn’t distract us from the focused design work at hand.
It also helped to remember the possibilities for future development for both the application and the website. By keeping in mind that this was the just first version of both, the team was able to design a framework for the application that could be extended beyond just the version seen in the first release.
Overall, the process of working with the Soundflavor team was one of the most enjoyable collaborations we’ve had at Adaptive Path. We have high expectations for the success of Soundflavor and look forward to seeing how the Soundflavor team continues to evolve the application and site in the future.
As of today, the release version of the Soundflavor DJ application is available as a free download on their website. We hope you enjoy using it as much as we do!
Lane Becker is a founder of Adaptive Path and developed the New Ventures program for the company. He specializes in design and process strategy, and loves working with startups.
Dan Saffer also contributed to this project and developing this case study. Dan is a senior interaction designer for Adaptive Path and authored the recently released Designing for Interaction: Creating Smart Applications and Clever Devices, and will be teaching a workshop based on the book in New York on October 25.
Source: Lane Becker
License: Creative Commons