The new heart experience is now fully rolled out to Spotify users on iOS and is coming this Summer to Android. 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. We wanted to go even further and make the user actually “feel” the beat as they tap the like button. It's characterized by pulses, flourishes, and the glow of light and color.

The way we add motion to our products is inspired by the beat and rhythm of the music. It answered the big question - how to use motion to make Spotify experiences feel expressive, fluid, and easy to use. 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.

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. Finding music that moves and excites you is one of the best feelings in the world. ‘Liking’ is how you tell Spotify that you’re into a particular song, album, or playlist. We (an engineer and a designer) decided to use a few hack days to make the app more fun and engaging. It's a fantastic opportunity to be creative, explore new ideas, and learn about different parts of Spotify. Hack days are days where we pause the day-to-day teamwork, and anyone can work on just about anything. Well-designed animation is becoming part of the definition of sophisticated, current, and trustworthy design.”Īt Spotify, we have two 'hack days' per month (as well as an annual hack week). Micro-interactions and delight can play a big role in that.Īs Val Head wrote in the book Designing Interface Animation: Improving the User Experience Through Animation, “Static interfaces feel broken and frustrating. We strive to go beyond just being usable and to provide a pleasurable experience for our users. Every day, millions of people use Spotify to listen to their favorite music and podcasts.

Spotify logo different colors