Adding a AI-powered “hum-to-search” feature to Spotify’s popular music streaming platform.
Objective: Add a Feature
Role: Product Designer, Product Researcher
Timeline: 2 weeks
Tools: Figma, Figjam, Maze, Google Meet
Background
Spotify is the world’s most popular audio streaming service, boasting more than 615 million users, including 239 million subscribers in more than 180 markets. The app excels in curating playlists based on the user's listening habits, and encouraging discovery of new titles that delight the user.
Problem
Spotify’s current search engine is powerful, and allows the user to search based on title, artist, and lyrics. However, there is no way for the user to search for songs that they do not have this information for. If a user simply remembers the melody, but does not know the name of a song, the artist’s name, or the lyrics of the song, there is no way for them to find the song on the platform.
Add a feature to the search engine that allows users to find songs with minimal information, such as a hummed or whistled melody.
This will remove potential barriers that users have when looking for a song, and may lead them to use Spotify as their primary search engine for new music.
This may also help users enjoy music that is not in their primary language, as they will not need to know any words to find the song they are looking for.
This is a great opportunity to further incorporate AI technology into the app, as they have done with the AI DJ feature.
Solution
Process
Empathize
Before I could begin my design process, I needed to analyze my user’s experience with searching for music, their experiences with Spotify, and study the trends in the market. I needed to validate my idea - do users even want a “hum-to-search” feature?
Find out how users currently search for music, their needs and their pain points
Analyze how users search for music when they have minimal information
Find out if a search feature such as “hum to search” would be beneficial for users.
Analyze strengths and weaknesses of competitors
Goals
Competitive Analysis
User Interviews
Methods
I started my research by looking at some popular music streaming platforms, assessing their current search features and analyzing features that their users value. I also looked at an indirect competitor with similar “hum-to-search” technology.
Competitive Analysis
Ensure that search results are easy to add to user’s playlists
“Discovery” seems to be a common thread among music streaming platforms - consider adding functionality that helps users discover new music from search results
“Hum-to-search” functionality seems to be a gap in the market - consider the reasons for this (lack of user need vs lack of technology vs legal limitations? etc.)
Key Takeaways
I conducted user interviews with 5 people, ages 23-29, virtually via Google Meet. 4 out of 5 people were avid Spotify users.
These interviews helped me understand how users find music with minimal information, and their current search experience with their preferred platform.
I also investigated user’s experiences with “hum-to-search” features on other platforms, if applicable.
User Interviews
After speaking to all my participants, I used affinity mapping to analyze the results and pinpoint common trends among users.
Affinity Mapping
Key Takeaways
NEEDS
Accurate search results
Ease of discovering new music
Ease of adding search results to playlist
PAIN POINTS
Lack of ability to find a song with minimal information, such as a melody or beat
Inaccurate search results
Search results that are too broad
DESIRES
“Hum-to-search” feature; 4/5 users stated they would use a feature like this if it were offered
Ultimately, to use Spotify as their only search engine for finding new music, due to convenience
Define
Design Opportunity
Based on my research, I honed in on the problem that I would be solving.
User Persona
I defined my target user by creating a user persona. I used this to direct my design decisions and to help me design with intention.
I went on to define the product goals for the user, business, and technical team, ensuring my designs were optimal for all parties.
Product Goals
Ideate
After thinking about a few ways to solve my problem, the “hum-to-search” idea stood out as the best solution to my current problem.
Brainstorming
I spent some time envisioning the possibilities of this feature, and organized them from most to least important.
Feature Roadmap
I created a user flow, delineating the many ways that the user could interact with the “hum-to-search” feature as a part of Spotify’s current search experience.
User Flow
I created a task flow that would be ideal and relevant at any stage of the user’s interaction with the app.
Task Flow
Prototype
Low-Fidelity Wireframing
I sketched some ideas for how the “hum-to-search” feature would be structured, and where users could find it. I came up with a few ideas, but settled on the one that would serve my target users best and felt aligned with Spotify’s current experience.
Mid-Fidelity Wireframing
I digitized my sketches and finalized the layout of the “hum-to-search” feature.
When designing, it was important to me to create elements that were near-identical to Spotify’s current system. Although Spotify does not have their design system open to the public at this time, I referred to their Design Guide for Developers, and studied the UI and microinteractions closely on my personal device.
I decided to name the feature “Spotify Buzz”, playing on the “humming” aspect of the search function.
Branding
High-Fidelity Wireframing
I brought my designs to life by creating high-fidelity wireframes. I used Figma’s Prototyping tool to create the listening animation and add audio to my screens, which made the designs really feel like Spotify.
Test
I conducted unmoderated user tests with 6 participants using Maze. I asked the users to complete the tasks, share their thoughts, and rate their experience from 1 to 5 (1 being very hard, 5 being very easy). I was also interested to know if users felt that this feature fit seamlessly into Spotify’s current UI.
User Testing
Search for a song by humming, save the song, and complete the survey
Find the “Spotify Buzz” feature without the announcement
Tasks
Success/failure to complete the task
Level of difficulty to complete the task
Total time required to complete the task
Metrics
Overall, feedback was very positive. All the users felt that the designs were pleasant, clean, delightful, and easy to use. All participants completed the task under 3 minutes. All users felt that Spotify Buzz felt authentic to Spotify’s current experience.
Some users had difficulty finding the Spotify Buzz feature on the search page without prompting. The microphone icon was also causing some confusion, and there was some minor comments about the announcement copy.
Results
I was able to make changes to my designs that I believe would solve all the problems that users mentioned in the testing phase.
Iterations
2 users mentioned the popup copy - one stating that the function of the feature was not made clear from the popup, and the other stating that multiple questions in the ad were confusing.
Made the title more straightforward and clear
Indicated in the text that the feature is to search for a song with a hummed, sung, or whistled melody
2 users mentioned that the microphone icon did not translate to a “hum-to-search” feature, but represented a “recording” or “speech to text” feature to them.
Some people also had a hard time finding Buzz on the search page without prompting. I referred to my low-fidelity wireframes for a solution.
Changed the design of the “hum-to-search” button to be larger and more obvious, rather than a small icon
Removed the microphone icon completely, to avoid confusion
Converted the existing “search by code” icon to be a button that matches the style of the “hum-to-search” button
Final Product
This was my first time adding a feature to an existing product, and I had a lot of fun! It was a great challenge to come up with a new idea to add to a robust platform, think about the possibilities of AI, and ensure that the added feature felt authentic to the brand and the current UX/UI. It was also an opportunity to use Figma’s Prototyping tool to come up with some pulsating animations and adding audio to my designs, which was really exciting for me.
Final Thoughts
TAKEAWAYS
Simplicity is everything - I had planned to create a much more complex listening animation. Not only was it much harder to design, but it could have been distracting/overwhelming. I redesigned the animation to be much simpler, and I think it works better.
Don’t make assumptions - I thought that the microphone icon would be self explanatory, but I was surprised to see that users associated it with other functions besides a “hum-to-search”. This was a great reminder for me to never assume that something is straightforward, or you could be isolating some of your users. This is why user testing is so valuable!
Observation is gold - I was glad to try unmoderated user testing with this project, but I realized the value of being able to observe a user complete the task and ask them questions as they are going through the flows. I would have liked to ask more follow up questions based on the written user feedback I received.
FUTURE CONSIDERATIONS
Explore designs for the other features in the feature roadmap, such as the “Recent hummed searches” playlist
Design Spotify Buzz for desktop and tablet experiences