Spotify Your 2020 Wrapped

Designing Wrapped

I was the design lead for Spotify’s Wrapped experience in 2020. The goal of Spotify’s “Wrapped” is to deliver a delightful year-end experience that celebrates users’ listening activity over the past year and encourages social sharing.

Wrapped is delivered on a specific day in December every year. The deadline is fixed. There is no phased rollout, no MVP, no A/B test groups or holdouts. Every Spotify user in almost every country where the app is available gets their Wrapped at the same time. This means there were all sorts of design challenges. In this case study I outline some of these challenges and how I overcame them.

Home Tab Promo

Because Wrapped only exists for a few days in needs to be front and center when users open Spotify. The Spotify Home tab is prime real estate, so my product manager had to work hard to get space there for even a few days. The existing “Home Banner” that is used to advertise new songs and podcasts had been used in the past, but really did not lend itself well to getting users excited about their year-end Wrapped experience.

I worked with a user researcher on my team to test a variety of locations and form factors for promoting wrap on the home screen. Once we identified the best location, I explored a lot of different styles, before landing on a specific look and feel. The most exciting part is I was able to incorporate the groovy gradient animation I developed into the promo banner on the home screen. Having animation in a place that is virtually always static was really effective in drawing users into this celebratory moment.

The banner from the previous year that we were aiming to improve upon.
4 banner positions and styles I user tested with the user researcher on my team.
A handful of the visual layout concepts I explored for the home banner before narrowing them down.
The final banner including the subtle gradient animation pattern I developed for the feature.

Interactive Story Container

In the previous year all of the stories were built on a rectangular canvas with a locked aspect ratio and all of the elements absolute positioned. This rectangle was just scaled to fit whatever device Wrapped was used on. We knew however that Wrapped was going to be used on many different types of mobile devices across the world and that simply scaling a locked canvas would not provide a great experience for everyone.

I created an adaptive and responsive framework for the story container with guardrails and parameters as well as a set of 4 canvases to design for in order to cover the most common device sizes used. I carefully wrote specifications to ensure that users with larger and smaller devices would have an ideal experience that adapted to their device.

Another important factor I focussed on was making sure this new story container had an interactive layer so we could make sure that interactive elements would exist over top of any built in story controls. This was the first time Wrapped had stories with user interaction so we wanted to get this right.

The 9 most common device aspect ratios found among Spotify users.
Specifications for the adaptive story container.
Specifications for stacking interactive layers and controls.
An example of the 4 canvas sizes I designated for laying out Wrapped stories.

Modularity & Templatization

We knew that with a fixed timeline things could get dicey, so in preparation for that we explored options for how we might help our engineers work faster, while creating “guard rails” to steer our conversations with Spotify’s Brand & Creative Team. We knew that the worst thing that could happen was having to ask our engineers to build twenty-something custom stories on a very tight timeline.

My goal was to create a system for composing stories that would balance flexibility and reusability. I originally explored creating a kit of parts that could be used to quickly assemble hundreds of different stories with minimal engineering effort and maximum variety.

Where I ended up landing was more of a hybrid approach – a mix of rigid reusable templates where we only changed color, copy and images and a handful of very custom stories. I carefully arranged the order of these to give the greatest impression of variation possible.

My team’s initial estimate was that our engineers could build 10 templates, so I got to work figuring out how we could fit as many stories as possible into those 10 “slots”.
I developed a system for creating a story order that would not use the same template closer than three stories apart. This helped give more of an impression of variety.
In the end the engineers on my team only had to build 8 templates for us to have almost twice that number of stories.
An example of 4 different stories that only used one template.
An example of the in progress motion design for the “Single Basic” story template above.

Interaction & Animation

A key differentiator between Wrapped 2019 and Wrapped 2020 was interaction. We were inspired by the quizzes in Instagram stories and how engaging those are. We hypothesized that a user interacting with their stories might encourage them to want to share it. I sketched a lot of crazy ideas, but we landed on the quiz story template as our foray into interaction to test that hypothesis.

The animation is one of the most iconic elements of Wrapped. Each year there’s a new look and feel that includes how everything moves. I created an animation system where everything would either fade & move or fade & grow. The move/grow duration was always 50% longer than the fade duration. These smooth and consistent motifs played well with the slow persistent movement of the gradient animation.

As we got close to our deadline our team borrowed more and more engineers from across the organization. It would have been very difficult to be constantly collaborating 1:1 with so many engineers across NYC, London and Stockholm, so I developed a system for specking out the animations in as much detail as possible. This included redlines of the beginning and ending states of each key movement, Principle prototype videos and a Google Sheet detailing each object and how it’s attributes were being manipulated over time.

One of my quirks as a designer is that I love sketching and wireframing in Google Slides. Since I am usually way to OCD about details and pixels, I like how limited and sloppy of a tool it is. Here are some of my animation and interaction sketches done in slides.
The original sketch of the quiz concept.
An example of my wireframes detailing the basic UX of each story.
Specs of each major “hold” state across all 4 canvas sizes.
Specs detailing the beginning and ending state of each object.
Using Google Slides to spec out the orchestrated motion of each element.
Animated gradient specs.
My exploration of different animation concepts for the year overview story,
The final, simpler option we landed on to make sure what the engineers built would be stable and scale well to all users.