Objective: Integrate new feature to existing site and mobile app

Timeframe: 2 Weeks

Team Members: OZ Baduklu, Chloe Marten

Tools: Sketch, photoshop, invision, Keynote

SoundCloud is the world’s leading social sound platform where anyone can create sounds and share them everywhere. As part of our UX Design Immersive Program at General Assembly, we were tasked with integrating a collaborative DJ feature to SoundCloud's website as well as their native mobile app. I was in charge of the User Interface design, interaction design, in addition to keeping consistency to align with SoundCloud's brand standards. 


Research

We distributed a screener survey to find users who use music streaming services, create playlists, share their music, and who have experience DJing. 8 user interviews were conducted. During this process we discovered user behavior, pain points with music collaboration, user needs when sharing music, and a better understanding of what the term "DJ" meant to different people.

User Interview Quotes: What is DJing?

”The mixing of two or more songs.”

”Someone who curates music for other people.”

“A conversation between a curator and dance floor.”

”Picking songs.”

Affinity Mapping & Personas

We affinity mapped the information from our user research to structure the data and create 4 personas from it. Each persona influenced us during our feature ideation process, while prioritizing the needs of our primary persona Tony "The Desk Jammer". 

Feature Prioritization

We discussed vast number of great features during our brainstorming session, so we had to narrow them down in order to design a product with relevant functions.

Design Studio

Once we made a final decision on the features to be included in our prototype, we began sketching low fidelity wireframes on paper. This gave us the flexibility to draw possible solutions without being constraint to a vector graphics software. We then created greyscale versions of our prototype to conduct usability tests on the design. During user test we discovered opportunities within our design, users weren't able to complete tasks due to the fact that our call to actions (CTA's) weren't clear enough and confusing language on the user interface.

High Fidelity Mockups

We created our final mockups after a few iterations based on usability tests, user feedback and the intention of accommodating every persona’s needs. The collaborative DJ feature is functional. It allows users to easily create a collaborative DJ room, join an existing live DJ room, and add music from pre-existing playlists, create new playlists, or add individual tracks.