Empowering users to personalize playback through simplified equalizer controls
Empowering users to personalize playback through simplified equalizer controls
I created a simplified equalizer experience to boost engagement among Spotify Premium users, integrating intuitive pitch and speed controls while maintaining song integrity. This feature balanced creative freedom with ease of use, validated through real user testing and refined based on actionable insights to ensure both personalization and performance.
Role
Product Designer
Tools
Figma, Framer, Zoom,
Slack, Google forms
Team
Myself and a
Product Manager
Myself &
Product Manager
Duration
May 2024- Jul 2024
Responsibilities
Product Design,
Prototyping,
Research
My UX Process
Discovery
I noticed a recurring behavior on platforms like Instagram and TikTok users engaging with modified versions of songs. However, Spotify lacked a native feature to customize tracks based on mood. I identified a creative gap for music personalization
Problem Statement
According to the discovery and the survey I conducted:
User awareness and engagement with Spotify's equalizer show a significant gap in usage and familiarity.
Users show excitement for music customization but express concerns about complexity and preserving originality of the Music.
Requirements
The Spotify experience has not been used to it's full potential, with many users wanting to engage with the equalizer but struggling to fully utilize it.
Now the real question is
"How can I help Spotify users create a more personalized and engaging music experience that feels worth the Premium cost and also utilizes the full potential of an equalizer?"
Based on the insights, I defined 3 key features: Mood sync slider, Save/Share remix, and Discover others’ edits. Each feature had clear user flows and acceptance criteria.
Based on the discoveries obtained, I started formulating the contents as to what the users really want to see in this website/app. These things came to my mind:
An interactive AI to ask for financial advices
Set specific targets they want to achieve using the AI chat
Keep track of their progress of a specific target/goal
Adjust their plan according to circumstances
Show clear data of the user’s transaction history
Show how much they owe and how much they are owed from people
Keep the chat minimalistic and to the point content/forecasting
Clear and easy to navigate onboarding experience
Based on the discoveries obtained, I started formulating the contents as to what the users really want to see in this website/app. These things came to my mind:
An interactive AI to ask for financial advices
Set specific targets they want to achieve using the AI chat
Keep track of their progress of a specific target/goal
Adjust their plan according to circumstances
Show clear data of the user’s transaction history
Show how much they owe and how much they are owed from people
Keep the chat minimalistic and to the point content/forecasting
Clear and easy to navigate onboarding experience
Syncro caters to two types of users: those who want to personalize their music by adjusting beats and notes, and those who prefer curated, pre-customized tracks based on trends. Both scenarios offer an interactive, engaging listening experience.
Target Audiences
Usability & User Flow
Syncro caters to two types of users: those who want to personalize their music by adjusting beats and notes, and those who prefer curated, pre-customized tracks based on trends. Both scenarios offer an interactive, engaging listening experience.
Design
Driven by user feedback and research, I designed Syncro to make each song a space for creative exploration. With features to adjust pitch, tempo, and more, Syncro empowers users to personalize their music experience through Creative and Altered modes, offering flexibility and control.
Switch between modes:
A new toggle button has been added, allowing users to easily switch between Creative and Altered modes for a customized experience.
The toggle that differentiates between the Creative mode and Altered mode is represented by a brush icon. This icon denotes the creative aspect of the design.
The modes are visually represented by this gradient involving green (Spotify's primary color) and black to add more visibility and texture to the design.
Creative Mode:
The goal of this mode is to provide users with a space where they can customize songs. However, I aimed to ensure the default interface would be intuitive, preventing any confusion about the new UI. Therefore, I designed it based on the commonly understood concept of an equalizer at the time.
This brush with a plus icon saves the customization of the particular song. It expands into two options.
You can:
Save the song with that particular setting
Play all the songs on that specific setting.
This gives a sense of wide range of options for the user to choose from making it fruitful of their investment.
Access Customized Songs:
Once you save a customization for a song, it will be added to a separate playlist dedicated to your customized tracks. This playlist is independent of your other playlists and is specifically designed for your creative edits.
The customized songs are given a number as a depiction of the pitch the user has saved the song under.
This avoids the confusion between the customized and non customized version of the song.
The '-' before a number denotes that the song is the slowed version.
Whereas a '+' denotes the song as a faster or sped up version of the original song.
Validations and Improvements
As drafted in the user flow, I started testing the prototype with my users and I got quite a few positive affirmation and helpful remarks on the design itself. Here are some common ones:
Initial version:
"I feel like the save customization button hinders the 'Add to playlist' button which I feel is more important here."
Final Version:
"This makes much more sense and gives the button the justification."
Initial version:
Users didn't find this helpful as they had to hit save again for the same reason which lacks options in it.
Final Version:
Now users can have options to save their creativity without having second thoughts!
Initial version:
Users didn't find this helpful as they had to hit save again for the same reason which lacks options in it.
Takeaways
Throughout the development of Syncro, I gained valuable insights into balancing creativity with usability, especially when integrating new features that users may not have explicitly requested. The iterative design process, with continuous user feedback, played a vital role in refining the experience to ensure it was both engaging and easy to use. Syncro offers more than meets the eye, as it aims to reshape the way users interact with music beyond just customization.
Timeline:
Completion (2 months):
Conducted user tests and gathered feedback on the prototype.
Refined the interface based on user insights, focusing on usability and aesthetics.
Launched the final version, ensuring all features functioned smoothly.
Future Plans:
Explore more customization options to enhance user creativity.
Simplify the user interface further for an even more intuitive experience.
Incorporate additional interactive elements based on user feedback.
If interested in the entire journey, feel free to access the Figma link provided to explore the process, iterations, and final designs in detail.
Final Version:
"This makes much more sense and gives the button the justification."
Final Version:
Now users can have options to save their creativity without having second thoughts!
Initial version:
"I feel like the save customization button hinders the 'Add to playlist' button which I feel is more important here."
Takeaways
Takeaways
Throughout the development of Syncro, I gained valuable insights into balancing creativity with usability, especially when integrating new features that users may not have explicitly requested. The iterative design process, with continuous user feedback, played a vital role in refining the experience to ensure it was both engaging and easy to use. Syncro offers more than meets the eye, as it aims to reshape the way users interact with music beyond just customization.
Timeline:
Completion (2 months):
Conducted user tests and gathered feedback on the prototype.
Refined the interface based on user insights, focusing on usability and aesthetics.
Launched the final version, ensuring all features functioned smoothly.
Future Plans:
Explore more customization options to enhance user creativity.
Simplify the user interface further for an even more intuitive experience.
Incorporate additional interactive elements based on user feedback.
If interested in the entire journey, feel free to access the Figma link provided to explore the process, iterations, and final designs in detail.
Throughout the development of Syncro, I gained valuable insights into balancing creativity with usability, especially when integrating new features that users may not have explicitly requested. The iterative design process, with continuous user feedback, played a vital role in refining the experience to ensure it was both engaging and easy to use. Syncro offers more than meets the eye, as it aims to reshape the way users interact with music beyond just customization.
Timeline:
Completion (2 months):
Conducted user tests and gathered feedback on the prototype.
Refined the interface based on user insights, focusing on usability and aesthetics.
Launched the final version, ensuring all features functioned smoothly.
Future Plans:
Explore more customization options to enhance user creativity.
Simplify the user interface further for an even more intuitive experience.
Incorporate additional interactive elements based on user feedback.
If interested in the entire journey, feel free to access the Figma link provided to explore the process, iterations, and final designs in detail.
Empowering users to personalize playback through simplified equalizer controls
Empowering users to personalize playback through simplified equalizer controls
I created a simplified equalizer experience to boost engagement among Spotify Premium users, integrating intuitive pitch and speed controls while maintaining song integrity. This feature balanced creative freedom with ease of use, validated through real user testing and refined based on actionable insights to ensure both personalization and performance.
Role
Product Designer
Tools
Figma, Framer, Zoom,
Slack, Google forms
Team
Myself and a
Product Manager
Myself &
Product Manager
Duration
May 2024- Jul 2024
Responsibilities
Product Design,
Prototyping,
Research
My UX Process
Discovery
I noticed a recurring behavior on platforms like Instagram and TikTok users engaging with modified versions of songs. However, Spotify lacked a native feature to customize tracks based on mood. I identified a creative gap for music personalization
Problem Statement
According to the discovery and the survey I conducted:
User awareness and engagement with Spotify's equalizer show a significant gap in usage and familiarity.
Users show excitement for music customization but express concerns about complexity and preserving originality of the Music.
Requirements
The Spotify experience has not been used to it's full potential, with many users wanting to engage with the equalizer but struggling to fully utilize it.
Now the real question is
"How can I help Spotify users create a more personalized and engaging music experience that feels worth the Premium cost and also utilizes the full potential of an equalizer?"
Based on the insights, I defined 3 key features: Mood sync slider, Save/Share remix, and Discover others’ edits. Each feature had clear user flows and acceptance criteria.
Based on the discoveries obtained, I started formulating the contents as to what the users really want to see in this website/app. These things came to my mind:
An interactive AI to ask for financial advices
Set specific targets they want to achieve using the AI chat
Keep track of their progress of a specific target/goal
Adjust their plan according to circumstances
Show clear data of the user’s transaction history
Show how much they owe and how much they are owed from people
Keep the chat minimalistic and to the point content/forecasting
Clear and easy to navigate onboarding experience
Based on the discoveries obtained, I started formulating the contents as to what the users really want to see in this website/app. These things came to my mind:
An interactive AI to ask for financial advices
Set specific targets they want to achieve using the AI chat
Keep track of their progress of a specific target/goal
Adjust their plan according to circumstances
Show clear data of the user’s transaction history
Show how much they owe and how much they are owed from people
Keep the chat minimalistic and to the point content/forecasting
Clear and easy to navigate onboarding experience
Syncro caters to two types of users: those who want to personalize their music by adjusting beats and notes, and those who prefer curated, pre-customized tracks based on trends. Both scenarios offer an interactive, engaging listening experience.
Target Audiences
Usability & User Flow
Syncro caters to two types of users: those who want to personalize their music by adjusting beats and notes, and those who prefer curated, pre-customized tracks based on trends. Both scenarios offer an interactive, engaging listening experience.
Design
Driven by user feedback and research, I designed Syncro to make each song a space for creative exploration. With features to adjust pitch, tempo, and more, Syncro empowers users to personalize their music experience through Creative and Altered modes, offering flexibility and control.
Switch between modes:
A new toggle button has been added, allowing users to easily switch between Creative and Altered modes for a customized experience.
The toggle that differentiates between the Creative mode and Altered mode is represented by a brush icon. This icon denotes the creative aspect of the design.
The modes are visually represented by this gradient involving green (Spotify's primary color) and black to add more visibility and texture to the design.
Creative Mode:
The goal of this mode is to provide users with a space where they can customize songs. However, I aimed to ensure the default interface would be intuitive, preventing any confusion about the new UI. Therefore, I designed it based on the commonly understood concept of an equalizer at the time.
This brush with a plus icon saves the customization of the particular song. It expands into two options.
You can:
Save the song with that particular setting
Play all the songs on that specific setting.
This gives a sense of wide range of options for the user to choose from making it fruitful of their investment.
Access Customized Songs:
Once you save a customization for a song, it will be added to a separate playlist dedicated to your customized tracks. This playlist is independent of your other playlists and is specifically designed for your creative edits.
The customized songs are given a number as a depiction of the pitch the user has saved the song under.
This avoids the confusion between the customized and non customized version of the song.
The '-' before a number denotes that the song is the slowed version.
Whereas a '+' denotes the song as a faster or sped up version of the original song.
Validations and Improvements
As drafted in the user flow, I started testing the prototype with my users and I got quite a few positive affirmation and helpful remarks on the design itself. Here are some common ones:
Initial version:
"I feel like the save customization button hinders the 'Add to playlist' button which I feel is more important here."
Final Version:
"This makes much more sense and gives the button the justification."
Initial version:
Users didn't find this helpful as they had to hit save again for the same reason which lacks options in it.
Final Version:
Now users can have options to save their creativity without having second thoughts!
Initial version:
Users didn't find this helpful as they had to hit save again for the same reason which lacks options in it.
Takeaways
Throughout the development of Syncro, I gained valuable insights into balancing creativity with usability, especially when integrating new features that users may not have explicitly requested. The iterative design process, with continuous user feedback, played a vital role in refining the experience to ensure it was both engaging and easy to use. Syncro offers more than meets the eye, as it aims to reshape the way users interact with music beyond just customization.
Timeline:
Completion (2 months):
Conducted user tests and gathered feedback on the prototype.
Refined the interface based on user insights, focusing on usability and aesthetics.
Launched the final version, ensuring all features functioned smoothly.
Future Plans:
Explore more customization options to enhance user creativity.
Simplify the user interface further for an even more intuitive experience.
Incorporate additional interactive elements based on user feedback.
If interested in the entire journey, feel free to access the Figma link provided to explore the process, iterations, and final designs in detail.
Final Version:
"This makes much more sense and gives the button the justification."
Final Version:
Now users can have options to save their creativity without having second thoughts!
Initial version:
"I feel like the save customization button hinders the 'Add to playlist' button which I feel is more important here."
Takeaways
Takeaways
Throughout the development of Syncro, I gained valuable insights into balancing creativity with usability, especially when integrating new features that users may not have explicitly requested. The iterative design process, with continuous user feedback, played a vital role in refining the experience to ensure it was both engaging and easy to use. Syncro offers more than meets the eye, as it aims to reshape the way users interact with music beyond just customization.
Timeline:
Completion (2 months):
Conducted user tests and gathered feedback on the prototype.
Refined the interface based on user insights, focusing on usability and aesthetics.
Launched the final version, ensuring all features functioned smoothly.
Future Plans:
Explore more customization options to enhance user creativity.
Simplify the user interface further for an even more intuitive experience.
Incorporate additional interactive elements based on user feedback.
If interested in the entire journey, feel free to access the Figma link provided to explore the process, iterations, and final designs in detail.
Throughout the development of Syncro, I gained valuable insights into balancing creativity with usability, especially when integrating new features that users may not have explicitly requested. The iterative design process, with continuous user feedback, played a vital role in refining the experience to ensure it was both engaging and easy to use. Syncro offers more than meets the eye, as it aims to reshape the way users interact with music beyond just customization.
Timeline:
Completion (2 months):
Conducted user tests and gathered feedback on the prototype.
Refined the interface based on user insights, focusing on usability and aesthetics.
Launched the final version, ensuring all features functioned smoothly.
Future Plans:
Explore more customization options to enhance user creativity.
Simplify the user interface further for an even more intuitive experience.
Incorporate additional interactive elements based on user feedback.
If interested in the entire journey, feel free to access the Figma link provided to explore the process, iterations, and final designs in detail.
Empowering users to personalize playback through simplified equalizer controls
Empowering users to personalize playback through simplified equalizer controls
I created a simplified equalizer experience to boost engagement among Spotify Premium users, integrating intuitive pitch and speed controls while maintaining song integrity. This feature balanced creative freedom with ease of use, validated through real user testing and refined based on actionable insights to ensure both personalization and performance.
Role
Product Designer
Tools
Figma, Framer, Zoom,
Slack, Google forms
Team
Myself and a
Product Manager
Myself &
Product Manager
Duration
May 2024- Jul 2024
Responsibilities
Product Design,
Prototyping,
Research
My UX Process
Discovery
I noticed a recurring behavior on platforms like Instagram and TikTok users engaging with modified versions of songs. However, Spotify lacked a native feature to customize tracks based on mood. I identified a creative gap for music personalization
Problem Statement
According to the discovery and the survey I conducted:
User awareness and engagement with Spotify's equalizer show a significant gap in usage and familiarity.
Users show excitement for music customization but express concerns about complexity and preserving originality of the Music.
Requirements
The Spotify experience has not been used to it's full potential, with many users wanting to engage with the equalizer but struggling to fully utilize it.
Now the real question is
"How can I help Spotify users create a more personalized and engaging music experience that feels worth the Premium cost and also utilizes the full potential of an equalizer?"
Based on the insights, I defined 3 key features: Mood sync slider, Save/Share remix, and Discover others’ edits. Each feature had clear user flows and acceptance criteria.
Based on the discoveries obtained, I started formulating the contents as to what the users really want to see in this website/app. These things came to my mind:
An interactive AI to ask for financial advices
Set specific targets they want to achieve using the AI chat
Keep track of their progress of a specific target/goal
Adjust their plan according to circumstances
Show clear data of the user’s transaction history
Show how much they owe and how much they are owed from people
Keep the chat minimalistic and to the point content/forecasting
Clear and easy to navigate onboarding experience
Based on the discoveries obtained, I started formulating the contents as to what the users really want to see in this website/app. These things came to my mind:
An interactive AI to ask for financial advices
Set specific targets they want to achieve using the AI chat
Keep track of their progress of a specific target/goal
Adjust their plan according to circumstances
Show clear data of the user’s transaction history
Show how much they owe and how much they are owed from people
Keep the chat minimalistic and to the point content/forecasting
Clear and easy to navigate onboarding experience
Syncro caters to two types of users: those who want to personalize their music by adjusting beats and notes, and those who prefer curated, pre-customized tracks based on trends. Both scenarios offer an interactive, engaging listening experience.
Target Audiences
Usability & User Flow
Syncro caters to two types of users: those who want to personalize their music by adjusting beats and notes, and those who prefer curated, pre-customized tracks based on trends. Both scenarios offer an interactive, engaging listening experience.
Design
Driven by user feedback and research, I designed Syncro to make each song a space for creative exploration. With features to adjust pitch, tempo, and more, Syncro empowers users to personalize their music experience through Creative and Altered modes, offering flexibility and control.
Switch between modes:
A new toggle button has been added, allowing users to easily switch between Creative and Altered modes for a customized experience.
The toggle that differentiates between the Creative mode and Altered mode is represented by a brush icon. This icon denotes the creative aspect of the design.
The modes are visually represented by this gradient involving green (Spotify's primary color) and black to add more visibility and texture to the design.
Creative Mode:
The goal of this mode is to provide users with a space where they can customize songs. However, I aimed to ensure the default interface would be intuitive, preventing any confusion about the new UI. Therefore, I designed it based on the commonly understood concept of an equalizer at the time.
This brush with a plus icon saves the customization of the particular song. It expands into two options.
You can:
Save the song with that particular setting
Play all the songs on that specific setting.
This gives a sense of wide range of options for the user to choose from making it fruitful of their investment.
Access Customized Songs:
Once you save a customization for a song, it will be added to a separate playlist dedicated to your customized tracks. This playlist is independent of your other playlists and is specifically designed for your creative edits.
The customized songs are given a number as a depiction of the pitch the user has saved the song under.
This avoids the confusion between the customized and non customized version of the song.
The '-' before a number denotes that the song is the slowed version.
Whereas a '+' denotes the song as a faster or sped up version of the original song.
Validations and Improvements
As drafted in the user flow, I started testing the prototype with my users and I got quite a few positive affirmation and helpful remarks on the design itself. Here are some common ones:
Initial version:
"I feel like the save customization button hinders the 'Add to playlist' button which I feel is more important here."
Final Version:
"This makes much more sense and gives the button the justification."
Initial version:
Users didn't find this helpful as they had to hit save again for the same reason which lacks options in it.
Final Version:
Now users can have options to save their creativity without having second thoughts!
Initial version:
Users didn't find this helpful as they had to hit save again for the same reason which lacks options in it.
Takeaways
Throughout the development of Syncro, I gained valuable insights into balancing creativity with usability, especially when integrating new features that users may not have explicitly requested. The iterative design process, with continuous user feedback, played a vital role in refining the experience to ensure it was both engaging and easy to use. Syncro offers more than meets the eye, as it aims to reshape the way users interact with music beyond just customization.
Timeline:
Completion (2 months):
Conducted user tests and gathered feedback on the prototype.
Refined the interface based on user insights, focusing on usability and aesthetics.
Launched the final version, ensuring all features functioned smoothly.
Future Plans:
Explore more customization options to enhance user creativity.
Simplify the user interface further for an even more intuitive experience.
Incorporate additional interactive elements based on user feedback.
If interested in the entire journey, feel free to access the Figma link provided to explore the process, iterations, and final designs in detail.
Final Version:
"This makes much more sense and gives the button the justification."
Final Version:
Now users can have options to save their creativity without having second thoughts!
Initial version:
"I feel like the save customization button hinders the 'Add to playlist' button which I feel is more important here."
Takeaways
Takeaways
Throughout the development of Syncro, I gained valuable insights into balancing creativity with usability, especially when integrating new features that users may not have explicitly requested. The iterative design process, with continuous user feedback, played a vital role in refining the experience to ensure it was both engaging and easy to use. Syncro offers more than meets the eye, as it aims to reshape the way users interact with music beyond just customization.
Timeline:
Completion (2 months):
Conducted user tests and gathered feedback on the prototype.
Refined the interface based on user insights, focusing on usability and aesthetics.
Launched the final version, ensuring all features functioned smoothly.
Future Plans:
Explore more customization options to enhance user creativity.
Simplify the user interface further for an even more intuitive experience.
Incorporate additional interactive elements based on user feedback.
If interested in the entire journey, feel free to access the Figma link provided to explore the process, iterations, and final designs in detail.
Throughout the development of Syncro, I gained valuable insights into balancing creativity with usability, especially when integrating new features that users may not have explicitly requested. The iterative design process, with continuous user feedback, played a vital role in refining the experience to ensure it was both engaging and easy to use. Syncro offers more than meets the eye, as it aims to reshape the way users interact with music beyond just customization.
Timeline:
Completion (2 months):
Conducted user tests and gathered feedback on the prototype.
Refined the interface based on user insights, focusing on usability and aesthetics.
Launched the final version, ensuring all features functioned smoothly.
Future Plans:
Explore more customization options to enhance user creativity.
Simplify the user interface further for an even more intuitive experience.
Incorporate additional interactive elements based on user feedback.
If interested in the entire journey, feel free to access the Figma link provided to explore the process, iterations, and final designs in detail.