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 is 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 Ee, a product manager Michael Becker, and our four internal end users in advertising & sales (Cari Kesten, David Trencher, Mark Woodell, and Teresa Elliot).
I created a simple (linear) prototype to demonstrate many of the interactions in the design to both developers and stakeholders. Watch the video to be walked through the prototype, or interact with it yourself here.
This was my first go at tackling the problem. I had not yet conducted user research, and so did not know that the product should be Moments-centric. 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.
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 our users to sketch out what their ideal tool would be. Because they are not designers, the goal of this exercise was not to have them design the tool for me, but rather to gain a better understanding of their mental models and catch the small details they may have failed to mention verbally. For example, I would not know that comparing an agency's audience to Spotify's overall audience was very important if I had not seen it in Mark's sketch.
new insights and challenges
This sprint was done after I conducted user research and had decided to center the design around Moments.
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 not as good as it could be. I had crudely slapped two tabs on the top for the two different views of the data, but really they were related to each other in a different way, which became clear with interaction. Beyond that, both left navigations had essentially the same text but differed drastically in visual style from one view to the other.
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 an article on spatial interfaces.
With this in mind, I realized Table View could be another tab that literally sits on top of the other folds of the accordion.
Other Design Challenges
Every time I met with the developers, our internal users, or my manager, I would come across new questions and design challenges I had to iterate around. For example, it is easier to create a design around ideal data, where people are always listening to music at different times of the day depending on what Moment they're listening to. Looking at the data however, you find that almost every Moment will have female as the predominant gender and every single Moment (currently) is dominated by mobile. Beyond that, narrowing the data set down to female only through filters will also leave you with "100% female" down entire column. So, I had to think about how the colors and design would work in these non-ideal situations.
The use of iconography also presented another problem. I used icons, because I wanted a user to be able to pick out a certain data entry and scan the column for the same (e.g. I want to look at day time, so I scan the column for the sun and cloud icon and the medium tint purple). Icons are easier to differentiate between at a glance than text that may be the same character length. However, I soon realized that there are 30 possible genres, half of which would be quite the challenge to turn into 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 think about what to do if even more columns were added in the future. Age Group is an important column that we want to incorporate in the near future, and that really poses 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 very limited number of possible entries, so I kept the icons for those and relied on color differentiation for other columns.
The 30 different genres possibility also created an edge case 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 the internship, with various click states mapped out.