Offline Listening

 

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:

You had to download all the songs and it took up way too much storage on my phone. It made the app start to crash every time I tried opening it.
I want to be able to choose which of my Likes to save for offline listening—not just however many of my recent likes fit within the data allowance I’ve selected.
 

Experience Audit

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.

Existing logic flow

Existing experience for saving playlist offline from within collection

Existing experience for creating a new playlist then saving offline

 

Key Takeaways

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.

Feature Education

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. 

Saving Offline

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.

 

Design First-Steps

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.

Screens from React prototype

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.”

 

Solving Onboarding

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.

Recommended feature onboarding logic for saving offline

Recommended feature onboarding logic for building a collection

 

Solving “Saving Offline”

I improved the process of saving offline by updating the UI elements and content strategy.

 

New Icon & Color System

Old (existing) icon progression

New icon design recommendation

 

New Track Level Status Changes

 

New Progress Bar Progression

Progress bar links to Download section to help users learn where their music saved

 

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

 

A/B Testing

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.

Changes made to Android for the A/B test

 

Next Steps

  1. All UI changes are currently in beta and ready for production
  2. Ship onboarding tooltips
  3. Ship Downloads bucket and update marketing materials
  4. Track-level syncing and our ideal solution
  5. Explore changing "likes" to "add" based on results of A/B test

Track-level syncing

 
 

More Projects