Offline Listening

 

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:

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

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.

Existing logic flow

Existing experience for saving playlist offline from within collection

Existing experience for creating a new playlist then saving offline

 

Developing Hypotheses

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

Screens from React prototype

Pros

  • 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

Cons

  • 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

 

User Testing

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

 

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.

These tooltips were timed & behavior based.

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, which helped make the process more noticeable and understandable.

 

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

Saving offline live demo

Removing offline live demo

 

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.

Changes made to Android for the A/B test

 

Next Steps

  1. All UI changes are currently in beta and ready for production.

  2. Work with feature teams to plan out onboarding logic, so our education could be behavior based & work in harmony.

  3. Ship “Downloads” bucket and update marketing materials

  4. Scope our track-level syncing and our ideal solution with engineering.

  5. Explore changing "likes" to "add" based on results of A/B test

Track-level syncing

 
 

More Projects