Zero's website

Jun 5 2022Case Study7 mins read

Building Mobile Upload for Creators

Role
Sr. Product Designer — Engagement
Company
SoundCloud
Year
2020
Building Mobile Upload for Creators

Summery

I led the development and design of enabling content uploads from mobile for SoundCloud to address the increasing use of mobile devices among creators. it involved extensive user research, identifying key user needs such as track uploads, data consumption warnings, and basic editing capabilities. We explored different design concepts for the upload button placement, ultimately choosing the home page for visibility. Post-launch, mobile uploads accounted for 22%+ of total uploads on SoundCloud, with positive feedback from our customers.

About SoundCloud

it is an online audio & streaming platform based in Berlin. one of the most recognized names in the music industry. And as we say... What's next in music is first on SoundCloud. it's currently a subscription business model. selling subscription plans for consumers & audio creators. while now it's looking into changing towards creator & fan economy to be more community-based.

Context

Creators mainly used the web app as it’s the most complete platform from a feature set perspective. in 2019 the number of uploaded tracks on the web app was stale & we wanted to drive up these numbers. we observed a shrink in the desktop market. Mobile & tablets are becoming more productivity tools. The younger gen seems to rely much more on their phones.

Evidence

As for supporting evidence, looking at previous recurring audience research reports:

  • 43% of creators want to see better SoundCloud mobile functionality.
    Among them,33% say mobile upload is one of their desired mobile improvements.
  • 20% of creators say they use a phone or tablet when producing their audio.
  • 31% of podcasters on SoundCloud say they use a phone for recording
  • Some creators mentioned taking notes/voice memos of ideas on their phones, using their phones to share teasers on social media, and wanting SoundCloud mobile app parity.

Process overview

Process overview

Process overview

Understand

During the understanding phase. I create an Excel sheet to start breaking down research questions, problems, user stories, etc...
that sheet includes:

  • User needs
  • Potential problem causes
  • Research questions
  • Risks
  • Metrics
  • Facts that are Supported by evidence
  • Assumptions
  • Potential solutions

Excel sheet, early in the understanding phase

Excel sheet, early in the understanding phase

Problem, business objective, & hypothesis

Problem, business objective, & hypothesis

Problem, business objective, & hypothesis

Research & discover

To understand how we can port upload which exists on the web. I worked closely with our UX research team to form a discovery research plan.

Research methodology, goals, & high-level findings

Research methodology, goals, & high-level findings

Recruit creators from different levels and segments,

  • Some who have used SoundCloud before with a recent upload
  • Creators who never used SoundCloud to upload tracks

with the following goals in mind:

  • Understand our target audience who upload for the first time on SoundCloud, their goals, and motives.
  • Determine experience opportunities to build upload journey on mobile.
  • Understand creators’ perception of SoundCloud’s value proposition.

Below is the upload experience on the web at the time of testing. it can be a lot to take in, with so many fields and tabs.

Upload on desktop web

Upload on desktop web

Goals

Research helped us identify the following goals:

  • Our creators wanted to upload audio on the go!
  • Make sure upload is more accessible regardless of their background and experience in music.
  • We wanted the next Billie Eilish to start their journey from their phone

Identified user needs

As a creator, I want to:

  • Upload tracks to SoundCloud from my phone or cloud services like Dropbox or Google Drive
  • Be informed if I'm going to consume my mobile network during an upload
  • Add track’s basic data & info
  • Be able to set track privacy settings
  • Be able to delete tracks
  • Be informed about my quota and how I can get more

Now let me walk you through some of these needs and how it was reflected in the experience.

User need 1:

We used the native system's file manager. on iOS and Android, as it has the best experience to access your device files as well as files from services like Dropbox or google drive.

User need 1: use the native system's file manager

User need 1: use the native system's file manager

User need 2:

Since it's an upload it might happen on a mobile network and wanted to be conscious about mobile data consumption, so we added a warning to let creators decide to continue or cancel

User need 2: file size alert

User need 2: file size alert

User need 3 & 4:

Allow basic editing like title, artwork, genre, etc... and the privacy toggle. Add a delete button for track deletion.

User need 3 & 4: editing & deletion

User need 3 & 4: editing & deletion

User need 5:

Even though it wasn't part of the first MVP, as a north star we were considering an upsell state, how to celebrate reaching 3 hours of free upload time and how to communicate it.

User need 5: upsell

User need 5: upsell

Build: Milestones & Priorities

Milestones

Milestones

To prioritize how to approach building mobile upload we can see that upload tracks have a higher impact but are less feasible. However, the engineering team was clear that upload as a function is dependent on track editing, so we went with basic editing then followed by upload and each had its own added user value.

Milestone 1: Edit tracks

Below is the entire flow zoomed out but let's focus on the main touch points.

Edit tracks overall flow and UI

Edit tracks overall flow and UI

Below are the main touch points. These are screenshots from the iOS and not from Sketch which we were using back then. if I want to edit my own track,

  1. I would locate it and click on the more button.
  2. Choose edit track from the bottom sheet.
  3. Then I would be presented with a bottom sheet showing me basic details on my own track. I can edit artwork, title, genre, and description. Also can delete.
Main touch points

Main touch points

And here it is in action...

Final result after building

Milestone 2: Upload tracks

I collaborated with my teammates to draw the below flowchart to help us understand how the flow works. How to handle error states and issues that might occur during an upload process.

Flowchart

Flowchart

Then it became even more helpful when it was paired with actual UI to communicate this flow as shown below.

UI + flowchart

UI + flowchart

The upload button placement

Now let's talk about the placement of the upload button. How might we maximize uploads, and make it clear where and how to start the flow?

In other similar apps and businesses that have both creators and consumers, the create button button is always in a prime position. Instagram, TikTok, Vimeo, and Medium all have it on the bottom nav bar. While YouTube has it on the top right.

Competition

Competition

The following are some ideas on how we can place the upload button:

Concept 1

Thought having it in the navbar is a good idea but the number of tabs changes based on user type. can be 6 tabs for free users and 5 for premium users It would only be in the center for premium users, so we didn't go with that solution.

Concept 1: In the Tabbar?

Concept 1: In the Tabbar?

Concept 2

Maybe in the library tab which is one of the top-level navigation items? it wouldn't be visible when the app starts as it's not on the home page and didn't align with our goals.

Concept 2: In the library tab?

Concept 2: In the library tab?

Concept 3

Maybe within the profile page? Actually, that made a lot of sense but finding your own profile isn't as easy because we have some information architecture problems and as a result, it's hard to find, so also didn't go with that one

Concept 3: Within the profile page?

Concept 3: Within the profile page?

Concept 4

The one that made the most sense was on the home page. It will be visible once the app is opened and has a clear prime position that aligns with our goals. so we decided to go with this one

Concept 4: on the homepage!

Concept 4: on the homepage!

Other ideas,
For the sake of further ideating with the team, we imagined a version where a create button can exist and host other actions like uploading a track, creating a playlist, or any other actions we might add in the future.

Further ideating

Further ideating

Upload flow

so the overall flow now is, Tap the upload button on the top right. and get the system's file manager. then they can pick an audio file and start the upload process.

Upload flow 1

Upload flow 1

while their file is being uploaded, they can go ahead and add their artwork, title, genre, and description and set their privacy settings. then hit save.

Upload flow 2

Upload flow 2

And here it is in action...

Upload flow

Validate

Similar to the previous study we recruited creators who are either not on SoundCloud or had a recent upload on SoundCloud for un-moderated sessions.

Our goals were to:

  • validate the edit flow.
  • validate upload flow.
  • Align with customer expectations and iterate on any feedback.
Validate

Validate

The high-level findings are:

  • The upload icon was well understood.
  • Participants were familiar with the system's Files manager and how to use it to select files.
  • Understood all form elements on the upload form page.
  • Expected uploaded tracks to be in their profile.

Measure

Mobile uploads highlighted in the red circle added Around 150k weekly uploads on iOS and around 110k weekly uploads on Android. That's up to 22% of uploads on SoundCloud coming from mobile. It's a big number and the feature is still going strong.

Stats

Stats

Going back to some of our audience research surveys done after releasing:

  • 36% of creators are aware of the upload or edit experience
  • 16% have used mobile upload
  • 39% of creators' top reasons for using mobile upload is the content is already on their phone
  • 76% are ultimately satisfied or very satisfied with the mobile upload experience

And that seemed like a positive sentiment from creators!

Beyond the MVP

We wanted to do more and I've explored concepts beyond that initial version as I believed we should continue refining that experience. Things like:

  • Easier access to their upload library
  • Clearer upload quota meter, so they know how much is left for them to upload and upsell them
  • Background upload, so they can upload larger files without being blocked from using the app

However, teams changed somehow and the ownership of the upload experience was moved to another team. There was no further iteration on the feature which still saddens me because it had so much more potential.

Looking back...

I was hesitant it would work as I didn't believe anyone would upload from their phone but I was proven wrong & that’s an assurance that we designers aren’t our users.

Trust the customer-centric design process!

Everybody participated in this project... Inclusivity & collaboration are key to any project's success. Because of that, I earned a lot of trust from my teammates and my manager as I was relatively new to the company.