Library X: Product Design Case Study

OVERVIEW

Library X is a disruptive new platform that uses Artificial Intelligence to combine pre-recorded music loops to generate original tracks that can be used for advertisements and other creative content. While the backend software had already been built, the only thing this groundbreaking product was missing was the interface.

GRAND FINALE

Through research, design, and testing, we created a simple and direct user interface that allows users to stay focused on their task while instilling visual excitement. We leveraged bright colors to add delight and a touch of modernity to the dated stock music library game. Over 80% of users were able to understand Library X’s purpose and how to use the platform on the first try, which is stellar for a software that does not exist yet. Many users expressed their excitement about the product and that they couldn’t wait for it to be released.

For a more detailed look into our process, read the full project report here.

Three different screens of Library X MVP screens. Screens are landing page, product set up, and edit bay.

•••

THE PROBLEM

During our kickoff meeting, our client debriefed us about the music licensing industry as well as some of his proposed features for the platform. Creative teams and producers currently have to comb through stock music libraries for hours to look for tracks to add to their content, and if needed, they’ll also go in and tweak the songs to sync to video. Being in the music industry himself, our client is also passionate about properly compensating musicians for their work as well as offering creatives within advertising agencies more flexibility and creative license when it came to actualizing their briefs.

From there, we drew our initial assumptions and initial problem statement:

  • Music ad industry professionals use the same stock tracks repeatedly

  • Stock music libraries are difficult to navigate

  • People in the music industry don’t have the time to sort through stock music libraries for hours

  • Stock music libraries offer mostly computer-generated music that doesn’t sound “real”

  • Stock music libraries lack flexibility to edit the tracks to fit the user’s needs

How might we streamline the stock music search for busy industry professionals?

•••

RESEARCH & INSIGHTS

In early conversations with our client, we determined Library X’s unique value proposition (UVP): to become a one-stop-shop for high-quality music that is friendly, flexible, cost-efficient, and easy to use. We also took a look at existing stock music libraries in the market to help us better understand where Library X stands in the competitive landscape. Next to its competitors, Library X leaned more towards being a flexible and contemporary site because of its proposed features.

In order to understand how people currently use stock music libraries, we interviewed seven industry professionals, whose roles ranged from video producers/editors to content creators, to learn about their goals and frustrations, which ranged from them telling us that they would settle for songs even if they weren’t perfect to lamenting the fact that they cannot manipulate the tracks themselves and have to start from scratch.

We uncovered insights by visualizing the data we gleaned from the interviews by affinity mapping, which we then used to validate our client’s proposed features for Library X:

  • Set up projects using common search library filters (genre, mood, length, etc.)

  • Ability to generate (3) different options based off of the project set up criteria and ability to listen to each option

  • Ability to edit different stems from the generated track (ie. change instruments or remove vocals completely)

With the insights that we gleaned, we decided to cater towards Seth, who is a representation of our target audience. By putting a face and name to our audience, it allowed us as a team to better empathize with their pain points, needs, and goals,

Seth is an ad agency creative who uses stock music libraries for client projects with limited budgets—this meaning he can’t get original, composed songs or well-known artists. He spends most of his time looking for perfect tracks in stock music libraries and usually looks through several different sites to land on what he needs. When he finds something that’s nearly perfect, he also has a difficult time editing elements of the tracks, as those capabilities are not readily available to him.

REVISED PROBLEM STATEMENT

Armed with our newly-gleaned insights and a better understanding of our target audience in Seth, we elaborated upon our problem statement:

Going through stock music libraries is time consuming due to the overabundance of music within each database. Often the music found within sounds computer generated and lacks originality, which further lengthens their time spent searching for music.

Seth, a frequent stock music library user, often experiences choice paralysis. He doesn’t have the time to search for perfect tracks within thousands, and is often frustrated by the limitations of stock music libraries.

How might we help Seth streamline his search for the perfect track while offering him more flexibility?

•••

DESIGN & TESTING

We held two rounds of design studio where we brainstormed what the initial landing screen and project set up would look like. We uploaded our sketches into Miro to view and present our designs. Afterwards, we created what would be the landing page of our mid-fidelity wireframes:

And then we added color and branding to the wireframes, bringing our vision of Library X to life. Here are some of the features that we incorporated into our design:

LIBRARY X LANDING PAGE

When a user opens the Library X webpage, they’ll be directed to the landing page, which includes the platform’s UVP and an eye-catching “Get Started” button.

PROJECT SET UP

Once a user makes an account and start composing, they are brought to this project set up page where they can customize their tracks by genre, mood, arc, instrument, length, and tempo.

TRACK RESULTS PAGE

Once user completes project setup, they are taken to the “Composed Tracks” page with three tracks based on their search criteria.

EDIT BAY

If needed, a user can click to edit tracks by replacing or removing stems as well as shift the crescendos of their track.

LINK SHARING

To share the playlist with clients or other coworkers, a user can click into an overflow menu to copy a unique link to their project playlist.

We also laid out a moodboard of images that we liked and ultimately decided upon a sleek, dark background to represent the site’s modern capabilities as well as some bright colors to highlight our client’s values of maintaining the delight of working with music.

•••

TESTING & LEARNING

To test our design’s functionality and usability, we conducted two rounds of usability testing with a total of ten industry professionals who have experience with stock music libraries. We had them complete seven different tasks:

  1. Gain access to the site and create an account.

  2. Compose a track based on the brief.

  3. Expand the track to look at the isolated elements and replace the fifth element.

  4. Refresh the track.

  5. Edit the placement of the descent of the song and refresh the track.

  6. Add the track to your project playlist.

  7. Share the playlist with your coworker.

During the first round of testing with our mid-fi prototype, we saw an overall success rate of 84%; however, we noted that a few tasks were more difficult for users than others, specifically expanding a track and replacing an element (#3) and editing the placement of the descent in the song (#5).

Based on these learnings, we iterated on our design for the high-fidelity mockup:

  1. Added brief description of what they could expect from the website landing page (UVP).

  2. Replaced “refresh” icon because users were confused by what it meant.

  3. Implemented resting, hover, and selected states for all active buttons to indicate that they were clickable.

For our second round of testing, we saw a drop in success rate from 84-81%. Users were still confused, even after we replaced the original “replace” icon; users indicated that the new icon we selected looked like a different symbol that indicated a loop or a repeat, so they were hesitant to click on it. On a positive note, adding hover states on the arc scrubbing toggle gave way for a 20% increase in success rate, and everyone was able to complete the task.

•••

LOOKING AHEAD

Continued iterations of the platform based on our second round of tested are also necessary to ensure full usability and functionality of the platform:

  1. Implement clearer onboarding that granularly explained the capabilities of the edit bay.

  2. Icon exploration as well as A/B testing would prove to be useful for which “replace” icon is the most intuitive

  3. Add a “notes” section to each track and playlist for users to add comments to share with their internal teams or as reminders to themselves