BY ALISSA WALKER

DESIGN DISCIPLINES MAKERS Designing for one of the internet’s best-known music stores is no song and dance. Here, ’s creative team faces the music as they share (legally) how they keep the site and all its high-tech features chart-toppingly fresh. Nose around the internet long enough and you’ll invari- ably cross paths with some green-eyed cats hawking a million songs for only 15 bucks. If the deal doesn’t make you do a double-take, the striking familiarity of the headphoned kitties will. Yep, that’s a banner ad for Napster, the former file-sharing darling of the college set, now the recently relaunched, completely legal online music purveyor. In two short years, Napster has transformed the download landscape with a revolutionary sub- scription-based business model. About 412,000 subscribers, as of July 1, were paying a monthly fee to access the entire Napster library, which can be streamed to their computers and down- loaded to specific media players. The task of selling this new Napster to con- sumers is entrusted to a tight-knit gang of in-house designers, many of whom have worked together for years at several music-related companies. Head of aes- thetics Jino Ok recounts the previous gigs for his team: “Before Napster, we were at Pressplay, also a music-

HELLO KITTY download service. Before that, we were at a company The Napster Kitty called Farmclub.com, which was a music label and TV has undergone show.” Ok is one of 11 people on the creative team, several operations since first created by including seven designers, one Flash engineer, two a friend of founder writers and one photographer/designer. Shawn Fanning. Geoff McFetridge The team’s experience in the music arena was gave the Kitty a essential as they engineered the Napster identity, web body, including his presence and application from the bottom up. The signature orange T- shirt and his urban- designers brought Napster’s idea of “renting” music chic messenger bag. to life—an idea that’s since been emulated by several major rivals. With subscriptions now offered at sites like MSN Music, Yahoo! Launch and RealRhapsody,

114 • DECEMBER 2005 WWW.HOWDESIGN.COM ROCKING OUT and dozens of new sites popping up every month, While the design team cre- competition has gone from fierce to ferocious. Plus, ates some features from tem- plates, many, like the artist Napster faces additional heat from the illegal arena: pages, are built from scratch. sites like and WinMX. That’s impressive considering that, upon launch, they had And the creative challenge isn’t just educating pro- 2,000 such pages to create. spective subscribers about the service; it’s also ensur- To get it done, they worked in ing that users can easily browse more than 1.2 million batches of 500 per month. tracks to find the Three Weird Sisters song “What Granny Taught Me” as easily as the latest Lindsay Lohan single. And it’s also important that customers can exchange and discuss music, using additional features that represent the centerpiece of Napster’s philosophy. All of these responsibilities fall squarely on the shoulders of the Napster design team, who rely on a superior graphic language to keep users playing their tunes.

MUSIC TO THEIR EARS “Our edge is our commitment to the music,” Ok says. “We’re not a big corporate company, and we don’t want to project that image.” Unlike other major music sites, Napster focuses on the user’s ability to discover new artists, especially unknown ones, in a grassroots, music-only environment. To allow users to find tracks within the Napster uni- verse, the team created a host of music-discovery fea- tures and then determined how those features would integrate with the application. “We brainstormed the

VIDEO KILLED THE RADIO STAR SOLO PERFORMANCES The Napster team also created the interface for the Windows Certain feature sections of the application have their own Media Center Edition, an operating system that lets users con- branding to help users distinguish the different types of content. trol Napster on a television monitor with a click of their remote.

METAL HEADS MOVE TO THE MUSIC Geoff McFetridge’s characters To encourage more subscrib- populate the animated spots. ers, designers must constantly create banner and pop-up ads that illustrate new pro- motions and deals. “Those are done in spurts where we’ll have two to three people working in sets,” Ok says. “They’ll do 10 to 12 versions with 15 to 20 interactions. Those have a pretty short turnaround.”

116 • DECEMBER 2005 WWW.HOWDESIGN.COM names of everything,” Ok says. “Then we did several rounds of comps to decide what the logos would look like. We took all the elements and started designing THE SITE YOU MAY NEVER SEE the sections and how the content would fit together.” Excited to see Napster in action? If you’re a designer, you’re not Napster now acts as a community, incorporating likely to view more than a few web pages. Because Napster uses music-discussion blogs and message boards, as well the Windows-friendly .wma format and is based on ’s as a simplified e-mail program that allows members to Janus DRM (digital rights management) technology, the applica- share songs. It even provides recommendations: Click tion is not supported by Apple products. That means Napster a button, and Napster creates a radio station based is off-limits to Mac users. Including Napster’s own design team. on selected songs. Napster also has hundreds of artist Most of Napster’s designers have two computers: a Mac to bios and discographies, plus features like Fast Forward work on and a PC to check their work. When developing graphics and Tribute, which highlight emerging artists and for the application, the team must also generate a PC-friendly influences—all maintained by the design team. reference, such as a bitmap or JPEG, and isolate all the design elements as separate files. Depending on their final destination, ONE COOL CAT these go to one of two PC-proficient groups: the HTML integra- Both in substance and style, the team pushed Nap- tors or the client engineers. ster’s identity so it would be radically different from The client engineers develop the Napster application, which other sites. “For our look, we went for a very progres- is the program that streams, downloads, transfers and organizes sive vibe,” Ok says. “Our early campaign artwork was users’ songs. The application lives on users’ computers and must created by Geoff McFetridge and consisted of an be downloaded from the Napster site—Mac users, this is where anthropomorphized version of our kitty logo along with you’ll get the error message. Integrators handle all web-based a host of other characters. Colors were unique and programming, including instructions for downloading the app, designs were bold. This really helped set us apart.” the artist and album pages, music programming content, regis- McFetridge’s creatures were so popular that Nap- tration pages and the Napster.com website. ster added a creative page where users can download To view the work of the client team, the designers must screen savers and wallpapers, stills from the ani- download the latest build on a PC. Of course, a web design can mated TV spots and instant-messenger icons. Napster be checked on a Mac, but even then there are some differences. remains the only online music site with its own mas- “Windows and Mac have different usability standards,” Ok says. cot—giving itself a memorable and playful personality “For example, on a PC dialog pop-up, the preferred action is on to build upon. the left of the button row, and the Mac has it on the right. It’s a This iconic language carries over through the appli- small detail, but a very important one. Because we’re so used to cation. Instead of slapping album art on the site, the the Mac operating system, we really have to designers paw through the record labels’ photo archives make a conscious effort to pay atten- to find appropriate shots of the artists. “If you search tion to these details.” any album or artist, they have a well-designed bio and Although Apple doesn’t collection of recommendations,” Ok says. “Also, each allow Napster near its Macs genre has custom promos that are updated constantly and because it doesn’t so the content is always fresh.” Where other sites veer offer a subscription ser- toward vanilla (iTunes) or cacophony (Yahoo! Music), vice, it’s not a true rivalry. Napster’s vibe is clean and fun. “The business model for The designers were also adamant about creat- iTunes is fairly different ing an ultra-simple user interface that resembles the from ours,” Ok says. “But Windows operating system. Music is organized into there’s plenty of other expanding folders, making it easy to navigate among direct competition.” artists and genres. “The Napster audience is a wide Apple’s incompati- range—from 18 to 44—and is generally tech-savvy,” bility does present one Ok says. “We wanted people to be comfortable with it problem for Ok. “A lot right away, so they immediately knew how to use it.” of my friends who are designers don’t have KEEPING IT FRESH an opportunity to try it With sometimes hundreds of songs added to the appli- out,” he says. “It’s an entire cation every week, some members of the design team audience who doesn’t get to see it, spend all their working hours simply updating content. which is unfortunate.” Music must be legally available on certain dates to comply with label releases, so designers get a weekly hot list of promos to be created for upcoming artists and albums. “There are three different sizes for each promo, and five to seven promos for each of the 12 genres,” Ok counts. “That’s at least 180 custom images that have to be created weekly.” The task of keeping the content current and cre- ative is then compounded by Ok’s responsibility to 1 2 2 »

118 • DECEMBER 2005 WWW.HOWDESIGN.COM ROCK THE CASBAH Napster headquarters con- sists of two offices a few blocks apart in the gallery district of West Hollywood. The creative team is housed in a complex with a recording studio where live artist ses- sions are produced.

integrate and balance the needs of Napster’s marketing and music-programming departments. “The hardest part of my job is managing expectations,” he says. “All the groups within the company have their own vision and want to put in their two cents. Unfortunately, these visions don’t always align, so we are often pulled HARD DAY’S NIGHT Ok is one of 11 people on in many directions. Maintaining consistency becomes the creative team, including a big challenge.” seven designers, one Flash engineer, two writers and one Even more daunting is designing for the rigid struc- photographer/designer. Even ture of an application, as opposed to a website. “An with a full staff, workloads app is much less forgiving because it has to create can get heavy. “12- to 18-hour days are not uncommon,” Ok the illusion of a perfectly working machine,” Ok says. says. “The longest so far has “Graphics have to be exact; if there’s a graphic missing been 45 hours straight.” or if something is even slightly misaligned in an app, it’s very unsettling.” Although a quality-assurance team thoroughly checks the application, mistakes do happen and changes can’t always be made right away. Because of the volume of content that must be updated regu- larly, small edits can take up to a week. Any changes to the look of the application—the frame, play buttons, burn windows—require that the team creates a new version, which users then must download. A complete update could take months. Still, Ok notes, Napster’s stature brings a level of importance to this sometimes-tedious process. “A download client has a certain amount of permanence to it,” he says. “There’s more of an investment. It’s a difficult thing to create, and being able to contribute to that is pretty satisfying. That, and the fact that there are a lot of people seeing it.” And, more important in Napster’s case, hearing it.

Alissa Walker writes for and about designers. She lives in Hollywood, CA. [email protected] JINO OK WEST HOLLYWOOD, CA [email protected]

122 • DECEMBER 2005 WWW.HOWDESIGN.COM