Spotify Year in Music

Spotify’s interactive celebration of the year in music, politics and culture. From the internet falling back in love with Missy Elliott at the Super Bowl, to same-sex marriage being legalized in the US and Ireland, to man buns and selfie sticks exploding on the cultural scene, 2015 was a year to remember.

Visit →

The challenge, how to translate Spotify’s deep data set in a way that is at once personal and global.

All while being generated dynamically for each user, so we started by splitting this data insights based on the user’s logged in or out status and visualizing them on individual cards.

spotify_year-in-music-2015-003

Creating a user flow and navigation model that had the right amount of personal and global insights.

To generate a personalized Year in Music experience that felt unique to each user.

During the visual exploration phase we started playing with bold typography and data visualization.

Creating unique and custom branded lockups.

We then started experimenting with glitch effects and how would those look like as data viz.





I created various Processing sketches pushing pixels in every direction using the random function.

spotify_year-in-music-2015-012
spotify_year-in-music-2015-014

We quickly settled on a direction that included gradients and digital “glitter”.

spotify_year-in-music-2015-018


The glitch effect also became part of the design language.

spotify_year-in-music-2015-020
spotify_year-in-music-2015-019

I also started moving away from traditional data viz illustrations and creating a flexible layout that would pull out images from Spotify’s api dynamically.

01_spotify_yim_outlier

01_earworm-05-6582
a_03_top-track-6609

spotify_year-in-music-2015-036

We used custom shaders to generate gradients and a duotone effects on top of all the content loaded from Spotify’s API.

Sharing these prototypes with the client helped us define the visual direction way quicker.

We created a git repo that would host all of the svg files, artist imagery and color guidelines. The color palette would then change per season.

b_01_seasons-winter-6618

b_03_seasons-summer-6617

b_02_seasons-spring-6620

b_04_seasons-fall-6619




spotify_year-in-music-2015-024

Along with the digital campaign, I lead and created the supporting media, including digital display advertising, DOOH units, and 30s spots.

spotify_year-in-music-2015-039

We partnered with Colossal Media, to render local data insights as hand painted murals at select locations in New York and Los Angeles.


spotify_year-in-music-2015-041

spotify_year-in-music-2015-042

spotify_year-in-music-2015-043

spotify_year-in-music-2015-044


spotify_year-in-music-2015-045


Initial explorations and executions of the murals.

spotify_year-in-music-2015-046spotify_year-in-music-2015-047

The process started with the image provided by the artist’s record label, color corrected then ran through a Processing sketch and stylized with custom-made patterns and glitch artifacts.

spotify_year-in-music-2015-052

spotify_year-in-music-2015-050
spotify_year-in-music-2015-049

spotify_year-in-music-2015-051spotify_year-in-music-2015-057


Webby — Winner in Advertising: Best User Interface
Webby — People’s Voice Winner in Advertising: Best User Interface
Webby — People’s Voice Winner in Advertising: Digital Campaigns
Webby — People’s Voice Winner in Web: Music
Awwwards — Site Of The Day
FWA — Site Of The Day
FWA — Mobile Of The Da


Stinkditial


Spotify


Art Direction, UX, UI