Offline Listening with SoundCloud
LEAD UI/UX, 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 offline 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:
To get an idea of the opportunity spaces, I completed the following audit of the current offline experience. I then made high-level recommendations based on my hypothesis & 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 explored potential solutions like an “offline filter” and an “offline mode” & sketched solutions for each part of the experience. Then I built flows, which I hung up around the office to chat about and collaborate with my teammates.
Final Design Direction
After discussing with my team which direction is best to move forward with, 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.
Raises Visibility of the offline feature
Motivates & educates users to grow their collection
All offline content can be found in one place
Visually differentiates UI from that of a free user
Commonly used pattern, similar to our competitors
Might make it more challenging to educate users that offline content is a subset of their collection
Potential user confusion around duplication of UI in collection & offline views
Further “decoupling” of actions is heavy tech load
As I solidified the prototypes, I worked with my UX Researcher on a research plan, which we then tested with users in our testing lab.
Key Takeaways of Testing Results
Overall, 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.
Some key areas that needed improvement were:
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.
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.”)
Recommendation: Differentiate “Liking” & “Building” a collection, explore track level syncing.
There was a lack of awareness about Go/Go+ sub-offerings, like offline listening and ad-free streaming. Onboarding wasn’t adequately educating users.
Recommendation: Introduce feature onboarding & consider more onboarding to clarify subscription features.
User consistently referred to offline content as “downloading.”
Recommendation: Consider using the term “Downloads” instead of “Offline”
After synthesizing the latest research, our scope enlarged to include improvements to education for free users, education for new subscribers regarding sub-offerings, and clarification of the differences between “Like” and “Save,” or “decoupling”.
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.
These tooltips were timed & behavior based.
Solving “Saving Offline”
I improved the process of saving offline by updating the UI elements and content strategy, which helped make the process more noticeable and understandable.
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”). Since users communicated that their offline content was most important to them, we would experiment with having the “Downloads” folder at the top of the collection for ease of use. This would also give us a huge upsell opportunity on free.
I also worked 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
“Like” & “Add” to Collection A/B Test
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,” which would hopefully distinguish the two actions and clarify mental models. 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.
Work with feature teams to plan out onboarding logic, so our education could be behavior based & work in harmony.
Ship “Downloads” bucket and update marketing materials
Scope our track-level syncing and our ideal solution with engineering.
Explore changing "likes" to "add" based on results of A/B test