SoundCloud Focus
Interface design, feature design
Duration
3 weeks
Tools
Figma
ProtoPie
Roles
Interaction Design
Interface Design
OVERVIEW
A "focus timer" feature for SoundCloud's mobile application.
Primarily targted towards folks in their early 20's, the core components of this feature include timer setting, playlist selection, and playlist sharing.
Discovery
User Interviews
In order to understand and analyze the ways SoundCloud was used, I conducted interviews over Zoom and Discord with target demographics to discover key information I was looking for.
Interiewee criteria:
Those who have previous experience in using SoundCloud's mobile app
Research objectives:
To uncover primary usage of the app
To learn about types of activities conducted on the app
Finding design opportunities based on activities conducted leading up to
the usage of the app
Key insights
Primary use cases
listening to instrumental soundtracks while they conducted their day-to-day tasks such as studying or doing their chores.
Key distractions
while they open SoundCloud when they intend to be productive, they may unintentionally leave the app when they get distracted from their task., at which point the music stops playing.
Problem statement
How might we minimize the chances of users unintentionally stopping their music?
Introducing: Focus timer
Seeing that outside distractions seemed to be the leading obstacle in user retention, I decided a fun way to prevent this issue was by proposing a focus timer feature. This would work so that users are able to combine one of their pre-existing playlists with a count-down timer so that they are encouraged to retain their focus for a set amount of time, therefore minimizing their likelihood of leaving the app due to distractions.
Titled "focus mode", made to address the problems felt by the user persona.
Prototype
I created three rounds of wireframes for the focus timer in the span of one week, from low fidelity to high. Throughout the process, I was able to get feedback from my peers as to what parts of the interaction were unclear to them, which helped in identifying interactions I should focus on iterating upon.
Mid-fidelity wireframes showing the primary user flow.
Side note: Dissecting the design system
To ensure that there would not be in gaps between SoundCloud's design systems and my prototype, almost every component incorporated was traced directly from the exisitng SoundCloud app. Below are a few examples:
The song info + Exit overlay. Elements referenced from user library screen as well as the app's original song info screen.
The feature home page, with multiple elements referenced from the user library screen.
The activity + duration selection screen, with elements referenced from playlist information screens.
Final solution
Listeners will be able to plan a session by picking a playlist and setting their timer. They can also choose to log additional information such as their activities, or be able to revisit a previous session from the menu screen to maximize their productivity.
Before using the timer, listeners are asked to set a time and a playlist to use during the session. Returning users are able to pick from a previously planned session, or view their previous activity to guide them in planning a new one.
To eliminate distractions on their phone, the only controls that are available to the listener during focus mode is “shuffle”, “repeat”, or “cancel”. Listeners are only able to exit this mode through the exit button or by waiting for the timer to reach 0.
Listeners are able to view their listening activity at the beginning or end of each session. To utilize SoundCloud's social features, they will also be able to share their sessions with their followers.
Reflection
This project was important to me in understanding the process behind designing new features for a pre-existing service. From identifying user bases, to integrating my designs with a pre-existing design system, I feel that SoundCloud Focus is an accurate portrayal of my ability to immerse myself with any business within a short period of time.