Corbin Muraro's profile

plug.dj iOS UX Design

Background
 
After the death of turntable.fm a year or two ago, the only big contender remaining in the field of social DJing is plug.dj, a service that allows users to DJ to a room full of fellow music lovers. I miss turntable.fm dearly, but the clunky and slow interface of plug.dj has kept me away from what is otherwise a nearly identical service. Additionally, there remains no mobile experience available despite countless requests from users.
Research
 
I first turned to plug.dj for insight into the types of people that enjoy the website and how they use the service. I first came across the company's blog, which happens to be full of interviews with Brand Associates. I also went room-to-room, asking users about what drives them to plug.dj over the thousands of other options in music streaming. The feedback was surprising. Here's the essence of what they said.
 
Community is what draws people to the website
        This was far and away the go-to response
        A few users also mentioned that the idea to communicate interlingually via chat translation was a big plus
 
Most people were opposed to the current UI, nobody liked it

People either loved or were indifferent about the point system
        As is true for avatars / subscriptions / bonus features / etc.
 
- Music was often an afterthought in user's responses, the music videos even less so
        Yet, music is unquesitonably a necessary component of the site as the medium through which the community flourishes
        Maybe because it's so essential / well integrated that it's assumed to be included?
 
In essence, the community is the draw of plug.dj, not the avatars, and not the music (not directly, at least).
 
Regarding the user interface, it drew negative marks across the board. And when I ran my 23 year old brother through a quick usability test of the website, it was surprising how many wrong clicks were made before the right action was performed. I attribute this to a combination of two factors:
 
1. Designers depended too heavily upon icons to convey meaning
        This results in new users relying upon hover text or trial and error to determine if they chose the desired action (either
        way, this is extremely inefficient)
 
2. There are a huge number of buttons and menus
        Even with better choices of natural button bindings, there is a huge amount of information to look at
 
 
Just for fun: here's a collection of buttons all displayed together when listening to music in a room. Say you're looking for the DJ Queue; which one do you click?
Here are some of the notes I took trying to consolidate my research into some takeaways.
Optimizing The User Experience
 
With this information in mind, I created two personas, basing their demographic and use behavior around that of users surveyed on plug.dj.
Consulting these personas, I went on to shape the mobile experience, shaving off many features that contributed to the desktop platform's "clumsiness". I decided to provide a clean and minimal expereince, which definitely cuts into the app's usefulness for some edge cases. For instance, I decided that buying or even changing avatars are features that can be restricted to the desktop platform due to their limited appeal and rare usage. For those that are heavily involved in the microtranasction aspects of the community, this may be a hindrance.
 
With many of these details stripped from the app, I sketched out an iOS app that includes all of what users love about the service, making sure that the app would be intuitive for both plug.dj veterans as well as brand new users who have never been acquainted with the desktop website. 
 
 
The room browser has been condensed down, leaving only the relevant information. First, the search functionality has been removed because of how little functionality it adds (it can only search for rooms, at which point the room would likely be favorited, or song titles, which are strangely formatted as all content is pulled directly from YouTube). Also removed are the previews of currently playing music videos. What remains is only what is needed for a smooth experience: room names, the number of users, and the currently playing song.
 
The room pages have also been dramatically transformed. Chat is positioned as the foundation of all rooms, making user engagement easy. Unlike the desktop site in which music dominates the screen, it remains present on the mobile app but takes a smaller role at the top of the screen just under the navbar. The voting system also remains, providing an additional and unintrusive opportunity for interaction. Lastly, a drawer menu allows access to the user's library and enables users to join the DJ queue.
 
With a strong understanding of the design that I wanted to pursue, I then built out wireframes in OmniGraffle.
Visual Language 
 
Here are the designs that I came up with. Because I found the color scheme and general feel of the desktop app to be reasonable, and also for continuity's sake, I attempted to retain the essence of the aesthetic that plug.dj has created. The dark tones with neon accents fits well with EDM and related genres, which encompasses most of plug.dj's audience.
 
Addressing usability concerns present on the desktop site, I chose to provide text alongside or in replacement of icons that could be confusing.
Prototype
 
This prototype is built using framer.js. There's a lot of potential in this design for some interesting animations, and that is definitely something I'd like to build into this prototype in the future. Particularly, being able to reorder songs with a touch and drag and tapping to play previews of songs (with an animated SVG progress dial) would be great additions.
Conclusion
 
Ever since the "golden age of turntable.fm" I have been fascinated by these social DJing experiences. Perhaps it's misleading to even classify these service as being about the DJ. Reflecting back to the days of turntable.fm, it wasn't the music that made the service so fantastic; it was the people. It seems the same holds true today.
 
It makes me wonder how I could push this one step further, moving everything except the community to the back burner and seeing the result.
plug.dj iOS UX Design
Published:

plug.dj iOS UX Design

Reworking at plug.dj from a usability and user experience standpoint and performing a complete redesign for iOS.

Published: