Designing a filter and sort feature for the SoundCloud mobile app
Overview
Role:
Product Design Lead (UX/UI)
UX Researcher
Timeline:
~80 Hours (4 Weeks)
Tools Used:
Figma, Google Forms
Problem
With over 250 million tracks from over 30 million artists, SoundCloud has a large array of music for users to discover. Although listeners are able to “like'' their favorite tracks or add them to a playlist, there isn’t an option to further organize their music.
Proposed Solution
Design a user-friendly feature that allows people to filter and sort through their list of liked tracks while remaining consistent with the current SoundCloud user interface.
Research Goals
Learn how users are currently organizing their music
Define what pain points users may have when using SoundCloud
Understand how important it is for users to have a filter/ sort feature
Competitive Analysis
I focused my research around competitors’ current available options for users to organize their music. The most notable takeaway is that all of the market competitors in this analysis offer both a filter and sort feature for multiple lists on their platform.
User Survey
I created a survey to gain insights on what people’s feelings are around a filter/ sort feature and understand how they organize their music.
User Interviews
3 participants were interviewed
All participants use SoundCloud in addition to another music streaming app
What they said:
Research Synthesis
I created an affinity map to categorize my qualitative data and discovered the following insights.
Insights
Users feel overwhelmed when maintaining playlists and find it easier to save songs to their list of liked tracks.
Users feel that with so many underground tracks/ artists it’s difficult to recall and search by name.
Users want more options to search their list of liked tracks by other categories.
Problem Statement
How might we help people feel less overwhelmed when searching through their list of liked tracks?
User Persona
In order to get a deeper understanding of our users’ needs and ensure we are designing a product that meets those needs, I created two user personas based on my research.
Meet Alex! 👋
Alex enjoys using SoundCloud to discover underground music but finds it difficult to search through his long list of liked tracks.
Meet Ashley! 👋
Ashley enjoys finding new music on SoundCloud to use for her YouTube videos but feels overwhelmed when trying to organize her music.
User Flows
I wanted to see the potential thought process and decisions a user would undergo when moving through this new feature so I created user flows for filtering and sorting their liked tracks.
Task Flows
I then prioritized the key tasks that would help users achieve their goals and created task flows based on the newly added filter and sort features.
Wireframes
Keeping the users’ needs and existing UI elements in mind, I then created wireframes to help me visualize the user’s journey through each key screen.
UI Kit
I created a UI kit to understand the current SoundCloud UI and ensure consistency between the newly added filter/ sort feature elements and the existing design components.
High Fidelity Prototpe
I applied SoundCloud’s design system to create my high fidelity wireframes then used Figma’s prototyping feature to construct interactive flows for users to test.
Adding & Removing Filters
Sorting Liked Tracks
Keeping Existing Features
Search Icon
ChromeCast & Download
Usability Testing
Results
When tasked to apply a filter, participants didn’t know whether to click the filter pills or the “Sort By” icon
Participants were unsure what the “Most Played” sort option meant
When adding a filter, participants mentioned that it was clear to them which filters were applied
Revisions
Participants mentioned that it would be nice to change the sort order so I added a feature that allows users to change the order from descending to ascending.
Participants expected the ChromeCast feature to be somewhere near an individual track so I added an additional way for users to access ChromeCast when clicking on the ellipsis for an individual track.
Participants were unsure if the “Most Played” sort option referred to their most played tracks or the most played tracks globally, so I changed the labeling of the “Most Played” sort option to “Your Most Played”.
When tasked to add a filter, participants were unsure whether to click on the “Sort By” icon or the filter pills so I added a filter label.
Final Prototype
After analyzing the data from my usability tests, I prioritized the most important feedback and revised my design to create the final prototype.
Reflection
What I learned
As I was designing the filter/ sort feature, I wanted to ensure that the newly added feature would blend seamlessly into the current SoundCloud UI. I realized how important it is to become familiar with the current design system in order maintain visual consistency as you design new components. This helped me understand the process of working with existing design systems within a digital product.
When adding a new feature to an existing product, I learned that usability testing is key to understanding if this added feature improves the overall user experience. I realized this after my usability tests when I learned that participants needed a way to determine that the pills at the top were filters. If I hadn’t discovered this though testing, users may not notice or utilize the added feature.
Next Steps
Address Limitations in Prototype
Due to the given time constraints, I had to prioritize the key tasks that were most important for users to achieve their goals. I would like to incorporate additional interactions into the prototype so users are able to apply/ remove more filter combinations in order to determine which filter and sort options are most helpful to users.
Conduct Additional Usability Tests
I would like to conduct another round of usability tests in order to gather additional feedback on the updated design iteration and continue on improving the added feature.