Introducing Online Collaboration on SoundCloud
As the world’s leading social sound platform where people can create and share sounds, we were assigned by General Assembly UXDI to study SoundCloud to implement a new feature for musicians to collaborate online. We called this new feature “Curate”. This time we get to work with two other team members to incorporate soft skills as an UX designer.
The Project Brief
SoundCloud provides a platform for musicians to record, upload, promote and share their music for listeners to access around the world. SoundCloud users are able to “like” artist tracks, follow artists, create playlists, and join groups to support and grow the SoundCloud community. Although musicians are able to curate their own playlists from songs they select, we would like to create a feature that allows musicians to collaborate online, DJ-ing their select tracks with other musicians in the real time.
We were trying to understand it further, we mainly broke it down into two main categories — one is DJs be able to curate live, and the other is the listeners’ feedback to the DJs.
User Research
For our user research, one of our goals was to define “what is DJ-ing?”. How does the definition of DJ-ing to inform what features to include and how people use our feature. We were looking for DJs and listeners are passionate about mixing and listening to music.
We started off with some screening questions on our survey below:
- Which music platforms do you use?
- How often do you share music online?
- How often do you listen to mixes?
- How often do you attend DJ shows?
- What kind of music consumer are you?
- What is your DJ experience?
- What do you use to DJ?
After the screening, we performed our interviews with two groups of target audience — one was DJs, and the other one was listeners, age range was from 19–34 years old.
Here are the questions we asked DJs:
- What do you define as DJing?
- What does a DJ do?
- Is DJing collaborative?
- What makes a good DJ?
- Are you a DJ?
- Is a DJ defined by the equipment they use?
- Who are some of your favorite DJs? Why?
- What makes a good set?
Here are the questions we asked the listeners:
- What kind of features do you use the most?
- What kind of features do you wish to have on the music service you use?
- How often do you use SoundCloud?
- Do you think you would use SoundCloud more if there was a feature like this?
Some quotes from our interview:
“DJing is telling a story, creating a narrative through a specific sequencing of tracks…” — Justin
“…but playing out a good transition fluently is a lot more interesting, and able to keep that flow going as well.” — Amanda
“A DJ should be responsive to a crowd… and be able to take the mix up or down depending on the energy.” — Ashley
“It would be a mix of a genres. It would be a conversation. One thing lead to another kind of thing.” — Mark
We collected some very useful insight from our user interviews. We defined DJ-ing is curating; is story telling; is sequencing tracks together with special attention to transition. DJ-ing is understanding the audience and adopting to their behaviors.
From our user research, we narrowed it down our (fictional) personas into four people. The reason why we make personas was —
‣ To remind us of who the user is (not us, not our stakeholders)
‣ To summarize user research
‣ To evaluate designs
‣ To focus design/dev efforts on solving the user’s problems
‣ To make design less subjective
From our user research, we determined a DJ needs to perform two primary tasks: respond to a crowd, and cleanly transition from song to song with no breaks. Given these criteria, how can we help SoundCloud build a platform that allows sound curators to perform these tasks within a digital realm?
Part of the our research was to compare existing features with other competitors on the market. We selected MixCloud, Mixlr, Blend and Turntable FM.
As you can see, not all of the companies offer the feature — collaborating we wanted to implement for SoundCloud.
We also did a case study on Turntable FM, which unfortunately ran out of business last year. Below is the screen shot of the crowd energy in the standing room. The avatars were bobbing their head up and down depending on energy level of the room.
Looking at Turntable FM, what went well for Turntable FM was that it’s collaborative. It’s sequencing and simulation of audience features worked very well. What it didn’t go well was that they have terrible user interface design. Advertisements were constantly presented on the interface. It created distraction to the DJs and audience. The backend development was also poorly run.
Going back to SoundCloud existing mobile design, we studied their overall design. We look at the font they used, the material design, as well as the navigation and layout. The color scheme is mainly in orange and grey. They use rounded buttons on profile icons. The main design was based on two columns grids layout.
Design Iteration
From our research, we came up with these initial layout design:
Next step was set up the information architecture for the curate feature we wanted to implement. On the app map, we created four main navigation tabs: Calendar/Schedule, Current Live Sets, Create/Schedule Your Set , and Private Practice “Basement” which means by invitations only. Under the Calendar/Schedule tab, we have calendar for listeners to see upcoming curating schedule; DJs can send invitations to join the mixing session; invited DJs can join live sets; and DJs can provide time scalability. Under the Create/Schedule Your Set tab, we introduce Facebook event invitation page, options to queue and soundtrack options.
See below for the user flow we did on setting up a session by DJs:
See below for user flow we did on DJs entering a session:
One of the challenge on implementing the collaborative feature was to translate the very intensive DJ platform into a sensitive iPad screen. One of the users from our interview said that “On an iPad I lose the dynamic of being able to really control the knobs…”
Getting into the wireframing, we started on the low-fi paper sketching. We experimented different kinds of column and the main features on the screen. After a series of iterations, we adopted back to the SoundCloud existing mobile design by using card strategy on two column grid layout. We also maintained the current navigation header and sticky footer.
We started off wireframing session interface and also listener interface. Based on the sizing of each screen, we wanted to follow the existing SoundCloud design. We put the pre-set transition screen on the top left corner of the page for easy navigation, also wanted to focus on the feekback of the audience. For the listener interface, we wanted to make it easy for listeners to send feedback and comments on the live set. We also implemented the video section for live stream.
This is the high-fidelity design:
Prototype
Moving on to user testing. We asked both DJ’s and listeners to test the prototype. Click here for DJs interface, and here for listener’s interface.
On the DJ’s interface testing, we found 72% passed on the feature we introduced, 22% partially passed, and 6% failed.
On the listener interface testing, we found 58% passed, 25% partially passed, and 17% failed.
Some feedback we collected. Here are some quotes from our user testing:
“I feel like the general info should be on the left side of the page.” — Katy
“Though I understand it, but the symbol for the visualizer is a little vague for its purpose.” — Robin
“I like that you included the feedback feature, so it can interact with the DJ” — Yvonne
“This looks mad good, yo…” — Lucio
We did a live demo on how the DJs curate and how the listeners react to the DJs.
From the feedback, we make come changed on the layout and interface design to create better hierarchy of the page. We moved the “general info session” to the top left. We highlighted “What is now playing” session on the top right corner. We added the “transition time” indicator for validation of when the song is transitioning. We changed the pulsometer graph from wavy graph to column graph. We also made the “queue” session easier to navigate for DJs. For the Standing Room representation, we added the key for indication of crowd energy level in the room.
What We Learned
During the whole creation process, we got such a wide range of feedback. We had people looked at it, they already know how to use it without studying it. There were people took a long time to get it. And some failed completely. We also had contradicting feedback which they could be both right. It’s very hard for us to goggle those feedback to revise the interface design and even the flow. We noticed the user interface testing and user flow testing were different set up. Creating personas were very fun but also challenging. And finally, the demonstration on the prototype was much fun indeed. It created a lively energy vibe in the room. The audience was passionately engaging to our demo.
Next Step
Our next step is to test new layout to create hierarchy of the page. We also wanted to implement more control on when the song begins and ends. On the transition screen, we wanted to add a validation confirmation when the song is transitioning to the next song. We also wanted to introduce a design interface for DJs who are not using the Curate interface but have their own physical mixing equipment to create mixes. It would be a great opportunity for SoundCloud to collaborate with other companies such as Pioneer, Serato and other companies who specialize on the industry.
