The Audio Aura Story: Mystical to Mathematical
TL;DR For 2021 Wrapped, we were challenged to visually express a user’s Audio Aura based on how they listened this year. I like to think of it like this: if your music listening data became a person and walked down the street to the neighborhood aura reader, what would that person’s aura look like? That’s the 2021 Wrapped Audio Aura story.
A new Wrapped experience
Spotify Wrapped is a company-wide effort with 300+ Spotifiers across 20+ teams. My team in particular is a design/engineering team and our main focus is to design, build, and launch the Wrapped personalized user experience to millions of Spotify users around the world. These personalized stories bring users’ annual listening habits to life through creative storytelling.
The personalized experience shows listeners’ data stories such as their top songs, top artists, and top genres of the year. In addition to building these stories, our Brand and Creative team thinks outside the box and ideates new ways to illuminate insights into a user’s audio streams.
Imagine. A meeting room full of professionals — a virtual meeting room, of course. Brows furrowed, pens clicking, and fingers scratching heads. We were brainstorming the answer to the question: how do we define a Spotify user’s Audio Aura? To help with this question and guarantee the auras we create are valid, we consulted an aura reader, Mystic Michaela.
According to Mystic Michaela, auras are “your personal energy signature. Everyone has one, and aura readers see them as a combination of colors, each representative of the traits that make you, you” (check out Michaela’s full take on auras here). For the purposes of our Audio Aura story, we can extend the definition to say that a 2021 Spotify Wrapped Audio Aura is a colorful energy made up of two colors that help our listeners understand the vibe or mood of the music they streamed this year.
Let’s get to the whiteboard
Challenge #1
Return the top two mood categories and the descriptor associated with their 2021 listening history for each user.
Challenge #2
Identify how much of a user’s music is represented by each mood aka the mood weight.
To address the above challenges, we utilized a track mood descriptor dataset, aggregated each user’s listening history, and created six broad mood categories (i.e. “Happy”, “Calm”, “Hopeful”) that would then be narrowed down to two to create the audio aura.
- Count the number of streams for a given track and retrieve its top mood descriptor as determined by the mood descriptor dataset.
- Bucket those moods into one of the six mood categories.
- Perform an aggregation to find the total number of streams for each mood category and take the mood descriptor with the highest number of streams.
- Carry out one last calculation to find the percentage of streams of a mood over the total number of streams.
In the example above, tracks that are “happy” or “calm” are the most streamed, making them the top two moods found in a specific user’s music. “happy” makes up 47% of the user’s listening with the mood descriptor being “blissful”. “calm” makes up 29% of the user’s listening with the granular descriptor being “chill”.
Now, let’s turn these moods into colors
Dry-erase pen caps click… we’ve identified a user’s top two Audio Aura moods and their mood weights. Now let’s turn this data into colors. Mystic Michaela stepped in to lend her expertise on auras and their colors. With her guidance, we assigned six core colors to the six mood descriptor categories mentioned above (which include “happy”, “calm”, and “hopeful”). To provide secondary colors to the aura visual, our designer represents mood weights through varying levels of contrast. The more a mood is present in a user’s listening, the darker the color. The less a mood is present in a user’s listening, the lighter the color. In the graphic above, the user has a mood weight of 0.47; therefore, the secondary color would be found in the row labeled Encore 100. Their second mood weight was 0.29; therefore, the secondary color would be found in the row labeled Encore 180.
Creativity and embracing constraints
Now that we have a user’s Audio Aura colors, all that’s left is for design and engineering to consider the last question: how can we engineer an ethereal Aura visual?
Our deadline was two weeks away. In our milestones planning, we allocated a few days of engineering per story since we committed to a number of data stories and several new features. We had a few days to explore an elegant aura visual that was feasible on both iOS and Android. Part of the challenge for design is knowing what’s possible for engineering to execute in a dedicated amount of time. And part of the challenge for engineering is accurately estimating the time it will take to build a given design. We had to come up with a solution that made good use of our time and garnered a confident engineering sign-off. Situations like this are very unique to the Wrapped design/engineering experience and through such situations, I’ve learned that creativity comes from embracing constraints and making use of what we have in novel ways. Our designer made use of three elements:
- An animated gradient built for last year’s 2020 Wrapped campaign to create a “lava lamp” effect.
- Ribbons built for 2021 Wrapped to create organic and unique shapes.
- A blur effect to blend everything together in a dreamlike fashion.
Since we had already built the animated gradient and ribbons, we were able to build the aura visual with high confidence, on time, and to accurately depict an ethereal aura!
To wrap it up
The 2021 Wrapped Audio Aura story is a peek into the unique experience of engineering and design. We took an esoteric concept and broke it down into its basic elements to build an exciting feature for the Wrapped experience. Our ability to work together with teams across Spotify allows us to find creative solutions, enabling us to create stories that, hopefully, delight our users. If you’re interested in joining our efforts to bring Spotify listeners new experiences, check out our open roles!
Tags: Data
