Skip to main content
design

Bringing the Spotify Heart to Life

July 2020

Article

Heiko Winter
Roy Marmelstein
Fabiano Souza

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:

Move with purpose: Motion provides orientation and invites interaction. By showing that something's happening, it can also help reduce frustration.
Provide feedback: Animations and transitions encourage users to explore and play. Motion is a way to show that the interface is responding.
Add delight: Motion helps make our interface come alive. It's the little touches and attention to detail that can add beauty.

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.

Here are some of the early explorations.

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.

A selection of many motion studies we explored.

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:

The final implementation in the mobile experience.

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!

Credits

Heiko Winter

Principal Product Designer

Heiko is a Principal Designer in the core experience tribe, supporting and leading several squads to re-imagine the mobile experience for Spotify.

Read More

Roy Marmelstein

Staff Engineer

Roy Marmelstein is a Staff Engineer working on Spotify's mobile experience and leading engineering for our mobile design system.

Read More

Fabiano Souza

Illustrator

Senior product designer by day, freelance illustrator by night. Loves 90s videogames and binge-watching trending series on Netflix.

Read More

Want Spotify Design updates
sent straight to your inbox?

By clicking send you'll receive occasional emails from Spotify Design. You always have the choice to unsubscribe within every email you receive.

Our latest in Design

View all Design stories