Boosting the Serotonin Level of Girl In Red Fans with Spotify
Encouraging Playlist Streams on Spotify
I’m running low on serotonin
Last year, I developed a project for Hurts which calculated how big of a fan you are based on your Spotify listening history. While I don’t like remixing concepts, I do enjoy remixing mechanics. Being able to reward a user based on how much they listen to a particular artist is one of those core mechanics that can power any number of campaign concepts.
I had the opportunity to help Girl In Red build a new simple concept for her latest single, “Serotonin.” On our web app, you’re encouraged to boost your serotonin levels by streaming the new single and a playlist of Girl in Red tracks we’ve created. Users can use the app to check their current level between 10%-100% and are gifted a personalized Instagram story (including artist selfie of varied degrees of enthusiasm) reflecting their score. Since Spotify updates their recent listening history every 24 hours, fans are encouraged to return daily to check their score. As an added value to the artist, I’ve added a newsletter opt-in which is completed powered by Spotify authentication.
Check your Serotonin level today and read on to learn about how this app came together.
Algorithm
Girl In Red is a newer artist with a smaller catalog of tracks so the previous affinity solution would not work for this project. Instead, we went with something much simpler. We created a new playlist with all 18 of her tracks and simply looked for how many of those songs appear in a user’s Top 50 most recently streamed tracks. Check out the previous project for a breakdown of how to obtain the latest tracks from that endpoint.
Once you have the top tracks, you can simply filter them by our artist, divide them by the 18 total possible tracks, and finally figure out where the user’s score falls on a scale of 1 to 10.
let max = 18let uri = 'spotify:artist:3uwAm6vQy7kWPS2bciKWx9'let tracks = topTracks.filter(track => {
return track.artists[0].uri === uri
})let result = Math.round(tracks.length / max * 10)let serotonins = Math.min(10, Math.max(1, result))
We can now use this calculated Serotonin level to generate an image which presents the score to the user.
Image Generation
Depending on your score, you will receive a different Instagram ready selfie from Girl In Red reflecting your commitment. To make things even more personal, we decided to add your name to the image which we can pull from Spotify. I’ve discussed a lot about generating dynamic images with HTML Canvas in my The Sharing series but here’s a bit of that code for this particular project.
let canvas = document.createElement('canvas')canvas.height = 1920
canvas.width = 1080let context = canvas.getContext('2d')context.drawImage(selfie, 0, 0)context.fillStyle = 'white'
context.font = '41px SF Pro Display Light'
context.fillText(`to Lee Martin`, 330, 113)
We simply create a new canvas with the dimensions of an Instagram story, draw the associated selfie image to the canvas, and finally write the users name to the right of the girlinred avatar at the top. This follows the design of a DM’d Instagram story.
Loader
Another delightful part of the interface is the little Serotonin molecule. This UI component consists of the molecule image and two radial gradients which glow on an interval. I decided to use anime.js to power animation since it was already part of the project and gave me access to unique easing options. Check out the responsive build on the CodePen.IO above. By the way, that CodePen has a rather rough GIF powered solution for the static but the final project used by static Vue.js component.
Thanks
Thanks to Kelsey Miller, Ariel Cohen, and everyone else at AWAL who helped bring this little project together. Special thanks to Girl In Red for approving the project and providing the selfies! Stream “Serotonin” and the entire Girl In Red catalog now.