SoundCloud Mobile Upload
case study — Jun 5 2022— 7 mins read
- Sr. Product Designer — Engagement
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.
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.
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.
During the understand 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
- Facts that are Supported by evidence
- Potential solutions
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.
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.
Research helped us identify the following goals:
- Our creators wanted to upload audio on the go!
- Make sure upload is more accessible regardless of thier 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 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 3 & 4:
Allow basic editing like title, artwork, genre, etc... and the privacy toggle. Add a delete button for track 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.
Build: Milestones & Priorities
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 touchpoints.
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,
- I would locate it and click on the more button.
- Choose edit track from the bottom sheet.
- 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. as well as deleting.
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.
Then it became even more helpful when it was paired with actual UI to communicate this flow as shown below.
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, that create 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.
The following are some ideas on how we can place the upload button:
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.
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.
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
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
And 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.
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.
while their file is being uploaded, they can go ahead and add thier artwork, title, genre, and description and set thier privacy settings. then hit save.
And here it is in action...
Similar to the previous study we recruited creators who are either not on SoundCloud or had a recent upload on SoundCloud for unmoderated sessions.
Our goals were to:
- validate the edit flow.
- validate upload flow.
- Align with user expectations and iterate on any feedback.
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.
Mobile upload 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.
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 thier 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.
I was hesitant it would work as I didn't believe anyone would upload from thier phone but I was proven wrong & that’s an assurance that we designers aren’t our users.
Just trust in 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.