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.
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.
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.
We quickly settled on a direction that included gradients and digital “glitter”.
The glitch effect also became part of the design language.
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.
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.
Along with the digital campaign, I lead and created the supporting media, including digital display advertising, DOOH units, and 30s spots.
We partnered with Colossal Media, to render local data insights as hand painted murals at select locations in New York and Los Angeles.
Initial explorations and executions of the murals.
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.
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
Art Direction, UX, UI