Year in Music 2015 — 

Spotify

Spotify let users relive the moments and music that made up 2015.

YIM-2-1YIM-2-1

Early flow and wireframe sketches.

From global data to personal insights, users could explore theirs top listens and the world’s. With an audience of millions, we needed to create an experience that captured Spotify’s connection to both music and culture using a large amount of data. We worked alongside Spotify to concept, write, design, and build the Year in Music campaign as well as supporting media that included digital display advertising, OOH advertising, and short online spots.  

YIM-3YIM-3

Break down of logged in experience and global (logged out) experience. 

UX Challenges —

Spotify users who logged in got personalized information about their listening habits, while users who didn't log in got only information about their country's data. Both experiences needed to feel immersive and share-worthy.

YIM-sketch-1YIM-sketch-1

Early sketches of flow and screens. 

Since this experience was translated into 35 different languages for 52 countries, we had to think through multiple levels of affordances. All 45 pages had to work seamlessly for character based language and languages with different sentence structures while integrated automated data. We included seasonal data, but had to create affordances for countries in different hemispheres where the seasons flip.

YIM-sketch-2YIM-sketch-2

Paper prototypes of mobile screens.

The experience was long and complex- including 45 pages. We had to create a navigation pattern that allowed users to understand where they were in the flow and persistently share.

YIM-4YIM-4

Mobile wireframes. Left to right- start screen with prompt to log in, logged in user's first song played in 2015, season title page, cultural even page. 

UX Solutions —

We created two ways of exploring the data and stories: personalized experience for Spotify users or a global experience for non-Spotify users. The personalized experience demonstrates the detail Spotify’s user data. For instance, logged-in users saw: “What song helped you ring in the year,”  “Which artists soundtracked your seasons,” “What was your weirdest outlier (most out of place song you listened to),” and “What were the stories from music and culture that made your year?” While the global user would general data from their country: top artists, top tracks, etc.

YIM-5YIM-5

Mobile wireframes. Left to right- breakdown of user's listened to genres, user's top artists, user's hours listened in 2015 compared to 2014, and user's number of artists listened to in 2015 compared to 2014. 

To make sure the site could be accessed globally in multiple languages, we built a custom CMS so the Spotify team could switch the copy and content depending on the language and country.

 

The site’s structure was based in the seasons of 2015. The logged in user starts the experience with their first song of 2015. As the user scrolls, they progress through the year. When the user reaches a data point, “How many minutes did you listen in 2015?” the user would have a share button available so they can easily download the image or share directly to Facebook and Twitter. Users could jump ahead to different sections by using the hamburger nav that listed out all the main sections of the experience.

YIM-6YIM-6

Billboard using user data to promote the Year in Music experience.

Team —


Client - Spotify
Digital Agency - Stink Studios
Executive Creative Director - Mark Pytlik
Creative Director - Will Adams
Director of UX and Strategy - Stefan Dufgran
UX Designer - Liz Wells
Art Directors - Gabriela Iglesias, Linn Livijn Wexell
Designer - Jessica Hägg
Director of Technology - PJ Ahlberg
Lead Technologist - JP Gary
Lead Technical Architect - Oskar Tilly
Senior Creative Developer - Arnaud Tanielian
Interactive Developer - Paul Graffam
Developer - Suny Gao
Junior Developer - Mathias Van Impe
Backend Developer - Christopher Kim
Executive Producer - Amy Hanley
Senior Producer - Lauren Keller
Producer - Jason Rosen

Awards —


Webby - Advertising: Best User Interface
Webby - People’s Voice - Advertising: Best User Interface
Webby - People’s Voice - Advertising: Digital Campaigns
Webby - People's Voice - Web: Music
Awwwards - Site of the Day
FWA - Site of the Day
FWA - Mobile of the Day