Spotify — Taste Rewind

UX Lead
Stefan Dufgran

Lead Developer
PJ Ahlberg

Satu Pelkonen

Back-End Developer
Anthony Marefat

Art Director
Olivier Gillaizeau

Lead Front-End Developer
Arnaud Tanelian

Front-End Developer
Mathias Van Impe

Back-End Developer
Peter Arato

Executive Producer
Alex Struvesant

Jennifer Delaney

Font-End Developer
Marco Rosella

As the lead Designer and Art Director of the project my role ranged from concepting to illustration and design directions. I've been involved in the project until the very end to make sure everything looked the best we could. 

Visit the final Project

Project Background —

Spotify and Razorfish came to us with a brilliant idea. Showing users what they would have been listening to based on their profile. We got really excited by the idea and decided to build on it and other layers to the conversation.

Spotify Announces Addition Of Video To Its Streaming ServicesSpotify Announces Addition Of Video To Its Streaming Services

Our Take —

Design Direction

In order to avoid this idea just another playlist generator as it may have been in the past, we focused on the visualisation of those playlists. Something that quickly made a lot of sense to the team was to represent each decade with a concert poster. These items felt like they described each decade in a very unique way. From poster leaflet done in with cut and paste photocopier to big stadium poster, we've researched more than two hundred posters looking at what made sense for each genre for each decade. 

"Each decade would have a set of 3 to 6 posters completely custom-made for each user"


Sharing is Key

As we were thinking of ways to visualize playlists in a meaningful way, we decided that sharing had to be key in the experience. We wanted to create an object that would feel like nugget of good memories to the user in a way that would compel them to share those. Posters felt like they fitted that description perfectly. 


Poster  —


As Spotify just ended a successful rebrand, we needed to support that initiative while creating an experience that would feel special. We also had two challenges on top of this. Each decade have its own style, and gimmick we had to emulate in order to create a compelling experience. Finally, we were very keen on creating posters using Users data to make these feel truly personal.  


Poster u2014


At this point, we usually start to work with styletiles in order to have a feel for the design of the experience. We avoid creating anything final. We just want to see what style would fit the experience best, while mixing images, ui, colors and type treatement.


Poster u2014

First Round

With all of our challenges in mind, and having decided on one style direction, we set out to create a first round of poster designs. These were meant to mix UI and graphics. We took that direction in a very minimalist execution. Maybe a bit too much, we needed more of Spotify branding, and to focus more on the artists.


Poster — 

UX Fine tuning

Based on that first round we took a moment to define the element that should be inside the poster and in the chrome. We've also looked at how we could create a system to generate posters dynamically.


The Experience —

UI Considerations

Obj. #1


Because the Posters are graphic-heavy we want to create uncluttered interface. We want it to be the simplest possible to support the Poster. We also want to convey the efficiency of a tool and have some clear nod to the product.

Obj. #2

User Centric

We are working with their data and we want to present them with the best result. We also want to make sure this experience is personable to the users. They need to feel right at home in the app.

Obj. #3

Create a flow

An interactive experience is all about flow. We’ll use animation and interaction to engage the users and glue them to the screen. Animation will also be used to convey functionality and give meaningful feedback.

User Interface —

Start Page

The start page was meant to be the front of the experience. We needed that page to be expressive while carrying the clean look of Spotify. We decided to integrate the Burst within the cycle animation. This animation would tell the story of the experience. A journey from today's music until the 60's.

User Interface —

Selection Page

This was a tricky part of the flow. Originally we asked Spotify to sort out all information based on the taste profile of the user and present users with a result without having them work on anything. Unfortunatelly, Spotify API couldn't handle it so we had to scale back to pick your favorite artist solution. We designed this screen so it would grab the latest Artist users have been listening to. We also took great care into animating loadings and transitions as well as press state so the user won't feel like this is work.


User Interface — 

Result Page

Early on, Stefan and I identified a big challenge for the posters to come to life on all screens. The 4:3 traditional ratio of a poster isn't ideal to responsive strategy. We've worked closely with Arnaud to create  2 result pages based on the screen ratio. It would work throughout for mobile and desktop.


Building —

Push to Stage

Creating such a complex experience required the developement team and I would work in sync. Not only did we sat together and talk things through but I also prepared multiple handoff documents to help them go through the complexity of the experience. As the developement was well under way we were constantly improving the interface and adding posters. 

"As competition heats up in the streaming music space, it's efforts like this that will ensure I stick with Spotify as my service of choice."

Ben Popper, The Verge

Minutes spend on
average on the site.

[unex_ce_button id="content_ptqya3qiv" button_text_color="#2c283d" button_font="bold" button_font_size="15px" button_width="content_width" button_alignment="center" button_text_spacing="0px" button_bg_color="#2ee48f" button_padding="20px 60px 20px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#ffffff" button_text_spacing_hover="0px" button_bg_hover_color="#000000" button_border_hover_color="#000000" button_link="" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]Visit Taste Rewind[/ce_button]