JENNIFER HOWELL HUGHES

« Girl Impact Map Project Party Planner Concept Project »

Concept Project - Music Streaming DJ Feature

SoundCloud DJ Feature High Fidelity Wireframe

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.

Team

Jennifer Hughes, Peter Hauzman, Uma Makan, Ryan Connaughton

Duration

2 Weeks

Methods

Competitor Analysis, User Interviews, Affinity Mapping, Information Architecture, Task Analysis, Task Flows, Page Flows, Experience Mapping, Wire-framing, Prototyping, Usability Testing.

Tools

Pen and Paper, Omnigraffle, Sketch, Marvel, InVision

The Brief


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:

Hypothesis


We believe that creating the ability to collaborate with other DJ’s in real time in SoundCloud will provide Robbie:

We can measure the success of this by:

Process


User Research

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.

Affinity Map of Research

Primary Persona

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.

Primary Persona - Robbie

Competitor Analysis

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.

User Flows

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
Example Task Flow

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.

Team working on sketches

Prototyping

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.

Wireframing in Project HQ

Mid-fidelity wireframe for Listener page

mid-fidelity wireframe of Listener page

Mid-fidelity wireframe for DJ page

mid-fidelity wireframe of 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.


Visual Design

The mid fidelity wireframes were then developed into a full visual design matching to the SoundCloud branding by a Visual Designer within our team.

High-Fidelity Visual Design