Year in Music 2015

Spotify

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

YIM-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-2
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-3
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-4
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-5
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-6
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-7
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

User Experience 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

Press