- Identify the demographics of music streaming services
- Understand current market trends
- Determine Spotify’s competitors and their strengths/weaknesses
- Determine users’ frustrations/motivations/needs/goals
- Understand users’ experience with Spotify’s social capabilities
I started off the project with research to understand and gain insight into the frustrations, and needs of the users. I summarized important points from gathered collection of data and statistics related to the research goals/topic for more insights:
- Spotify operates in around 79 countries
- 29% of Spotify users are millennials
- 56% of Spotify users are male, 44% are female
- Spotify has 232M active users and 108M premium subscribers
- 52% of users are listening to songs on Spotify from their smartphones
- Spotify is being tuned by users 148 minutes every day
- Around 50M+ tracks and 3B+ playlists are available to users
- Spotify has prototyped an unreleased feature called “Social Listening” that lets multiple people add songs to a queue they can all listen to.
- Spotify is prototyping a new way to see what friends have been listening to, called “Tastebuds.”
I compared different streaming services based on their strengths and weaknesses to have an idea on how existing services affect the market.
In order to gain qualitative data about users’ goals, needs, frustrations and motivations, I conducted user interviews on users that fit the demographics from market research. I completed interviews from 5 different interview participants. Two are male, and three are female, and fall between ages 24 to 40. All are Spotify Premium users. Below are some of the interesting findings from the interview:
- All participants use Spotify mostly on mobile phones.
- Participants usually use Spotify during commute.
- All participants mentioned that two of the most important things in an overall positive music streaming experience are: Content, and Discoverability.
- All participants mentioned having experience listening music with other people.
- All participants mentioned having experience sharing music.
After conducting the interviews, I took the transcripts of the interview and transferred it to post-its, and looked for patterns and similar topics across the empathy map which formed 3 main insights from where I generated the users' needs.
Pattern 1: Relevance
"I look through a lot of playlists - sometimes searching for a mood or a genre, then play through the playlists and pick tracks that I like."
Insight: People have different sources for music discovery, but eventually filter to what they think are most relevant to them.
Need: People need to discover music from sources that they feel are relevant to them.
Pattern 2: Stories
"When I was going through a difficult time and I was talking to my friend about it, he shared a Spotify playlist to me that helped him go through a similar situation."
Insight: People usually share music that has a story behind it.
Need: People need a platform where they can share their stories related to certain music.
Pattern 3: Social
"I usually share songs with my family on WhatsApp from Spotify."
Insight: One of the main sources of music (sharing and discovering) of people is their social connections.
Need: People need a platform where they can exchange music with their social connections.
Based on gathered research, combined with insights from empathy map, I created a persona that represents Spotify's key audience segment.
I created the POV statements and HMW questions to be able to define the problem statements from the insights and needs of the persona, and to formulate questions that would help generate ideas that would lead to different solutions.
One way to exhaust possible solutions for the HMWs, is group brainstorming with people who fit the demographics based on our research. I gathered 4 participants and brainstormed each HMW question for 3 mins individually. Afterwards, everyone shared their answers within the group. The second round was for 5 minutes, and everyone just voiced out what they think, and sometimes built up on each others' ideas.
Combining business goals from the design brief and user goals from the research, I created a diagram that represents the project goals necessary to identify necessary factors to consider when designing the new feature.
I created a feature roadmap that ranked features by priority mainly based on business goals, competitors, primary research, effort, and confidence.
Now that we have defined the necessary features that will be included in our product, we then define the structure of these contents inside the app — its hierarchy, organization, general flow. Building from the product goals, and feature roadmap, I created a sitemap that included proposed pages to help visualize the structure of Spotify including the new features.
Simulating the flow a user follows to achieve a main task on the website, I focused on smaller processes needed for the main task and was able to outline the key screens needed for the new feature.
Considering the persona, I generated a more complex scenario the persona could encounter. This process ensures that all screen needed to complete the main task are accounted for.
Before going digital, I sketched out the key screens necessary for fulfilling the tasks in our user flow. Sketching first allowed me to brainstorm different ideas on how to design different screens effectively. Below are the final sketches that I intend to use when moving into digital wireframing.
Next, I created high fidelity wireframes mainly to serve as a blueprint for the visual interface, and to be used for a prototype that allows us to test the effectiveness of visualize hierarchy, priority, and flow before implementing more details, such as font and colors.
Homescreen
.png)
Options Menu
Music Memo Editor
.png)
Music Memo View
In order to test the overall quality and ease of navigation throughout the whole design, and to observe areas of errors/difficulties, I went out and had 5 total strangers (3 male, 2 female) interact with my prototype. I used Think-aloud Methodology and In-person Moderated Usability Testing. Criteria for participants were based on the demographics from research phase (ages 20 - 40) and people who are Spotify Premium members.
The users were given the following scenarios and tasks to complete:
Scenario 1: You want to share a new music from your favorite artist as a music memo.
- Task 1: Check "Billie Eilish"'s album in your Recently played list.
- Task 2: Listen to the album.
- Task 3: Share the track as a Music Memo in the form of a card with a message.
Scenario 2: After posting a music memo, you want to check the one you posted, and other people’s music memo. While you were looking at other people’s music memos, you found one that you liked.
- Task 1: Look at the Music Memos.
- Task 2: Add a song from "Tokyo Incidents" as favorite
Summary of findings from 5 participants (3 male, 2 female):
- Completion Rate: 100%
- Error Rate: 90%
- All participants recognized the value of the feature and how it would affect them in their use of Spotify.
- Participants felt like the feature was similar to Instagram's "Stories" but the design still felt like Spotify.
- 4 out of 5 people mentioned that the sharing process of the Music Memo was relatively easy.
- Most of the errors occurred in the first task when trying to look for the specific album — mostly because of the limitation of the prototype.
After collecting my notes and audio/screen recordings from my testing, I transferred it to post-its, and then grouped together common statements to come up with insights on specific elements of the site.
After grouping similar concerns/topics, I uncovered insights, and formed specific solutions for each:
Pattern 1: Quick Share Button
Insight: Participants feel like steps for sharing the Music Memo could be simplified.
Solution: Include a quick share button on the song page.
Pattern 2: Feature Name
Insight: Participants were confused about the difference between Social Discovery and Music Memo.
Solution: Provide a more consistent name for the feature.
Pattern 3: Message Placeholder
Insight: Participants missed the message placeholder and wasn’t sure if message could be inserted in that area.
Solution: Make the “Insert Message” placeholder more visually encouraging for users to insert a message.
Pattern 4: Album Position
Insight: Participants missed the location of the album on the home screen.
Solution: Place the album based on the user’s mental model - when looking for albums in the current design of Spotify.
After gaining insight and prioritizing recommendations, I tweaked our high fidelity wireframes to reflect the solutions.
In order to have a reference of how I would like the final prototype to look like, I gathered pins in pinterest that I think would best suit the brand's vision using keywords: Innovative, Playful, Passionate, Expressive. This will help me maintain a consistent visual identity for the project while designing.
In order to define a brand style before applying it to the final design, I referenced my mood board and chose the images, colors, and typography that best reflects Spotify's branding.
To have a collection of visual elements for consistency, I used elements (components, color styles, and text styles that I defined in Figma) and put all in one page that makes up the UI Kit.
After applying the changes to the wireframes, I used the UI Kit and occasionally referring to the mood board, I made sure that all elements in the prototype are consistent with Spotify's branding to cohesively integrate within the app.
Homescreen
%20copy.png)
Options Menu
.png)
Music Memo Editor
.png)
Music Memo Editor
Music Memo View
Music Memo View
.png)
.png)
.png)
.png)
