Bringing the Spotify Heart to Life

Every day, tens of millions of individuals use Spotify to hearken to their favourite music and podcasts. We try to transcend simply being usable and to supply a pleasurable expertise for our customers. Micro-interactions and delight can play a giant position in that.

As Val Head wrote within the e 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, now we have two “hack days” per 30 days (in addition to an annual hack week). Hack days are days the place we pause the day-to-day teamwork, and anybody can work on absolutely anything. It’s a implausible alternative to be inventive, discover new concepts, and find out about completely different elements of Spotify. We (an engineer and a designer) determined to make use of just a few hack days to make the app extra enjoyable and fascinating.

We determined to have a look at the ‘like’ motion. ‘Liking’ is the way you inform Spotify that you simply’re into a specific music, album, or playlist. Finding music that strikes and excites you is among the greatest emotions on this planet. However, the best way our like button merely modified from a plain empty coronary heart to a full coronary heart didn’t convey that very same feeling of pleasure. 

And we wished to alter that.

Experimenting with movement

Motion at Spotify is nothing new, movement ideas had been already accessible in our Encore design system, which helped massively within the ideation and exploration part. It answered the large query — the right way to use movement to make Spotify experiences really feel expressive, fluid, and straightforward to make use of. 

Spotify model

The method we add movement to our merchandise is impressed by the beat and rhythm of the music. It’s characterised by pulses, prospers, and the glow of sunshine and coloration.

The guiding design ideas are:

Exploring completely different themes

Using the Spotify Design Language system (Encore) helped us brainstorm and discover completely different ideas. It offered a giant playground the place we might discover translating how all these phrases might appear like in a product micro-interaction.

After we had explored all of the ideas in a static sense, we created static storyboards to inform the concepts higher to different individuals, however it additionally helped us to mirror on the timings and choreography of the motion. We aimed for a period of max 500 milliseconds and 60fps to seek out the right stability between snappy sufficient however nonetheless fluent in gaining the movement traits.

Now the enjoyable half begins

Our go-to instrument for micro-interactions is After Effects. It offers final management on the animation aspect and allows you to modify all kinds of shapes and timings in a most popular method. As the historical past of After Effects is especially movie post-production, we used Inspector Spacetime. This helpful plugin shows the milliseconds’ period as an alternative of the frames per second or default time period.

How we translated the design into the product

On the technical aspect, we determined to make use of Lottie to drive our animation. Lottie is an open-source framework for rendering vector animations exported from After Effects that’s broadly utilized in cellular apps. Deciding on the appropriate animation meant testing the way it felt within the precise app and we hacked a fast debug instrument that allowed us to change between completely different animations shortly. 

We additionally used this handy cheat-sheet of Lottie supported options for After Effects to ensure we used the appropriate shapes and kinds supported by iOS & Android.

After exploring varied ideas, we landed on our desired one. Here it’s:

We wished to go even additional and make the person truly “feel” the beat as they faucet the like button. So we began exploring haptic suggestions. We performed with quite a lot of instruments for designing customized haptic suggestions however finally opted to make use of iOS native suggestions for higher backward compatibility and ease.

Key takeaways and what comes subsequent

The new coronary heart expertise is now totally rolled out to Spotify customers on iOS and is coming this Summer to Android. Not solely do customers appear to like it, however we additionally discovered that including delight to the like motion makes customers work together with the button extra and like extra content material — bettering our capability to make nice suggestions. This studying was a key takeaway for us, and it proves that delight not solely enhances the standard and model expression however may transfer metrics. 

We’re already exploring extra actions within the app and having conversations with different groups, who’re excited so as to add micro-interactions to their completely different options and produce extra joyfulness to the Spotify expertise. 

Watch out for extra delight within the app!