UX Design | Documentation | Copywriting
Project Length: 1 Week
The Problem
Leading up to the release of their newest animated movie, Inside Out, Disney employed the ad agency I was working for at the time (F Sharp) to create a music recommendation ad featuring their main cast of characters. As the lead UX Designer on this project I undertook the responsibility of handling wireframes, first pass copywriting, and UX documentation.
The Team
Similar to other client projects of this scope, the team consisted of a UX Designer, UI Designer, Project Manager, Front-end Developer, and Copywriter. My responsibilities as the UX Designer included research, wireframing, and creating documentation such as user stories and information architecture. In addition, I provided first pass copy for our in-house copywriter to use as a reference.
The Requirements
The cast of characters Disney wanted to feature was a set of emotions personified (Joy, Anger, Sadness, etc.) and as such they requested that we work these emotions into the experience. With this in mind it was decided to leverage our Music Analyzer API to analyze a user’s Spotify profile based on the personality traits of these characters.
An example of the Music Analyzer, by signing into Spotify users can find out which character matches their music taste.
Using this analysis we would then create a playlist of recommended tracks for the user. For example, if the user’s listening history contained more tracks with attributes similar to the character “Joy” then they would get more “joyful” tracks in their recommended playlist.
The Research
In order to generate meaningful results we would first need to group certain variables (known as music tags) and assign them to each emotion for the analyzer to detect. After some research it was decided to assign sets of tags called “moods” to each emotion (moods like upbeat, energetic, and vibrant could be assigned to Joy for example).
However, after initial testing the results weren’t what we were looking for, the tags were not focused enough and the playlists that were generated did not fit the characters as well as we had liked. To solve this we included genre tags to narrow the range of recommended music resulting in a more focused playlist that felt more in line with each character.
Using a mix of both moods and genres helped to generate a more nuanced set of results for each character.
The Design
With these new sets of tags in place we set out to create the Remixed Emotions playlist generator. By signing into their Spotify account users would be able to see an analysis of the “emotions” found in their music.
As this ad required the user to sign in through Spotify the initial experience was designed to be as frictionless as possible. The sign in button was centered to keep it noticeable with a link underneath allowing the user to skip the sign in flow and use a pre-generated playlist.
After the user signed in via their account they would be shown their results page. The copy and design of which would reflect the personality that was most dominant in their playlist (ties were handled via predetermined ranking). To help visualize their music analysis a pie chart was included which displayed the percentage of each emotion found in their music.
Tracks in the recommended playlist were also given a colored tag to indicate which personality trait they were paired with. To allow further customization controls were included allowing the user to tweak the playlist by adding or removing tracks from a certain character.
The Results
The final product was an intuitive experience that succeeded in tying the film’s characters to our music recommendation APIs. Most importantly it was fun to use, team members on both the client’s end and our own were quick to analyze their own music to view their results. This would be true of users as well and the campaign would go on to have a successful run. In all, the project fulfilled the client’s request while providing an enjoyable experience to the user.
