Timeline: 2 months (June-July 2024)
Project type: Web App
Role: End-to-end UX designer
Tools: Figma, Figjam
Team: Cross-timezone, remote
Product Manager (1)
Product Designer (1)
Engineers (2)
what's eq?
EQ (equalization) is a function where the volume of each band in the frequency response is adjusted.
what's the problem?
Music streaming services offer a limited version of the tool that doesn't provide value to listeners.
what's our solution?
An algorithm that applies a different EQ preset based off the metadata of the audio file.
research
what we were hearing:
By conducting a survey, we were able to collect data on user preferences and grievances when listening to music, as well as gauge their interest on their willingness to spend on premium features.
Expressed dissatisfaction with music playback
Are highly interested in a feature that automatically applies EQ settings
Do not use EQ because they don’t understand how it works
Would consider paying for features that offer customization to their music listening experience
what we were seeing:
All streaming services offer the equalization function.
However, the current implementation by all services is both too complex for casual listeners and too simple for advanced users. There is no information or tutorial to get casual listeners into EQ, and once you select a preset, it applies universally for all audio playback which will pigeonhole you into a one-size-fits-most curve.
Spotify
Apple Music
How can music streaming services improve the listening experience for subscribers while also improving business outcomes in a competitive and saturated market?
product ideation
Automatic adjustments based on genre, song, or artist can address this by optimizing the audio for a consistent experience across different types of music.
The automated nature of the product removes the need for users to learn about EQ settings. They can simply enjoy better sound without the learning curve.
The automatic, dynamic EQ adjustments eliminate this frustration by continuously optimizing the sound based on the music being played.
user stories
user flow & key functions
Entry Point: User opens their music app (Spotify/Apple Music) and starts playing a song.
"Now Playing" Screen: A new icon (e.g., a chameleon or soundwave icon) is placed on the "Now Playing" screen, indicating the presence of EQ adjustments.
lo-fi frames
To best show how Chameleon EQ works, we created a basic music streaming web app that we could integrate our algorithm into. That meant designing a basic product that mimicked popular services such as Spotify and Apple Music. Through feature prioritization, we made sure it had the following things:
The ability for the user to pick between different song genres
A toggle for Chameleon EQ to be turned on and off
A visualization of the EQ and what's happening to the music
An explanation of what EQ is
hi-fi frames
enhancing visibility and user understanding
With user understanding being a main focus of the product, we decided to add multiple modes of visualization to help the user learn what EQ is and see what's happening to their music sound levels.
putting it all together
Integrated into our demonstrative streaming service, this is how the feature looks.
some roadblocks
Ultimately, the API that we used for our music library and playback doesn't work with EQ, and implementing an EQ through another means was outside of the scope of the project and we wouldn't have enough time.
However, with a compelling UI that toggles on and off and shows frequency responses, we were still able to show how Chamleon EQ functions visually. Check it out here!
next steps
Conduct in-depth user-testing and hear feedback about what we currently have.
Ideally, we would've liked to get the EQ working, which means listeners would actually be able to hear the change in sound levels while the EQ is turned on.
We'd like to implement personalized EQ presets and playlists.
MUSINGS
Insight into other roles
Working with the PM and developers and getting feedback from them about design aspects helped me understand more about their roles and the entire process, from product strategy to developer capabilities and limitations.
Frequent presentation
Consistent presentation of my designs throughout the whole process, explaining everything including low-fidelity, high fidelity, and any iterations I made. This was important to keep everyone in the loop, and also for making sure we were always on the same page about the product and the direction we were heading.