Concept Project - Music Streaming DJ Feature
As part of the General Assembly UX Design Immersive Course we completed a concept project extending the SoundCloud experience to include the ability for users to collaborate on DJ sets in real-time.
Jennifer Hughes, Peter Hauzman, Uma Makan, Ryan Connaughton
Competitor Analysis, User Interviews, Affinity Mapping, Information Architecture, Task Analysis, Task Flows, Page Flows, Experience Mapping, Wire-framing, Prototyping, Usability Testing.
Pen and Paper, Omnigraffle, Sketch, Marvel, InVision
The brief for this project was to extend the SoundCloud experience to include the ability for users to collaborate on DJ sets in real-time.
In particular, the following three specific user objectives were defined in the brief:
- - The experience must allow for DJ’s to select tracks and take turns playing songs.
- - DJ’s must also be able to capture and share their sets.
- - Listeners should be able to join the DJ rooms to listen and join in on the experience.
We believe that creating the ability to collaborate with other DJ’s in real time in SoundCloud will provide Robbie:
- - with a wider network of DJ’s to collaborate with
- - the ability to participate in more DJ experiences
- - ultimately, giving Robbie more inspiration and a wider audience
We can measure the success of this by:
- - The increase in the number of DJ collaborations published on SoundCloud
- - The increase in the number of users listening to those published collaborations
As a team we decided that our user research should focus primarily on the DJ, as without the DJ content there would be no change to the SoundCloud experience for the listener users. It also became apparent through our research that the DJ user of the site would also be a consumer of the content as a listener.
As a team we collated all of the key information from our interviews and created an affinity map to help identify behaviours, motivations and goals across all the participants. From this we developed 4 personas.
The behaviours and goals of Robbie, The Hobbyist DJ identified him as the most likely to use the collaboration service and to who we could provide the most benefit. As such, he was selected as the primary persona for the design phase.
Analysis of competitors indicated that there may be an opportunity by providing all three of the following functions:
- Live - Being able to broadcast the DJ set in real-time and get feedback from listeners
- Collaborative - Being able to collaborate with other DJs
- Accessible - Being able to DJ online without the need for specialist and expensive equipment.
Myself and a team mate conducted a current task analysis on each of the main functions of the site.
From this we developed and outlined the task flows for the following:
- - Finding and Listening to a live DJ Set
- - Joining in as a DJ
- - Collaborating with another DJ on the set
- - Saving and Publishing Set
Design Studio and Sketching
Once we had a set of flows, our persona’s and prioritised features, we took these into a design studio to ideate on a key page for our site. I moderated this session facilitating the development and consolidation of ideas into one key page sketch — how the listener experience would look.
The output of the design studio was used as the basis for our complete first set of sketches. The whole team participated in this sketching session and we finished the session by gaining feedback from users.
Our sketches were developed into mid-fidelity wireframes using Sketch which were then assembled into a clickable prototype using Invision and Marvel. Usability testing was conducted and the design iterated based on feedback.
Mid-fidelity wireframe for Listener page
Mid-fidelity wireframe for DJ page
Iterating the Design
During testing we discovered that we got the importance of the communication options wrong, twice.
User testing provided us with 3 keys areas of iteration for the design. One of these was the Prioritisation of functions on the DJ page.
Testing highlighted that the prioritisation of the functions on the DJ page was key to the user’s experience and that to the DJ, the music was always the focus. Everything else needed to be available but not distracting.
“I want the focus to be the music, the rest is a distraction”
We iterated the layout of the DJ page a number of time, hiding and showing the chat function as an example.
The mid fidelity wireframes were then developed into a full visual design matching to the SoundCloud branding by a Visual Designer within our team.