COLAB30 - Web App

Chameleon EQ

Chameleon EQ is a powerful tool for music lovers that can improve sound quality by intelligently adjusting to the proper EQ preset according to the song's genre.

Problem Statement  

How can music streaming services improve the listening experience for subscribers while also improving business outcomes in a competitive and saturated market?

Problem Background  

Audiophiles/Music Enthusiasts and casual listeners alike use music streaming services, with over 600 million users worldwide. However, most listeners lack the tools to fine-tune their audio experience for maximum enjoyment. EQ (equalization) is a function where the volume of each band in the frequency response is adjusted. Typically it is done in the recording and production stage, but can also be applied afterward by listeners. 

For most people, a 1 dB change in volume is noticeable, which makes EQ especially powerful in improving sound quality at no additional cost to the end user.

However, the current EQ feature provided by all streaming services apply universally to every track, which may be suitable for one genre, but will make another one sound worse. 

For a casual listener, they may not use EQ as there is little to no education provided nor is there a tutorial to help the user understand what they are doing. For audio enthusiasts, they are shoehorned into a one-size-fits all setting as they may find it cumbersome to change the preset to adapt to a different genre or artist. 

Research Insights

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. 

Results of User Survey

1. 26.9-38.5% of responders have noted that they were not happy with a certain aspect of music playback (bass, mids/vocals, highs/details).

2. 69.2% of users do not use EQ because they don’t understand how it works and it feels too complicated to learn. 

3. Of the users that do use EQ, only 10% changes the preset manually to adjust for different genres

4. 61.5% of responders are highly interested in a feature that would automatically apply EQ settings, 23.1% are neutral

5. 26.9% of users would consider paying for additional features that offer more customization to their music listening experience, 30.8% of users would pay depending on how it was implemented

6. 76.9% of users are somewhat interested in using EQ as a social tool, sharing their own or discovering new presets on social media. 

Key Pain Points & Corresponding Opportunities

Inconsistent Audio Experience
  • Pain Point: A noticeable portion of users (26.9-38.5%) express dissatisfaction with specific elements of their music playback, indicating a desire for a more tailored sound.
  • Chameleon EQ Opportunity: Automatic adjustments based on genre, song, or artist can address this by optimizing the audio for a consistent experience across different types of music.
EQ Intimidation & Lack of Knowledge
  • Pain Point: The majority (69.2%) of users find EQ tools too complicated and don't understand how to use them effectively.
  • Chameleon EQ Opportunity: 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.
Manual EQ Adjustment is Cumbersome
  • Pain Point: Even among users who use EQ, only a small percentage manually adjust it for different genres, implying it's inconvenient.
  • Chameleon EQ Opportunity: The automatic, dynamic EQ adjustments eliminate this frustration by continuously optimizing the sound based on the music being played.
High Interest in Automated EQ
  • Pain Point: While users desire better sound quality, many lack the knowledge or patience to manually adjust EQ settings.
  • Chameleon EQ Opportunity: This strong interest (61.5%) in automatic EQ features validates the core concept and aligns with the product's value proposition.
Willingness to Pay for Customization
  • Pain Points: Users seek a more personalised listening experience, but current tools don't cater to that need.
  • Chameleon EQ Opportunity: This presents an opportunity for premium subscriptions or add-ons with features like artist-created presets, or advanced tuning options (10 band EQ)
Desire for EQ as a Social Tool
  • Pain Point: Users want to share their audio experiences and discover new ways to enjoy music.
  • Chameleon EQ Opportunity: The high interest (76.9%) in using EQ as a social tool supports features like shareable EQ settings, community-created presets, and even artist-fan interactions centered around sound customization.

User Stories and Flows

Discovery
  • Entry Point: User opens their music app (Spotify/Apple Music) and starts playing a song.
  • Notification/Banner: A notification or banner appears, introducing Chameleon EQ as a new feature and highlighting its benefits ("Get personalized sound for every song"). The user will have the option to select the automatic or manual option. If manual is selected, a quick tutorial will be played to familiarize the user.  
  • "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.
Manual Mode (Enthusiast Focus)
  • Detailed EQ Interface: Users see an adjustable equalizer with multiple frequency bands, and sliders for precise control.
  • Preset Loading: A button allows users to load and save custom EQ profiles. This could include artist-created presets in the future.
  • Advanced Options (Premium): Additional features (e.g. headphone calibration) could be accessible here as a premium option
Sharing & Social Features
  • Sharing Button: A button allows users to generate a shareable link to their current EQ settings (e.g., "Listen to this song with my custom EQ").
  • Community Section: A dedicated section where users can browse, upvote, and download EQ profiles created by other users or artists.
 User-Centricity
  • Addresses Pain Points: Solves the frustration of generic EQ settings and the complexity of manual adjustments.
  • Offers Variety: Caters to both casual users who want simple enhancement and audiophiles seeking deep customization.
  • Prioritizes User Experience: The interface is designed for intuitive use, with helpful guidance and visual feedback.

UI Mockups

Current Functionality

Music Playback:
  • Basic play, pause, skip, and previous track controls
  • Display of current track information (title, artist)
Chameleon EQ:
  • Visual representation of EQ settings
  • Automatic genre detection and EQ preset application
  • Toggle for enabling/disabling the EQ visual effect
User Interface:
  • Responsive design for various screen sizes
  • Dark mode theme for better visibility
Technologies Used
  1. Frontend Framework: React.js
  2. State Management: Redux
  3. Styling: Tailwind CSS
  4. API Calls: Redux Toolkit Query (RTK Query)
  5. Audio Processing: Web Audio API (partially implemented)
  6. Routing: React Router

Development Progress

Completed Features
  1. Basic music player functionality
  2. Integration with a music API for track data
  3. Implementation of Redux for state management
  4. Basic genre detection logic
In Progress
  1. Full integration of Chameleon EQ with audio playback
  2. Refinement of genre detection algorithm
  3. Optimization of performance for smoother UI transitions
  4. Creation of the Chameleon EQ UI component
Challenges Faced
  1. Audio Processing: Implementing real-time EQ adjustments using the Web Audio API has been complex, requiring careful management of audio contexts and nodes.
  2. Genre Detection: Creating an accurate genre detection system has proven challenging, especially for songs that span multiple genres.
  3. State Management: Ensuring smooth updates to the UI when the EQ settings change, without causing unnecessary re-renders or audio glitches.
  4. Cross-browser Compatibility: Ensuring consistent behavior of audio features across different browsers and devices.
  5. Search Feature: Ensuring the search results to have audio playback features.

API Limitations and EQ Implementation Challenges

Current API Limitations

The current music API we're using (Shazam Core API) provides excellent functionality for retrieving track information, lyrics, and related content. However, it has a significant limitation for our Chameleon EQ feature: it doesn't provide direct access to the raw audio data or allow for audio manipulation. This restriction prevents us from applying real-time EQ adjustments to the audio stream.

Specifically:

  1. The API delivers pre-encoded audio streams.
  2. We don't have access to the raw PCM (Pulse Code Modulation) data.
  3. The API doesn't offer endpoints or methods for audio processing or manipulation.

Impact on Chameleon EQ Functionality

Due to these limitations:

  1. We can't intercept the audio stream to apply EQ filters.
  2. The visual EQ representation we've created doesn't correspond to actual audio adjustments.
  3. The user experience is incomplete, as the EQ changes don't affect the sound.

Alternative Approaches for EQ Implementation

To overcome these limitations and implement a functioning EQ, we have several potential approaches:

Local Audio Processing
  • Download the audio files locally (if permitted by the API's terms of service).
  • Use the Web Audio API to process the local audio files.
  • Pros: Full control over audio manipulation.
  • Cons: Increased data usage, potential copyright issues, may violate API terms.
Proxy Server for Audio Processing
  • Set up a server that acts as an intermediary between our app and the music API.
  • The server would download the audio, apply EQ, and stream the processed audio to the client.
  • Pros: Maintains client-side simplicity, powerful server-side processing.
  • Cons: Increased complexity, higher operational costs, potential latency issues.
WebAssembly Audio Processing
  • Use WebAssembly to implement audio processing algorithms in the browser.
  • This could potentially allow for more efficient, near-real-time audio manipulation.
  • Pros: Efficient processing, works with existing audio streams.
  • Cons: Complex implementation, may still face timing issues with streaming audio.
Switch to a Different API or Service
  • Find a music streaming API that allows for audio manipulation or provides raw audio data.
  • Alternatively, consider partnering with a service that offers these capabilities.
  • Pros: Could provide a more straightforward path to implementing the EQ.
  • Cons: May require significant rework of the application, potential costs for premium APIs.
Implement a Custom Audio Player
  • Develop our own audio playback system using Web Audio API.
  • This would involve more low-level audio handling but give us full control.
  • Pros: Complete control over audio processing and playback.
  • Cons: Significant development effort, need to handle music licensing and streaming ourselves.

Recommended Next Steps

  1. Evaluate Legal and Technical Feasibility: Review the terms of service of our current API and investigate the legality and technical feasibility of each alternative approach.
  2. Prototype Solutions: Develop small proof-of-concept implementations for the most promising approaches to assess their viability.
  3. Performance Testing: Conduct performance tests to ensure that the chosen solution can handle real-time audio processing without introducing latency or affecting app responsiveness.
  4. User Experience Consideration: Whichever solution we choose, ensure that it maintains or improves the current user experience, particularly in terms of responsiveness and audio quality.
  5. Gradual Implementation: Once a direction is chosen, implement the solution incrementally, starting with basic EQ functionality and expanding to the full Chameleon EQ concept.

By addressing these API limitations and exploring alternative implementations, we can move forward with realizing the full potential of the Chameleon EQ feature, providing users with a truly interactive and enhanced listening experience.

What's Working Well
  1. The overall UI design and responsiveness
  2. Basic music playback controls
  3. Redux integration for state management
  4. Visual representation of EQ settings (Currently in progress..)
Areas for Improvement
  1. Audio Processing: Fully implement the Web Audio API integration to apply real-time EQ changes.
  2. Performance Optimization: Reduce unnecessary re-renders and optimize state updates.
  3. Genre Detection: Improve the accuracy of the genre detection algorithm, possibly by integrating with a more comprehensive music metadata API.
  4. User Customization: Allow users to save their own EQ presets and override automatic settings.
Next Steps
  1. Complete the integration of the Web Audio API for real-time EQ adjustments.
  2. Implement a more robust genre detection system, possibly using machine learning techniques.
  3. Add user authentication to allow for personalized EQ presets and playlists.
  4. Expand the music library and improve search functionality.
  5. Conduct thorough cross-browser testing and address any compatibility issues.

Alignment with Strategic Goals

Revenue Generation

By leveraging the existing freemium/premium subscription model, a basic version of Chameleon EQ can be implemented with limited presets for free to attract users. 

We can then have the rest of the features including advanced customization, custom profiles, artist presets, and community access within the paid subscription. This can also be strategically timed with a price increase in the subscription. 

Chameleon EQ’s full implementation will also open opportunities to collaborate deeper with artists and music labels, as well as other audio brands. 

Additional Market Expansion Strategies
  • Regional Expansion: Tailor the EQ presets to different regions or cultural preferences for music.
  • Genre-Specific Marketing: Create targeted campaigns focused on specific genres or musical communities where EQ is particularly relevant (e.g., electronic music, kpop).
  • Collaborations: Partner with music festivals, radio stations, or online communities to promote Chameleon EQ and reach new audiences.
  • Accessibility: Ensure the product has presets to help to users with hearing disabilities, expanding its reach and inclusivity.

By strategically targeting these market segments, Chameleon EQ can expand its user base, increase engagement, and drive sustainable growth in the competitive music streaming industry.

Competitive Differentiation
  • Automated, Personalized EQ: A unique selling point that no major streaming service currently offers.
  • Community Focus: Foster a vibrant community around sharing EQ presets, playlists, and music discovery.
Scalability and Flexibility

The Algorithm can be continuously refined and expanded to cover more genres and styles of music. It will ideally be able to identify male/female vocals and adjust accordingly. 

The core EQ engine must be easily integrated into different versions of the streaming service (web, mobile apps, desktop apps)

Risk Management

Audio Processing Impact
  • Risk: Real-time EQ adjustments could introduce latency, audio glitches, or even crashes, impacting the user experience.
  • Mitigation: Thoroughly test the EQ engine on various devices and operating systems to ensure smooth performance. Optimize algorithms for efficiency, and consider offering different quality settings (e.g., low, medium, high) to accommodate different hardware capabilities.
Compatibility Issues
  • Risk: The EQ feature might not work seamlessly with all devices, audio codecs, or streaming formats, leading to user frustration.
  • Mitigation: Test the feature across a wide range of devices and platforms. Prioritize support for the most popular audio formats and codecs. Provide clear documentation and troubleshooting guides for users who encounter compatibility issues, with a focus on wireless codecs. 
Data Privacy Concerns
  • Risk: Collecting and analyzing user listening data for EQ personalization could raise privacy concerns if not handled transparently and ethically.
  • Mitigation: Clearly communicate data collection and usage practices to users. Implement robust security measures to protect user data. Allow users to opt out of data collection for personalization if they prefer.
Market Adoption
  • Risk: The feature might not resonate with users as expected, leading to low adoption rates and minimal impact on user engagement or revenue.
  • Mitigation: Conduct thorough user research to validate the demand for the feature. Test the MVP with a target audience and gather feedback before full implementation.

User Experience Risks

Over-Reliance on Automation
  • Risk: Some users might prefer manual control over their EQ settings and feel limited by the automatic preset adjustments.
  • Mitigation: Offer a manual EQ mode alongside the automatic mode, allowing users to tweak settings to their liking. Consider hybrid approaches, like automatic presets with manual fine-tuning of each preset that they can save.
Feature Complexity
  • Risk: Overly complex or confusing EQ controls could alienate casual users and hinder adoption.
  • Mitigation: Prioritize user-friendly design, focusing on simplicity and intuitive controls. Offer guided tutorials or tips to help users understand and utilize the EQ features effectively.
Competitive Landscape
  • Risk: Competitors could replicate or surpass the feature, diminishing its value proposition.
  • Mitigation: Continuously innovate and refine the feature to stay ahead of the competition. Secure strategic partnerships with artists, major music labels to create unique and exclusive offerings. 

By proactively identifying and addressing these risks, we can increase the chances of a successful implementation of Chameleon EQ and ensure it delivers value to both users and the streaming service.

Learnings

Product Manager Learnings:

Ruikai Qin

Always have contingencies: When things go wrong, having contingencies will allow you to quickly pivot and not waste precious development time. Make sure to make requirements crystal clear: An oversight caused by me resulted in us having to pivot from our original plan, the API we used was not compatible with EQ. Strong communication between team members is required: This results in more trust, and more productive work with less confusion. Document everything: Proper documentation will also result in more productive work and less confusion.

Designer Learnings:

Mackenzie Draper

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 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.

Designer Learnings:

Jo Sturdivant

  1. Adapting to an Established Team: Joining the team in week 6 of 8 was challenging, as I had to quickly adapt to existing workflows, dynamics, and goals. This mirrors real-world situations where you often integrate into teams mid-project, and flexibility is essential.
  2. Work-Blocking for Efficiency: With only two weeks to complete the project, I learned the importance of a structured work-blocking system. This approach allowed me to manage my time effectively and meet deadlines under pressure.
  3. Making Data-Driven Design Decisions: Unlike my past projects, I had to rely on research conducted by others. This was a valuable experience in using pre-existing data to guide design decisions, helping me focus on the core insights without starting from scratch.

Developer Learnings:

Phong Truong

I've learned a lot on the coding side of the project. I had lots of errors and debugging but with a lot of determination and effort, I was able to meet most of the targeted goals that was set by the team. I've learned to take the advice from the PM and PD to help guide me in the direction where they want the project to go.

Developer Learnings:

Vanady Beard

&

As the back-end developer, I learned how important it is to create efficient and reliable systems that support the entire application. This experience also taught me the importance of optimising the database and ensuring the backend is scalable and easy to maintain.

Developer Learnings:

Stephen Asiedu

&

As a back-end developer, I've come to understand the importance of being familiar with various database systems and modules. This knowledge enables me to build diverse applications and maintain versatility in my work. I've also learned that the responsibility for making the right choices rests on my shoulders, guided by my best judgement.

Developer Learnings:

Alberto Rodriguez

&

Working with the PM and PD to transform an abstract idea into a tangible web application. Learned to communicate about the progress of the project and to meet project deadlines like a real job setting.

Developer Learnings:

Maurquise Williams

&

  1. Process of Creating an MVP: Developing a Minimum Viable Product (MVP) taught me how to focus on delivering core functionalities balancing between essential features and avoiding scope creep.
  2. Collaboration in a Real-World Tech Setting: This experience taught me how to collaborate efficiently in a fast-paced tech environment, keeping the team aligned and productive, even while working remotely across time zones.
  3. Sharpening Critical Thinking and Problem-Solving Skills: This experience honed my ability to think critically and solve problems efficiently. By tackling challenges and finding quick solutions, I sharpened my decision-making and troubleshooting skills in a dynamic, real-world setting.

Developer Learnings:

Jeremiah Williams

&

All in all this experience was very awesome I learned that in coding with others being transparent is key

Developers Learnings:

Justin Farley

&

I learned how important communication is when working with a team. Communication provides understanding, advice, ideas, and much more. While working with the product team, I’ve found that communication keeps everything flowing smoothly. Working with a team also showed me that every member brings something different to the table and we all have to work together in order to align and meet our end goal.

Full Team Learning

Effective communication is the key to aligning everyone on the same page, and organizing standups was a good way to keep track of the work and make spot adjustments when needed. Collaborative efforts always bring out the best in everyone if it is organized properly.