Spotify: Audio Match
UX/UI Design
Tools
Figma
Contributions
UX Research
UX/UI Design
User Testing
Branding
UX/UI Design
User Testing
Branding
Team
Individual Student Project
Timeframe
4 Weeks / 80 Hours
Jan 2022 - Feb 2022
Jan 2022 - Feb 2022
Background
Spotify launched in 2008 and transformed music listening as we know it. As a digital music, podcast, and video service, Spotify gives users access to millions of songs and other content from creators all over the world. Today, Spotify is the world’s most popular audio streaming subscription service with 381M users, including 172M subscribers, across 184 markets.
The Problem
Spotify understands that users may be having trouble finding unknown music via their app and wants to solve this problem. They are doing research to better understand how to best include a way to help its users find music in an integrated application feature.
This project and the content presented here is speculative and for educational purposes only. I am not affiliated with Spotify.
Interviewing Users & Gathering Data
In order to understand my target users and determine the problem I needed to solve, I conducted user interviews with individuals who have and regularly use the Spotify mobile app. I went into the interviews with these three goals in mind: 1) Understand how users find music outside of Spotify, 2) Understand how users find music within Spotify and 3) Understand pain points with Spotify app as it is.
Key Findings:
• Outside of the Spotify app, in order to search for music, a majority of the users would Google lyrics. This is followed by Shazaming song playing or asking Siri what song is playing.
• Within the Spotify app, the users would primarily search for lyrics and use Lyrics Match feature, or use the search bar and search for specific song or artist. In addition, users would scroll through home page recommended playlists, use the Radio feature, or check out their Discover Weekly or Daily Mix playlists.
• Half of the interview participants wanted to see a better integration between Shazam and the Spotify, or a similar feature within Spotify (“One less app to use to drain phone battery”, “Built in shazam feature to not toggle between different apps”, “One stop shop to Shazam and Spotify”)
Key Findings:
• Outside of the Spotify app, in order to search for music, a majority of the users would Google lyrics. This is followed by Shazaming song playing or asking Siri what song is playing.
• Within the Spotify app, the users would primarily search for lyrics and use Lyrics Match feature, or use the search bar and search for specific song or artist. In addition, users would scroll through home page recommended playlists, use the Radio feature, or check out their Discover Weekly or Daily Mix playlists.
• Half of the interview participants wanted to see a better integration between Shazam and the Spotify, or a similar feature within Spotify (“One less app to use to drain phone battery”, “Built in shazam feature to not toggle between different apps”, “One stop shop to Shazam and Spotify”)
Market Research & Competitor Analysis
Next, I took a look at a few of the apps mentioned in the user interviews, along with other direct competitors to the Spotify app. I reviewed their similarities as music streaming services as well assessed some of the apps’ strengths and weaknesses.
Identifying the Ideal Persona
From my research, I created an ideal user persona that reflected the goals and needs of an ideal user in order to better understand who it is exactly that I am designing for.
Defining User Flows
I then created a user flow demonstrating how the app might be used by a user navigating through how a user might search for music, especially using the new audio searching feature of the Spotify app.
Preliminary Sketches
I explored a few different layouts for where this new feature might be placed within the existing application.
High Fidelity Wireframes
Between my initial sketches and the existing layout of the application, I started building out the flows and designs I wanted to move forward with in a high fidelity wireframe.
High Fidelity Prototype
Prototyping was fairly simple since I had clearly laid out the flows in the high fidelity wireframes. All that was left to do was to simply connect each screen with the appropriate sections.
Next Steps
Although this project is speculative in nature, it is necessary to consider what the next steps would be in a realistic situation. As this feature is rolled out, it will be key to continue to test and get feedback from users in order to continue to iterate and make improvements. It will be vital to consider any technical constraints, and figure out how this feature would be integrated across the various platforms and devices.
