DJ2 Live Steaming Software

DJ2 is a live streaming application which connects with Network Attached Storage via a desktop client, iOS and Android mobile apps. Designed for use for scheduled and at the moment live broadcasts, it fits usage in classrooms, home, live events or anywhere with a network connection.

DJ2 features a clean easy to use live streaming experience, with social network integration, a feedback system, stream replaying, subscriptions and a scheduling interface.

I was responsible for developing the user experience vision for desktop and mobile, and collaborated with the product manager to develop the original software spec.. Most of the work involved lengthy reports and meetings, than preparing the various design artifacts, like wireframes or polished UI.

Process

This was a new product for QNAP with no prior design research performed. My process involved a comprehensive literature review and competitive analysis, UX benchmarking, semi-structured interviews via Skype with pre-defined target users, analyzing interview data, and finally I sketched and created wireframes of new flows and screens. In addition, I became heavily involved with the communities that developed around competing products (Meerkat, Periscope and Ustream), developing my own streaming channels, in order to have a more intimate understanding of this type of software and the people who use it.

The team for this project was distributed and most meetings held via video conference and Skype calls. When language was an issue, which it often could be, I developed a quick sketching workflow whereby I would sketch a possible solution, take a photo which was automatically shared via Dropbox to Skype. I prefer face-to-face meetings but with Taiwan’s great network infrastructure this kind of solutions were a good alternative.

I create prototypes in various ways. First, I create sketches using sharpies to quickly explore ideas and gain feedback. Sharpies produce thick lines and such don’t encourage the creation of a lot of detail, something that I am not interested in at the early stages or product design. Next, I might start using pencil and paper, or markers with some color to more accurately reflect what the screens might look and behave like. These are more than refined enough to do some testing with. Lastly, I might use Keynote to produce digital wireframes if necessary, or go straight to Sketch. Only after I go through these steps would we start creating iterations in high fidelity

Below are some examples for the mobile version of DJ2 which show early flow, high fidelity wireframes, and some UI work I did to bring the direction to life.

Early mobile flow exploration. One of the key differences in direction I introduced was the reduction of possible tasks that users could perform on each screen. By focusing on those tasks that users most want or need to perform we reduce the complexity of the interface, thereby reducing their cognitive load.

A round of high fidelity wireframes for the iOS version

Some UI samples I finished