cdja_video-headercdja_video-header

Designing the 1st professional DJ app for Android users

UX design ‧ Mixvibes ‧ 2014

In 2013, there was no professional DJ app on Android so Mixvibes decided to make one. As the lead designer on the project, I had to ship the app in 3 months. I then designed updates to make it a reference for Android DJs. The app is the company’s greatest success so far. It generated new B2B customers and brought back sustainable growth. Its paid version is rated 4.5 and The Guardian praised its "clean, uncluttered design".

CDJA_Tablet+PhoneCDJA_Tablet+Phone

CONTEXT AND CHALLENGES

In 2013, Mixvibes wanted to reposition itself as an app company, after having pivoted from making hardware + software to only software. Cross DJ was available on Mac/PC and iOS but despite increasing user demand, Android was a no-go for because of its latency. With Android Kit Kat, developers said they could achieve acceptable results. Timing was critical: Mixvibes wanted to be the first historical DJ app maker on the platform, and ship before the Christmas rush.

MY ROLE

I was the lead designer on the project. I collaborated with the CEO and the former Mac/PC designer to finalize the UX and UI, write the copy, and oversee the integration. I then marketed the app from end-to-end. This case study focuses on the product design part.

Process: rough sketches → wireframes → final spec.

WHO IS OUR USER?

I started out with a persona, based on the social media profiles of people who requested the Android app on our Facebook. 

    SHIPPING V1

    UX-wise, we tried to improve on the iOS version. For example, we realized (by watching a lot of Boiler Room's DJ performances) that the mixer on the main screen was more useful for DJs that other features we had in the iOS version.

    Feature-wise, we applied the same logic. Watching and talking with DJs prompted us to add the quantize feature. This was not only loved by users (reminding them desktop products), it also offset the high latency of some devices, allowing us to address more people.

    UI-wise, I picked the Roboto typeface to enhance the Androidy feel, and used the platform’s design guidelines for the native parts of the app (e.g. the music collection.) For the rest of the interface, we started from the iOS design and flatized it to:

    • fit current user expectations about style
    • easily stretch the interface to fit different screen ratios and sizes
    • address as most Android devices as possible
    • reduce apk size to suit low-bandwidth users — especially in places such as Latin America or Southeast Asia, where Mixvibes is historically strong

      For a leaner process, I taught the Illustrator’s basics to developers.

      Our MVP got more than 100 articles, user ratings were above 4.5 and the app was profitable in its first months.

      Experimenting with flexible zones, here with the tablet layout.

      Snippet of the final spec (image obstructed on purpose).

      A 50 seconds video overview I made of the app in action.

      POST MVP: LISTENING TO USERS

      To establish Cross DJ as the reference for Android DJs, we shipped versions faster than we ever did on iOS. I gathered user feedback (from Facebook, articles’ comments, support email and Play Store) in a shared spreadsheet to assess their importance. This helped to prioritize features and establish a roadmap. 

      We tried to address Android users specific needs, with features such as navigation by folders (increased rating by 0.1) or beginner-oriented tutorial (increased app retention by +15%). Localizing the app description resulted in +30% downloads in countries like Brazil.

      Navigation by folders in the music collection - in a pre-Material design era.

      One day, a DJ friend told me about a hack consisting of connecting a computer directly to a hardware mixer. YouTube videos explaining it were popular among beginners DJs. It seemed perfect for Android users and developers said they could build the feature quickly. I thought it could be an easy way to remind users of one of Mixvibes’ key strengths: its openness to all sorts of hardware. Update rates for this version were higher than all the other ones, and it was much faster to develop. 

      The video hit 200k views, more than others I made about development intensive features.

      Later on, Android Marshmallow enabled us to develop the much-requested MIDI control — with a satisfying quality. When selecting MIDI controllers to map, we went for the ones built for iOS. But when I looked at bestsellers, some were not built for iOS but were tiny and affordable, e.g. the Pioneer DDJ-SB. Mapping them delighted users: videos featuring them got more views than the one featuring controllers built for iOS.

      IMPLEMENTING THE ANDROID DESIGN IN IOS AND MAC/PC

      We later uniformized the UX and UI of the iOS and Android versions. User interviews showed that iOS users prefered Cross DJ for Android’s design. I led this harmonization and convinced the iOS developers to use vectors since it did not require extra png exports each time Apple would introduce a new screen size. Later on, we applied the same logic with the Mac/PC update I also designed — still in development.

      RESULTS

      Cross DJ for Android has been downloaded more than 3 million times. We had feedback from all sorts of media: mainstream ("a clean, uncluttered design"The Guardian), tech ("Challenging our notions of what can be done on a touchscreen" — Android Police), music tech ("Good looks, great sounding FX, great sync engine." — Digital DJ Tips) and DJ ("The graphic interface of Cross DJ is pure simplicity, just the way it should be; however it holds a lot of feature-rich elements that can be delved into, which really start to make this app a cool piece of work. Now if DJ Mag's sounding like Mixvibes has reinvented the wheel then you'd be right, as other DJ apps for the Android system definitely fall short and haven't really offered users anything tangible to operate in a professional environment"DJ Mag)

      The app successfully repositioned Mixvibes as an app maker that codes professional audio on all platforms. We landed contracts with mobile OEMs such as TCT-Alcatel Onetouch and were awarded the status of top developer on the Play Store. The team collaborated with Android audio’s top engineers at Google and I was invited to talk at Paris Google Play Time.

      Superstar DJ Avicii endorsed our partnership with Alcatel. I was also invited to talk about the app at some occasions, like the press conference launching Alcatel Hero 5 at MWC Barcelona.

      CONSIDERATIONS AND LEARNINGS

      This experience taught me about wireframing, high fidelity mock-ups and exporting. I also learned to analyze data to make better design decisions. Besides, the external mixer experience showed that watching users pays off more than trying to cram as many features as possible into a release.

      Given the chance, I would revisit parts of the UI (sliders), the onboarding experience (dynamic tutorial), the portrait mode (specific tablet layout) and the store for better conversion.