Offline Listening with SoundCloud
LEAD UI/UX, RESEARCH, CONTENT STRATEGY
TIMELINE: 4 months | LAUNCHING: JULY 2017
Offline listening is the #1 feature for converting free listeners into subscribers of SoundCloud Go/Go+. However, because it didn’t initially work as expected for users, it’s also a notable driver of subscription churn. I worked as the sole designer with the product team to refresh SoundCloud’s offline listening experience for Android & iOS.
Understanding the Problem
According to our latest cancellation survey and UX research with users, new subscribers weren’t aware of the feature or how to use it. The volume of customer cases increased dramatically in 2016 because of the user experience. Users found the offline listening feature to be unreliable and crash often—especially power users with large music collections. I conducted a baseline user testing study with our UX Researcher, where users said:
I completed the following audit of the current offline experience and made high-level recommendations based on the data we gathered from user research, audience research, and a cancellation survey.
Because the “Like” action and “Offline Sync” function were connected in the backend, users weren’t making use of either experience as intended, and were hacking around it. For example, some listeners used “Likes” to build playlists, and ran into unexpected troubles with storage and app crashes. I recommended unlinking the “Like” and “Offline Sync” functions, creating distinct experiences for both, and building educational elements to encourage more natural behavior.
Increase visibility of the offline feature and provide education in the right moments of a user's journey to help orient and save offline with ease.
Increase number of entry-points for saving offline, while introducing UI elements and color to differentiate offline tracks from the rest of the user’s collection.
Accessing & Managing
Create a section of the app for aggregating all offline content. Improve storage functionality to ease data and storage anxiety.
After synthesizing all the data and my audits, I sketched solutions for each part of the experience. Then I built flows, which I hung to chat about and collaborate with my teammates.
Prototyping & Testing
I worked with our mobile prototyper in Berlin to create a full-functioning prototype in React Native. Then, I worked with my UX researcher to set up in-office user tests, using the prototype to test out my high-level recommendations and concepts, like individual track syncing.
Key Takeaways of Testing Results
- Because users perceived “Liking” as an emotional reaction rather than a tool for building subplaylists, they became confused about the relationship between “Liking” a track and having that track added to a collection.
- There was a lack of awareness about Go/Go+ sub-offerings, like offline listening and ad-free streaming. Onboarding wasn’t adequately educating users.
- Users could easily find the Offline Music section and liked having their offline tracks grouped together.
- All users of the prototype understood how to save a track offline and were easily able to recognize what content was syncing, how they could access it offline, and how to remove individual tracks.
- Users did not expect duplicate content. (For example, if a user saved a single track from an album, they did not expect the song to appear under “Albums.”)
- User consistently referred to offline content as “downloading.”
After synthesizing the latest research, our scope enlarged to include three additional key takeaways: education for free users, education for new subscribers regarding sub-offerings, and clarification of the differences between “Like” and “Save.”
I identified places in the existing feature onboarding experiences for both free and subscription users where we could introduce educational tooltips to help users understand what they purchased or subscribed to, how to build their collection, and how to save offline.
Solving “Saving Offline”
I improved the process of saving offline by updating the UI elements and content strategy.
New Icon & Color System
New Track Level Status Changes
New Progress Bar Progression
Solving Issues with Accessing & Managing
I introduced a new section called “Downloads” in the user’s collection, which would house all offline tracks, playlists, and albums. I also separated the Playlists & Albums buckets into their own sections and clarified language (“Offline” to “Downloads” & “Collection” to “My collection”). I shipped the ability for Android users to save to an SD Card to help with storage pain-points.
Collection and Download Section
SD Card on Android
Since the relationship between the “Like” action and building a collection was found to be a main pain-point in testing, we conducted an A/B test and survey around changing the heart icon to a plus sign, and changing the terminology around “Liked tracks” to “Tracks.” The goals were to see if users would begin to build up their collections or increase their listening time, and to understand how the changes would affect Creators.
- All UI changes are currently in beta and ready for production
- Ship onboarding tooltips
- Ship Downloads bucket and update marketing materials
- Track-level syncing and our ideal solution
- Explore changing "likes" to "add" based on results of A/B test