What started as a hack day project is now available to millions of listeners and adds delight to every ‘like’ in the app. In this article, we're going to look at the process of how we designed and implemented a micro-interaction for our heart icon, and show how delight can move metrics.
Every day, millions of people use Spotify to listen to their favorite music and podcasts. We strive to go beyond just being usable and to provide a pleasurable experience for our users. Micro-interactions and delight can play a big role in that.
As Val Head wrote in the book Designing Interface Animation: Improving the User Experience Through Animation, “Static interfaces feel broken and frustrating. Well-designed animation is becoming part of the definition of sophisticated, current, and trustworthy design.”
Choosing the Heart
At Spotify, we have two "hack days" per month (as well as an annual hack week). Hack days are days where we pause the day-to-day teamwork, and anyone can work on just about anything. It's a fantastic opportunity to be creative, explore new ideas, and learn about different parts of Spotify. We (an engineer and a designer) decided to use a few hack days to make the app more fun and engaging.
We decided to look at the ‘like’ action. ‘Liking’ is how you tell Spotify that you’re into a particular song, album, or playlist. Finding music that moves and excites you is one of the best feelings in the world. However, the way our like button simply changed from a plain empty heart to a full heart didn’t convey that same feeling of excitement.
And we wanted to change that.
Experimenting with motion
Motion at Spotify is nothing new, motion principles were already available in our Encore design system, which helped massively in the ideation and exploration phase. It answered the big question — how to use motion to make Spotify experiences feel expressive, fluid, and easy to use.
Spotify style
The way we add motion to our products is inspired by the beat and rhythm of the music. It's characterized by pulses, flourishes, and the glow of light and color.
The guiding design principles are:
Exploring different themes
Using the Spotify Design Language system (Encore) helped us brainstorm and explore different concepts. It provided a big playground where we could explore translating how all these words could look like in a product micro-interaction.
After we had explored all the concepts in a static sense, we created static storyboards to tell the ideas better to other people, but it also helped us to reflect on the timings and choreography of the action. We aimed for a duration of max 500 milliseconds and 60fps to find the perfect balance between snappy enough but still fluent in gaining the motion characteristics.
Now the fun part begins
Our go-to tool for micro-interactions is After Effects. It provides ultimate control on the animation side and lets you modify all types of shapes and timings in a preferred way. As the history of After Effects is mainly film post-production, we used Inspector Spacetime. This handy plugin displays the milliseconds' duration instead of the frames per second or default time duration.
How we translated the design into the product
On the technical side, we decided to use Lottie to drive our animation. Lottie is an open-source framework for rendering vector animations exported from After Effects that is widely used in mobile apps. Deciding on the right animation meant testing how it felt in the actual app and we hacked a quick debug tool that allowed us to switch between different animations quickly.
We also used this useful cheat-sheet of Lottie supported features for After Effects to make sure we used the right shapes and styles supported by iOS & Android.
After exploring various concepts, we landed on our desired one. Here it is:
We wanted to go even further and make the user actually “feel” the beat as they tap the like button. So we started exploring haptic feedback. We played with a variety of tools for designing custom haptic feedback but eventually opted to use iOS native feedback for better backward compatibility and simplicity.
Key takeaways and what comes next
The new heart experience is now fully rolled out to Spotify users on iOS and is coming this Summer to Android. Not only do users seem to love it, but we also learned that adding delight to the like action makes users interact with the button more and like more content — improving our ability to make great recommendations. This learning was a key takeaway for us, and it proves that delight not only enhances the quality and brand expression but can also move metrics.
We're already exploring more actions in the app and having conversations with other teams, who are excited to add micro-interactions to their different features and bring more joyfulness to the Spotify experience.
Watch out for more delight in the app!
