Case Study: .WAV POOL

Role UX Designer

Date June 2019 - July 2022

Website https://wpbeta.wav-pool.com/

Objectives / Tasks

• Conduct primary and secondary research

• Use design thinking and ideation strategies

• Create personas and user flows

• Design wireframes and prototypes

• Direct testing of features via staging site

→

• Design post MVP features using style guide

• Incorporate HCI and information architecture

• Prioritize sprints based on research & business goals

• Manage 10 person dev team using Lean UX / Agile

• Factor in business goals, branding, and company vision

Introduction

The music licensing industry seems niche, but many do not realize that every time you hear a song in a TV show, advertisement, and even in a branded social media post, the music you hear is licensed. It is big business and there are plenty of SaaS licensing platforms. I noticed from being in the industry that the process of finding music was complex and that it was also difficult for my clients to form a consensus amongst the creative team when describing the music they needed. I consistently received briefs with the words "edgy" and "cool".

→

The problem is that these words meant something different to each person. The licensing platforms seemed to follow the client's lead, where their web apps had been designed with search tools that included many of these subjective keywords and tags. On top of that, the UI was built like a spreadsheet, offering a never-ending list of songs with almost no differentiation. With this in mind, I sought to create a new type of UI with one purpose, to create relationships with songs based on the characteristic the client needed most: mood. But is mood also subjective?

"The music should feel elevated and luxury but with a sexy slick edge that works for men... must have organic classical elements" -Actual Client Brief

How many subjective words can we spot in the brief above?

Research

Through primary and secondary research I examined the disconnect between the way the clients described music and the way the other platforms in the industry had attempted to service the client. My approach was to use the years of email conversations where I focused on servicing the client's needs in order to hone in on their pain points. As a licensing rep, it was just as much my pain point as it was theirs since the overall goal was to find the right song as quickly as possible.

→

I gathered numerous insights from these client emails and the disconnect always remained the same. We were not speaking the same language. It caused frustrations and wasted a lot of time. I looked to many of the sites listed above in my attempts to gather data on how other platforms had solved the problem. I saw many other music search tools that used many of the same terms that were cataloged by real humans and each most likely with a different idea of what each keyword meant.

Do other platforms meet the needs of the client?

Competitive analysis

Artlist.io

Marmosetmusic.com

Musicbed.com

Premiumbeat.com

Had anyone even realized there was a problem?

Personas

Producers, directors, editors, and music supervisors.

They produced a wide range of content for TV, films, advertisements, and games.

Tech savvy and creative.

Their main goal is often to find the right song and find it quickly.

Mood is the defining factor when choosing a song.

Mood is the defining factor.

User Flows

We could now define the most important starting point of the red route. This starting point most likely would not change unless there were changes at higher levels in the user's overall journey.

Ideation & More Research

The team got together for a series of brainstorming sessions. From research, we knew clients were tired of the spreadsheet style UI from other platforms. I personally love how data can be visualized, so I proposed the idea of mapping the songs with X and Y variables. The creative director mentioned that he saw a color spectrum in the design though admittedly this seemed to be more about form rather than function at the time.

→

I got to work sketching out what variables we might use for the map and what the colors might mean. What characteristics of the music made sense to map? Perhaps we could use intensity or genre? Or what if we used EMOTION? It was difficult to tell if emotional words were just as subjective as many of the other keywords. I wanted to create a music map that should be useable by anyone, no matter how much they knew about music.

How might we create a universal language for describing music?

1. Mapping. We noted that using symbols for each song the way Google Maps uses symbols for types of locations could be a useful way of communicating how songs may differ from each other.

2. Adding color. We all saw the color spectrum and gradient of the color picker in our minds. Again, this seemed like a question of form not function, but what if it could serve as a function of the UI?

3. Adding variables. In movies, for example, music adds to the scene's mood. Does color have the same visual relationship with emotion? It turns out, that others have asked the same question. The following diagram shows one interpretation of mood and color.

4. Forming the relationship. I came up with my own set of colors and applied a variable to each (the specifics of these are proprietary) and it seemed to work well in my own mind. However, this needed to be put to the test.

5. Defining X and Y. If we were going to map each song, what would be the Y value? Naturally, tempos range from high to low numerically, so assigning tempo to the Y value was the most logical choice.

6. Testing it. I created a mock Photoshop version of these associations and ran listening tests with the team and other music lovers. Nine out of ten participants aligned on 80% of the mood and color associations.

A magic algorithm.

Sketching

Now that we understood how we could associate mood to color and then associate songs to moods, I started sketching out the UI. Once again finding inspiration in Google Maps, I put the map front and center. This would put focus on the song that was being listened to and the relationship between all of the other songs around it. This would allow the user to find other similar songs automatically without searching.

→

The right pull-out tray would allow the user to view the music in a similar way to other sites in the industry, via playlist. This would give them the option to listen to tracks based on a theme. This feature was based on the success I had offering playlists to clients during my time as a licensing agent. At the bottom, the "transport" included song info, waveform, and a download button.

Everything the client is familiar with and more.

Low Fidelity Prototypes

The first prototype included a very simplified UI where the user could pick a mood (color) and tempo (shade). In this version the background gradient allowed the user to see the full spectrum of color and the entire map at once.

The second eliminated the redundancy of the color picker. It would create a simpler UX if the user could browse 1) via the map and 2) via playlist.

The third was a bit more refined. The song icons were assigned the color instead of the background. The themed playlists would assist the user in finding a starting point based on those themes.

Three inter-related features that work together seamlessly.

MVP

The company decided to move forward with the low-fidelity prototypes and create the MVP with the help of a development team. This included the key front-end designer which would take the assets and build them into a version that made it possible to test the complex functionality of the mood map and algorithm.

.Wav Pool Exploration Platform Ver .1

Key Heuristics

1. System Status. Four different colored style states for the song icons: Glowing (currently listening), Color Outline (selected playlist), White Outline (not listened to), and Solid Color (previously listened to). These help the user quickly see information from the changed states as they browse.

2. Aesthetic and Minimalism. The circular cutout allows the user to focus on the center of the space and allows more focus on the song info and playlist panels. I also wanted to keep the number of buttons to a minimum.

3. Recognition. User playlists can be created to allow the user to save their favorite songs. Songs that are featured in the playlist will light up as a color outline and helps the user quickly maximize the desired variables. (ex: theme + mood +tempo)

4. Real World Terms. The button descriptions are the most common phrases used throughout the industry.

5. Consistency. The song info and playlist panels are standard designs in the industry. These would need to remain consistent because the map was so "out of the box".

The first of its kind music exploration tool.

More Testing

The company decided to take this proof of concept straight to the clients to get feedback. I started doing usability testing among our clients and with others in our community.

→

The results were mixed. We received feedback that was very positive and some that gave us great constructive critiques of the product. We also received some that made us want to rethink the entire design.

"Your site is really *%$# cool... I always knew there had to be a better way to find music"

"You should use iconography instead of text buttons"

"This is a dope way to lay out tracks. Really dig the UI. I'll keep this in mind."

"it's super cool and innovative. Love the search feature and all the design that has gone into this. Really rad."

"What do the colors mean?"

"How do I search for rap music from the UK?"

Mixed results.

Ideate. Create. Test. Repeat.

Two-week sprints using a Lean UX model helped us quickly develop new features and test them with the clients.

1) Performance. I discovered from testing that the map had poor performance on the latest browser versions. Working with the development team we implemented lazy loading on all songs outside of the circle, vastly improving panning and zooming speeds.

The map feature is shown without the rest of the UI components.

2) Keywords.

"I'm not sure you could have rolled a worse UI if that had been the goal".

This client needed keywords and we found out through testing that many others did too. I spent hours ideating on this feature and realized that if we were to use keywords, after all, it would need to be concise. The client later said:

"Site is way way way better. So easy to get around. Now that I can get a starting point off keywords the dynamic interface is much more intuitive".

The keywords are chosen and the song icons inside the map are highlighted.

3) Starting Point. The map was still confusing. Many of our users were very interested in how cool the map looked, they immediately started clicking without knowing how to use it. By waiting to load the map until the user has chosen a song from the playlist panel, it would force them to pick a starting point first.

At the center, the user sees instructions to choose a song from the playlist or keyword panel first. The copy was changed several times before we landed on this one.

4) On Boarding. After creating the starting point it made sense to create two more guides for the first-time user. Given the research on modals and how distracting or annoying they can be for the user, I decided to deliver only the most critical information within two screens.

When the user chooses a song, it triggers the guides.

5) Nav Hierarchy. The menu hierarchy was changed so that the user would be able to choose a page and then view the title of the page underneath it rather than the title on top. This increased visibility of the menu in usability tests.

Validation

The lean UX sprints turned out to be very effective at establishing the issues with the features and providing a solution. In some cases, features were tested multiple times before achieving the optimal user flows with test participants.

As a result, our ongoing data analysis showed that engagement rose by all metrics:

Internal statistics showed an increase of streams by 150%, which means that more users were engaged in the listening and searching experience.
Internal statistics also showed an increase of downloads by 240%.
Click-through rates improved from feature to feature, where the keyword panel accounted for 50% of all music searches. This also meant that the navigation changes were much more effective at delivering the experience that the users were looking for.
Clients were 4 times more likely to return to the site to find music within a two-month period.
Sales continue to rise at a rate of 19% year over year, but revenue information is not yet available at the time of this publication.

Number of streams increased by 150% and downloads by 240%.

The Future of The Exploration Platform

Since changes have been made to the original intended UI which focuses more on delivering song recommendations from a given starting point, instead of a quick browsable music map, the company may want to consider refining the user experience. This may include changing the prominence of certain features and possibly the size of the map. Further testing and research should be conducted.

Pattern Library / Style Guide

VIEW SITE:

Google Sites

Report abuse