How we Brought 2020 Wrapped to Life in the Mobile App
February 2021
Article
Article credits
Cait Charniga (they/them/theirs)
Every December, millions of Spotify users around the world experience Spotify Wrapped, and reflect on their audio habits from the past year. To bring this experience to life, many teams and functions within Spotify rally around the Wrapped campaign in order to deliver a delightful experience, year after year. In this story, you’ll learn about some ways product design translated important pieces of the 2020 Wrapped brand campaign to make them look and feel beautiful on Spotify mobile apps.
Brand ↔ Product
A key part of working as a product designer on Wrapped is ensuring that the app experience for mobile not only aligns with the greater brand campaign — which is led by our Brand and Creative team year after year — but also successfully translates key visual elements so that they are scalable and buildable. For us, scalability means making sure everything looks and feels good across every mobile device for every single Wrapped user. Build-ability goes beyond time and resources and includes how we use our Encore design systems, as well as how designers pair with engineers.
Scalable: Reflected Imagery Effects
When you open Wrapped on your mobile device, you’re met with imagery of some of your top artists — reflected and in motion to create a kaleidoscope effect. While our brand team could manually manipulate imagery, we had to create something automated for the mobile experience, that would pull in images of any user’s top artists. So, we tested some images, and created some rules.
At Spotify, we care deeply about preserving the integrity of images that represent artists, so we created a rule that when reflecting imagery, we would use only images chosen by artists themselves for their Spotify profile. We would exclude things like podcast covers and album art because, as you can see in the above example, images that feature text become very muddy and confusing when reflected and repeated.
When creating the kaleidoscope effect you see in Wrapped, we had to develop a type of animation that would be feasible for our engineering team to build. We were able to prototype a solution that is visually dramatic, but fairly simple to implement. Here, you can see how the animation is broken down. We use four image masks, with the inner images initially offset towards the inner corner. We then move the images towards the outer corner – creating that smooth kaleidoscope effect.
Scalable: 2020 Wrapped Gradient
Another central component of 2020 Wrapped was the new gradient our brand team crafted, featuring many of our Spotify brand colors in a beautiful array. The challenge here was to translate our brand team’s smooth, editorialized gradient for mobile spaces. One way we achieved this was by adding a blur on top of the gradient. The blur is added in as a percentage value, which changes depending on how big the gradient is (larger gradients have an 80% blur, where smaller gradients have a 40% blur)! This helps ensure the colors stay bright when the gradient scales down on smaller devices.
Image caption: Notice here that when the blur remains at 80%, the smaller gradients are less vibrant compared to the ones where we change the blur percentage!
Buildable: Wrapped & Encore
A huge part of what makes Wrapped scale so seamlessly is our use of encore components and styles. Every year, Wrapped gives designers at Spotify the opportunity to evolve and explore our brand, and take it in new directions for the standout campaign moment. That being said, we have to be smart about how we explore new brand visualizations while still maintaining consistency and keeping Wrapped within engineering capacity. This year, we decided to use text styles and animation curves defined by our encore mobile systems. By using these established elements, we were not only able to build faster, but we could add a touch of familiarity to how things moved within Wrapped.
A new approach we tried out this year was using a Google Sheet to create motion specifications for animations within Wrapped. By adopting this method, we were able to communicate better with our engineers, as well as specify which Encore easing curves were to be used per element.
Looking ahead
As we look ahead to 2021 Wrapped, we’re already starting to evaluate how we can enhance the experience. We want to improve scalability and implementation, as well as accessibility and inclusivity. As the team responsible for the mobile Wrapped experience, our aim is to continue pushing toward the goal of creating a Wrapped that can be enjoyed and celebrated by every single Spotify user.
