Project Type
UX Design,
Feature Design,
App Design
Timeline
2 weeks
Role
Sole UX Designer (DesignLab Bootcamp)
Background
Spotify’s mission is to “unlock the potential of human creativity—by giving a million creative artists the opportunity to live off their art and billions of fans the opportunity to enjoy and be inspired by it.” Ever since 2017, Spotify releases their Spotify Wrapped every December to give listeners and creators a look into their music taste for the past year. Spotify Wrapped summarizes users’ most played songs, artists, genre and more.
In 2021, they helped users find a deeper meaning to their listening habits with ‘Audio Aura’ and ‘The Movie Soundtrack’. In addition to sharing their Spotify Wrapped to social media, users can also create ‘Blend’ playlists with their friends to get a glimpse of what their music taste is like.
Challenge
What we are interested in is how we can help users understand their music taste on a deeper level all year round. What would it look like to visualize musical taste? What would it be like to compare your musical taste with another person? What would a tool for that look and feel like? How can we utilize data visualization to answer those questions?
Empathize
Research
Secondary Research
Competitive Analysis
User Interviews
Affinity Map
Define
Persona
POV and HMW Statements
Ideate
Feature Sitemap
Crazy 8’s
Sketches
Design
Mid-Fidelity Wireframes
High-Fidelity
Testing + Iteration
Usability Test
Affinity Map
Iterations
RESEARCH
Because this project heavily focuses on data visualization, there were 3 main things I was interested in during the research phase:
-
How Spotify currently organizes its information and how they are all related
-
What methods other data heavy apps use to display information effectively
-
What users considered to be part of their music taste, their listening habits, and what they would like to know about their listening habits
Secondary Research
To start off, I did some secondary research about Spotify and discovered:
-
Spotify creates its own set of genres based on user listening patterns
-
Songs that are listened together are clustered into a a group and assigned a unique genre label
-
Spotify creates its own set of genres based on user listening patterns
-
Songs that are listened together are clustered into a a group and assigned a unique genre label
Competitive Analysis
I looked into a few apps that did a great job at data visualization: Fitbit and Mint.
Some things I noticed that helped these apps show valuable information on a small device include:
-
Color coding to help relay similar information and help users differentiate between the different types of info
-
Use of symbols and icons to say more with less words and space
-
Bar graphs tend to be used more because they are easy to understand
Additionally, I looked into an existing music data application and compared the different types of information they make available to their users in comparison to Spotify Wrapped.
User Interviews + Affinity Mapping
Because the feature I am adding builds off of Spotify Wrapped, I wanted to gather more insight as to how users currently experience and feel about it.
To help me organize all the information I gathered, I created an affinity map.
“I usually wouldn’t contribute to the queue while listening collaboratively because I don’t think anyone else listens to my type of music”
“I like learning about my audio aura because tells me something deeper about my music taste and helps me learn more about myself“
“Dance pop is one of my top genres but I’m not sure what that means.”
INSIGHTS
-
Those that don’t have similar music taste as those around them are more shy with sharing music
-
Users liked being able to see the vibe of their music being presented to them (audio aura)
-
Users liked to describe their music taste using adjectives and describing the vibe/mood
-
Users are not really aware of some of their listening habits (spotify wrapped results)
DEFINE
Persona
After gathering insights about my users goals, motivations, and pain points with Spotify and Spotify Wrapped, I created a persona to help me tailor my design around them.
POV and HMW Statements
From the research insights I had gathered earlier, I wrote POV and HMW statements to help me look at them from my users’ point of view and make sure the solutions I will be coming up with are addressing their needs and pain points.
Currently, Spotify users can get an overview of their listening habits for an entire year through Spotify Wrapped. However, users are often confused with their results and find them unrelatable. Users are interested in learning more about their results and insights into who they are based on their listening habits.
IDEATE
Now that I have used my research to define what problem I want to solve with Spotify’s new feature, I can start brainstorming some ideas.
HMW Statement Solutions
Building off of my HMW statements from earlier, I was able to come up with many possible solutions that could address the problem statement.
Feature Sitemap
Because this new feature focuses on data visualization, I created a sitemap-esque chart to get a general idea of the pages and each of its contents before working on the layout and visuals.
Crazy 8's
After getting an idea of the types of information I would like to incorporate into the new feature, I decided to use the Crazy 8’s method to push myself to generate as many different solutions for laying out information.
Sketches
To help refine the ideas I came up with during Crazy 8’s, I made some higher fidelity sketches of all the different pages I planned on having.
DESIGN
During the design phase, I had to be mindful of Spotify’s branding to ensure that the final product, with the new feature, would be cohesive. I stuck to the brand’s signature green and black colors and avoided introducing other colors.
Mid-Fidelity Wireframes
Before applying Spotify’s branding, I first needed to create mid-fidelity wireframes to refine the placement and spacing of the information I am presenting.
High-Fidelity UI Screens
After getting the layout down, I worked on adding UI elements to give the new feature a Spotify makeover and make it coherent with the rest of the app.
TESTING AND ITERATION
Usability Test
Once I had my UI screens ready, I wanted to test the new feature with regular users of Spotify.
I was particularly interested in:
-
Determine whether users are able to comprehend the different types of info displayed on the screens
-
Identify pain points users have while navigating through the feature
-
Changing dates
-
Looking for information
-
Assessing information
-
Affinity Map
To find patterns among all the information I gathered from usability testing, I created an affinity map and ranked the issues that came up from most to least important based on how crucial they were to the users’ experience and how long they would take to implement.
The most common patterns I discovered were:
The monthly bar graphs were confusing to users. They were confused with when each week started and ended
-
Users were not aware the genre bubble graphs could be utilized like a map (drag screen, zoom in/out).
-
The month button each page didn’t look like a button to users so they were not aware of the ability to quickly change months.
-
Users wanted to know more about their audio aura and what it meant as perception of songs is subjective.
Iterations
After organizing my users feedback, I made the most important iterations:
Add dates to the monthly graphs so that users aren’t left speculating on what the weeks represent
Add ‘Avg # of plays per day’ to help users take into account weeks with less days
Add visual cues (zoom bar and pre-zoomed view) to the genre bubble graph so users are made aware of this feature
Change background color of month so it resembles a button more
Adding a concrete definition of each audio aura to aid users in their understanding of their auras.
An easily digestible visualization of data that allows users to learn more about and understand their listening habits and insights into their audio aura
Monthly breakdown of listening habits (songs, artists, genres)
Comparison of music taste with others so that users can learn more about each other
A breakdown of user’s audio aura so they can better understand their musical identity
