Spotify Enhanced Audiences Dashboard

The Enhanced Audiences Dashboard (or SEAD for short) is the main project I worked on as Product Design Intern at Spotify. It's a data insights tool that has so far helped Spotify land its first large-scale partnership with an agency holding company.

My role in the project was to design the dashboard from its ideation and research stage to the shipped product. I worked with a team of developers (Miriam Ashton, Remi Galvez, Sigfrido Chirinos, and Marco DeMasi), my design mentor Samwoo E, product manager Michael Becker, and our four internal end users in advertising & sales (Cari Kesten, David Trencher, Mark Woodell, and Teresa Elliot).

 

Background

background.png
 
 

prototype

I prototyped the experience to illustrate the overall flow and key interactions to my team and our stakeholders. Watch the video walkthrough below, or interact with the InVision Prototype.

 

Early thoughts

This was my first go at tackling the problem. I had not yet conducted user research, and so was not centering my thinking around Moments yet. Thus, much of the work I did in this design sprint revolved around rearranging and visualizing the different data sets we had. Much of these early elements would make their way into the final product's detailed view ("Expanded View") of each Moment.

 

User Research

After making my first attempt at the design challenge and running up against some big questions, I decided to hold a user research session with three of our internal users, Cari, Mark, and David. After asking them about their interactions with agencies and what problems they face on the job using the current tool, I asked them to do a simple card sorting exercise. I printed out data modules from the current tool and asked them to rank them from most interesting data to least interesting data. 

 

I also asked them to sketch out what their ideal tool would be. The goal of this exercise was not to have them propose designs for the tool, but rather to gain a better understanding of their mental models and catch the small details they may have left out in the user interviews. For example, I would not know that comparing an agency's audience to Spotify's overall audience was very important if Mark had not sketched it out.

Cari's Sketches

 

Mark's Sketch

David's Sketch

new insights and challenges

Based on Cari, Mark, and David's inputs, I decided to center the product around Moments, as that was the most important data for them to highlight. With this in mind, I started mapping out the user flow and digging into the design challenges that popped up along the way.

Flow Map

Design Challenges

To allow for better comparison between Moments than the old tool offered, I designed for two different views of the data for two different use cases. For users unsure of what insights they are looking for, there is a "Table View", which allows a user to compare the most noteworthy data for each category across Moments. For example, I could look at this view and see that the Working/Studying Moment is streamed mostly by females, at a peak hour of 4PM, usually on a desktop, and largely of alternative music. Then I could look down the columns and see that the only other Moment dominated by alternative as a genre is Birthday.

However, if a user knows which Moment they are interested in, or want to just see the detailed data on all listening, they can switch over to "Expanded View", which has data modules for audience demographics (gender, age, location), platform usage (in general and throughout a day), and music listening information (top artists, genres, keywords, and emerging tracks). 

After making a quick prototype of this version of the design however, I realized the information architecture was missing something. Instead of crudely slapping a two-tab navigation on top, I started to see that the two different views of the data were more closely related than that. This was hard to see until I had prototyped it out, interacted with it, and felt its redundancy. 

 

3D Prototyping

To tackle this IA challenge, I decided to make a 3D prototype so I could really understand the product I was building in physical space. I was inspired to try an exercise like this by Pasquale D'Silva's article on spatial interfaces

A sketch of the tool's IA

Here you see the data matching (the venn diagram) and the narrowing of the data set (the filter).

Here you see the data matching (the venn diagram) and the narrowing of the data set (the filter).

In physical space, the tool can be essentially thought of as an accordion of different Moments.

If you open up an accordion fold, you can see all the given data on a specific Moment.

In this view, then, Table View acts as a sort of overlay to the data. 

 

With this in mind, I reimagined Table View as another tab that sits on top of the other folds of the accordion. 

 

Other Design Challenges

Discussing the product with the developers, our internal users, and my mentor would surface new questions and design challenges to iterate on. For example, considering only the ideal data simplifies the problem. If people are always listening to music at different times of the day depending on what Moment they're listening to, the design would be serving its purpose. Looking at the real data, however, I found that almost every Moment had female as the predominant gender and every Moment was dominated by mobile usage. Beyond that, narrowing the data set down to female-only using filters would leave you with "100% female" down the entire first column. This made it necessary to think about how the color system and design could best serve these non-ideal situations with real, messy data.

The use of iconography also presented another challenge. I used icons so that users could pick out a certain category and scan the column for more of the same. Icons can make certain things clearer at a glance than mere text. However, I soon realized that there are 30 possible genres, half of which would be quite a challenge to represent as an icon (e.g. R&B). Remembering one of my original goals of creating a modular tool that scales with more data, I had to consider the possibility even more columns getting added in the future. Age Group is an important column that we wanted to incorporate in the near future, and that really posed a challenge for iconography. In the end, I felt it was still useful to have icons for gender, device, and time of day, all of which have a limited number of possible entries. Thus, I kept the icons for those and relied on color differentiation for other columns.

The 30 different genres possibility also created edge cases for colors. Worst-case scenario, there are 11 different colors in the genres column. How do you use 11 different tints of a color and still have them visually differentiated enough to be useful? In this case, I decided to resort to greyscale for any columns present or future that have more than a few possible entries. Furthermore, instead of mapping the greens for genre directly to a specific genre, I mapped them by order of appearance, creating a staggering effect that promises as much visual differentiation between tints as possible (increasing with number of different genres in the column).

 

Current Flow Map

After many iterations, this is the product I presented at the end of my internship.