Moodify
App DesiAdding a social media feature to spofify (Concept)
Role
UI/UX Designer
Type
Mobile
Year
2019
Moodify
App DesiAdding a social media feature to spofify (Concept)
Role
UI/UX Designer
Type
Mobile
Year
2019
Moodify
App DesiAdding a social media feature to spofify (Concept)
Role
UI/UX Designer
Type
Mobile
Year
2019
Overview
As a streaming music service, Spotify is the group leader and it wants to stay that way. For this reason, they want to improve engagement and retention in the app. In order to do that, they want to expand on their social capabilities.
Challenge
Define what’s the best way moving forward in social media direction, and provide Spotify with a prototype of the feature(s) that are adding, integrated seamlessly within the rest of
Solution
As the product designer, my role is to discover what sharing music means to users and develop delightful features that satisfy user needs.
Research
Market Research
To discover the potential improvement, the first step of improving the app is to understand it’s current status in the market. I collected some helpful data from Statista and Vertro Analytics. The main aspects I focused on are the user base, usage frequency, and usage duration.
As the most popular music streaming app, Spotify has the highest frequency, user base and stickness. However, the average session duration on Spotify is low compare to other music streaming apps.
How about music streaming apps vs. social media?
The two charts above depict the frequency difference between social media and music apps. Apparently, social media apps have a much higher frequency than music apps. Adding a social media feature to Spotify has the potential to increase the frequency of the app.
Base on the report Spotify Usage and Revenue Statistics by Mansoor Iqbal, one of Spotify’s most-loved features is the user-specific playlists generated at first weekly and now daily for each listener, based on their listening history. The Spotify algorithm serves users tracks based on their crossover with other listeners’ histories, natural language processing, and raw audio models.
What can we learn from the report?
Spotify has a low avg. session duration
Social media feature can improve the frequency
Algorithm generated playlist is the most popular feature
User Interview
In order to build a deep empathy with the uesers and understand what king of experience they are looking for, I decided to set up an interview. According to Spotify, 72% of users are millennials, in addition, Statista reports that 26% of Spotify users are between the ages of 18 and 24. So I invited 5 participants between the ages of 20-30. The interview focuses on two main aspects:
The listening habits
The sharing experience
Affinity map, each color represents a participant
Some captions from the interview:
Interview Insights
I found the participants have very diverse points of view regarding what music means to them, how they share music, and how they listen to music. Nerveless, there are still some patterns the participants share:
Sharing music is a rewarding experience, users are looking for attention. They incline to share more when consistently have positive feedbacks.
80% of participants mentioned music is some sort of personal thing. It is closely related to their feelings and moods.
People like and sometimes need recommendations.
Users are looking for music that is suitable for the moment.
Define
I used the interview method focused on building empathy with people about their home design experience. I uncovered the needs, and desires of our target customers. I also addressed several areas for improvement.
Needs
Music can fit their mood
Music can fit the moment
Find new music
Wants
Share emotion
Share music to people who can have resonance w/ them
Have feedback when sharing music
Find people have the same music taste
Smart recommendations
Opportunities
Find a way to connect music and mood intuitively
Embed recommendation function
Take advantage of the user-specific playlist
Persona
With these key insights, we proceeded to create a persona and empathy map to understand our users on a deeper level and a potential solution.
HMW Questions
How might we help people find the right music to fit their moods?
How might we help people share the mood behind the music they are listening to?
Market Research
To discover the potential improvement, the first step of improving the app is to understand it’s current status in the market. I collected some helpful data from Statista and Vertro Analytics. The main aspects I focused on are the user base, usage frequency, and usage duration.
As the most popular music streaming app, Spotify has the highest frequency, user base and stickness. However, the average session duration on Spotify is low compare to other music streaming apps.
How about music streaming apps vs. social media?
The two charts above depict the frequency difference between social media and music apps. Apparently, social media apps have a much higher frequency than music apps. Adding a social media feature to Spotify has the potential to increase the frequency of the app.
Base on the report Spotify Usage and Revenue Statistics by Mansoor Iqbal, one of Spotify’s most-loved features is the user-specific playlists generated at first weekly and now daily for each listener, based on their listening history. The Spotify algorithm serves users tracks based on their crossover with other listeners’ histories, natural language processing, and raw audio models.
What can we learn from the report?
Spotify has a low avg. session duration
Social media feature can improve the frequency
Algorithm generated playlist is the most popular feature
User Interview
In order to build a deep empathy with the uesers and understand what king of experience they are looking for, I decided to set up an interview. According to Spotify, 72% of users are millennials, in addition, Statista reports that 26% of Spotify users are between the ages of 18 and 24. So I invited 5 participants between the ages of 20-30. The interview focuses on two main aspects:
The listening habits
The sharing experience
Affinity map, each color represents a participant
Some captions from the interview:
Interview Insights
I found the participants have very diverse points of view regarding what music means to them, how they share music, and how they listen to music. Nerveless, there are still some patterns the participants share:
Sharing music is a rewarding experience, users are looking for attention. They incline to share more when consistently have positive feedbacks.
80% of participants mentioned music is some sort of personal thing. It is closely related to their feelings and moods.
People like and sometimes need recommendations.
Users are looking for music that is suitable for the moment.
Define
I used the interview method focused on building empathy with people about their home design experience. I uncovered the needs, and desires of our target customers. I also addressed several areas for improvement.
Needs
Music can fit their mood
Music can fit the moment
Find new music
Wants
Share emotion
Share music to people who can have resonance w/ them
Have feedback when sharing music
Find people have the same music taste
Smart recommendations
Opportunities
Find a way to connect music and mood intuitively
Embed recommendation function
Take advantage of the user-specific playlist
Persona
With these key insights, we proceeded to create a persona and empathy map to understand our users on a deeper level and a potential solution.
HMW Questions
How might we help people find the right music to fit their moods?
How might we help people share the mood behind the music they are listening to?
Market Research
To discover the potential improvement, the first step of improving the app is to understand it’s current status in the market. I collected some helpful data from Statista and Vertro Analytics. The main aspects I focused on are the user base, usage frequency, and usage duration.
As the most popular music streaming app, Spotify has the highest frequency, user base and stickness. However, the average session duration on Spotify is low compare to other music streaming apps.
How about music streaming apps vs. social media?
The two charts above depict the frequency difference between social media and music apps. Apparently, social media apps have a much higher frequency than music apps. Adding a social media feature to Spotify has the potential to increase the frequency of the app.
Base on the report Spotify Usage and Revenue Statistics by Mansoor Iqbal, one of Spotify’s most-loved features is the user-specific playlists generated at first weekly and now daily for each listener, based on their listening history. The Spotify algorithm serves users tracks based on their crossover with other listeners’ histories, natural language processing, and raw audio models.
What can we learn from the report?
Spotify has a low avg. session duration
Social media feature can improve the frequency
Algorithm generated playlist is the most popular feature
User Interview
In order to build a deep empathy with the uesers and understand what king of experience they are looking for, I decided to set up an interview. According to Spotify, 72% of users are millennials, in addition, Statista reports that 26% of Spotify users are between the ages of 18 and 24. So I invited 5 participants between the ages of 20-30. The interview focuses on two main aspects:
The listening habits
The sharing experience
Affinity map, each color represents a participant
Some captions from the interview:
Interview Insights
I found the participants have very diverse points of view regarding what music means to them, how they share music, and how they listen to music. Nerveless, there are still some patterns the participants share:
Sharing music is a rewarding experience, users are looking for attention. They incline to share more when consistently have positive feedbacks.
80% of participants mentioned music is some sort of personal thing. It is closely related to their feelings and moods.
People like and sometimes need recommendations.
Users are looking for music that is suitable for the moment.
Define
I used the interview method focused on building empathy with people about their home design experience. I uncovered the needs, and desires of our target customers. I also addressed several areas for improvement.
Needs
Music can fit their mood
Music can fit the moment
Find new music
Wants
Share emotion
Share music to people who can have resonance w/ them
Have feedback when sharing music
Find people have the same music taste
Smart recommendations
Opportunities
Find a way to connect music and mood intuitively
Embed recommendation function
Take advantage of the user-specific playlist
Persona
With these key insights, we proceeded to create a persona and empathy map to understand our users on a deeper level and a potential solution.
HMW Questions
How might we help people find the right music to fit their moods?
How might we help people share the mood behind the music they are listening to?
Design Goals
Design Process
Ideate
With the goals and empathy in mind, I start to design the new feature by skething out the flow.
After sevral attempts, it’s started to be clear which direction I wanted to go with. I further develop the flow chart below.
Having a clear idea and solution in mind, it was time to move the project into the stage of designing the screens. I ran a series of Crazy 8s to quickly generate ideas and screens on how we would solve the “How Might We”..
With some inspiration from our research and crazy 8s, I sketched out the main screens of the new feature.
To avoid disturbing the IA of Spotify and since the new feature was a brand new element to Spotify, we decided to let the new feature live in its own world. We create a swip down gesture to launch the new feature and designed a new logo for it.
We named it “Moodify” as it was all about moods and design an icon for it.
Hi-fi Design
As people were so familiar with Spotify and we had all the branding and UI elements on hand, we decided to go hi-fi directly after sketching out the screens we are going to design to avoid confusion during the following prototype as well as save time for iterating.
The new feature consists of two sessions - the browsing session and the sharing session.
Feature 1: Sharing music and mood
Users follow this flow to share music with mood and scenario then get feedback.
Feature 2: Browsing music shared by other people
Users follow this flow with Browsing other people’s music/mood and interact with them.
Test & Iterate
Userbility Test
We built a prototype using the key screens developed and recruited 5 participants to test the features. Although there are some minor flaws, the overall flow worked well during the usability test. However, we came across a serious problem with the main feature. Most participants commented way of select moods and scenes was not attractive to them.
It didn't work out?
Rethink
Since the usability test didn’t turn out so good, I decide to take one step back and re-think our design strategy. I went back to the interview scripts to see if there were anything we missed. We noticed one thing that users sometimes struggling to find the right song for their current mood. This problem reminded me of the user-specific playlist feature, which feeds users’ songs based on their listening pattern, of Spotify. The user-specific playlist is generated automatically base on users’ negative input. What if we create a feature generate playlist base on positive input？I decided to try on including a recommendation feature embedded in the mood sharing feature. To have a clear view of the new idea, I re-worked the user flow.
Having great confidence in the new flow, I started to think and research ways can make the core feature more interesting. I researched different ways to present mood and feelings. Then I found the mood ring, a very graphical and amusing way to represent mood.
It’s necessary to simplify the design of the mood ring to make it interactive and playful. I started to sketch sevral viarations.
The final design of the mood ring is a simplified version consists of 24 types of mood. To verify this new idea, we built a prototype and sent it out to 5 participants for testing. All the participants thought it was an interesting feature. Three of them commented they would even like to play with the mood ring just for fun.
Having a clear idea about the new design, I start to sketch out the new screens according to the flow. The goal is to incorporate everything we discussed above into the new feature and maintain an intuitive user interaction.
IterationAfter varified my idea with several users, I start to iterate the screens.
Design Change 1
4/5 Participants mentioned the main screen wasn’t portioned properly. We found most users would like to browse more than sharin here.We reallized the sharing session shouldn’t take so much screen real estate. We re-designed the main screen to make the adjustment.We also embeded the new feature into menu bar instead of the “swipe down” gesture as some participants were confused by the gesture and new logo.
Design Change 2
As we developed a new interaction for sharing mood, we decided split and mood & scene screen into two screens.
Usability Test - Round 2
Having our design sorted out again, I created a new prototype for another usability test. I recruited three participants to do a second round usability test. There was some confusion about the mood ring and how the system will generate the recommendation list based on the user’s input of mood and “what are you up to?”. After I explained to them this is not a real app and the idea behind the two features, they both thought the idea made sense.
Prototype
Ideate
With the goals and empathy in mind, I start to design the new feature by skething out the flow.
After sevral attempts, it’s started to be clear which direction I wanted to go with. I further develop the flow chart below.
Having a clear idea and solution in mind, it was time to move the project into the stage of designing the screens. I ran a series of Crazy 8s to quickly generate ideas and screens on how we would solve the “How Might We”..
With some inspiration from our research and crazy 8s, I sketched out the main screens of the new feature.
To avoid disturbing the IA of Spotify and since the new feature was a brand new element to Spotify, we decided to let the new feature live in its own world. We create a swip down gesture to launch the new feature and designed a new logo for it.
We named it “Moodify” as it was all about moods and design an icon for it.
Hi-fi Design
As people were so familiar with Spotify and we had all the branding and UI elements on hand, we decided to go hi-fi directly after sketching out the screens we are going to design to avoid confusion during the following prototype as well as save time for iterating.
The new feature consists of two sessions - the browsing session and the sharing session.
Feature 1: Sharing music and mood
Users follow this flow to share music with mood and scenario then get feedback.
Feature 2: Browsing music shared by other people
Users follow this flow with Browsing other people’s music/mood and interact with them.
Test & Iterate
Userbility Test
We built a prototype using the key screens developed and recruited 5 participants to test the features. Although there are some minor flaws, the overall flow worked well during the usability test. However, we came across a serious problem with the main feature. Most participants commented way of select moods and scenes was not attractive to them.
It didn't work out?
Rethink
Since the usability test didn’t turn out so good, I decide to take one step back and re-think our design strategy. I went back to the interview scripts to see if there were anything we missed. We noticed one thing that users sometimes struggling to find the right song for their current mood. This problem reminded me of the user-specific playlist feature, which feeds users’ songs based on their listening pattern, of Spotify. The user-specific playlist is generated automatically base on users’ negative input. What if we create a feature generate playlist base on positive input？I decided to try on including a recommendation feature embedded in the mood sharing feature. To have a clear view of the new idea, I re-worked the user flow.
Having great confidence in the new flow, I started to think and research ways can make the core feature more interesting. I researched different ways to present mood and feelings. Then I found the mood ring, a very graphical and amusing way to represent mood.
It’s necessary to simplify the design of the mood ring to make it interactive and playful. I started to sketch sevral viarations.
The final design of the mood ring is a simplified version consists of 24 types of mood. To verify this new idea, we built a prototype and sent it out to 5 participants for testing. All the participants thought it was an interesting feature. Three of them commented they would even like to play with the mood ring just for fun.
Having a clear idea about the new design, I start to sketch out the new screens according to the flow. The goal is to incorporate everything we discussed above into the new feature and maintain an intuitive user interaction.
IterationAfter varified my idea with several users, I start to iterate the screens.
Design Change 1
4/5 Participants mentioned the main screen wasn’t portioned properly. We found most users would like to browse more than sharin here.We reallized the sharing session shouldn’t take so much screen real estate. We re-designed the main screen to make the adjustment.We also embeded the new feature into menu bar instead of the “swipe down” gesture as some participants were confused by the gesture and new logo.
Design Change 2
As we developed a new interaction for sharing mood, we decided split and mood & scene screen into two screens.
Usability Test - Round 2
Having our design sorted out again, I created a new prototype for another usability test. I recruited three participants to do a second round usability test. There was some confusion about the mood ring and how the system will generate the recommendation list based on the user’s input of mood and “what are you up to?”. After I explained to them this is not a real app and the idea behind the two features, they both thought the idea made sense.
Prototype
Ideate
With the goals and empathy in mind, I start to design the new feature by skething out the flow.
After sevral attempts, it’s started to be clear which direction I wanted to go with. I further develop the flow chart below.
Having a clear idea and solution in mind, it was time to move the project into the stage of designing the screens. I ran a series of Crazy 8s to quickly generate ideas and screens on how we would solve the “How Might We”..
With some inspiration from our research and crazy 8s, I sketched out the main screens of the new feature.
To avoid disturbing the IA of Spotify and since the new feature was a brand new element to Spotify, we decided to let the new feature live in its own world. We create a swip down gesture to launch the new feature and designed a new logo for it.
We named it “Moodify” as it was all about moods and design an icon for it.
Hi-fi Design
As people were so familiar with Spotify and we had all the branding and UI elements on hand, we decided to go hi-fi directly after sketching out the screens we are going to design to avoid confusion during the following prototype as well as save time for iterating.
The new feature consists of two sessions - the browsing session and the sharing session.
Feature 1: Sharing music and mood
Users follow this flow to share music with mood and scenario then get feedback.
Feature 2: Browsing music shared by other people
Users follow this flow with Browsing other people’s music/mood and interact with them.
Test & Iterate
Userbility Test
We built a prototype using the key screens developed and recruited 5 participants to test the features. Although there are some minor flaws, the overall flow worked well during the usability test. However, we came across a serious problem with the main feature. Most participants commented way of select moods and scenes was not attractive to them.
It didn't work out?
Rethink
Since the usability test didn’t turn out so good, I decide to take one step back and re-think our design strategy. I went back to the interview scripts to see if there were anything we missed. We noticed one thing that users sometimes struggling to find the right song for their current mood. This problem reminded me of the user-specific playlist feature, which feeds users’ songs based on their listening pattern, of Spotify. The user-specific playlist is generated automatically base on users’ negative input. What if we create a feature generate playlist base on positive input？I decided to try on including a recommendation feature embedded in the mood sharing feature. To have a clear view of the new idea, I re-worked the user flow.
Having great confidence in the new flow, I started to think and research ways can make the core feature more interesting. I researched different ways to present mood and feelings. Then I found the mood ring, a very graphical and amusing way to represent mood.
It’s necessary to simplify the design of the mood ring to make it interactive and playful. I started to sketch sevral viarations.
The final design of the mood ring is a simplified version consists of 24 types of mood. To verify this new idea, we built a prototype and sent it out to 5 participants for testing. All the participants thought it was an interesting feature. Three of them commented they would even like to play with the mood ring just for fun.
Having a clear idea about the new design, I start to sketch out the new screens according to the flow. The goal is to incorporate everything we discussed above into the new feature and maintain an intuitive user interaction.
IterationAfter varified my idea with several users, I start to iterate the screens.
Design Change 1
4/5 Participants mentioned the main screen wasn’t portioned properly. We found most users would like to browse more than sharin here.We reallized the sharing session shouldn’t take so much screen real estate. We re-designed the main screen to make the adjustment.We also embeded the new feature into menu bar instead of the “swipe down” gesture as some participants were confused by the gesture and new logo.
Design Change 2
As we developed a new interaction for sharing mood, we decided split and mood & scene screen into two screens.
Usability Test - Round 2
Having our design sorted out again, I created a new prototype for another usability test. I recruited three participants to do a second round usability test. There was some confusion about the mood ring and how the system will generate the recommendation list based on the user’s input of mood and “what are you up to?”. After I explained to them this is not a real app and the idea behind the two features, they both thought the idea made sense.
Prototype
Deliverable
Browsing people’s share & interacte with them
By simplye swipe left and right to browse friends muisc and mood. Tap on the song to start interacte with your friends.
Share Mood & Music
Dial around the mood ring to enter your mood and then your scene, Moodify will pop out recommendations for you. Type in your thoughts and share.
Thank you for stopping by
·
Thank you for stopping by
·
Thank you for stopping by
·
Thank you for stopping by
·
Thank you for stopping by
·
Thank you for stopping by
·
Thank you for stopping by
·
Thank you for stopping by
·
Thank you for stopping by
·
Thank you for stopping by
·
Thank you for stopping by
·
Thank you for stopping by
·
Open to
Open to
Open to
work
work
work
Let's Chat!