rl_gifrl_gif

Making music-production accessible to DJs

In 2015, DJ-software developer Mixvibes had one product line, Cross DJ, which was reaching maturity. It was time to develop a fresh product for a new user genre: DJs who wants to dive into music production without spending hours learning.  I was asked to design an all new product for our existing users and new ones alike. The result is Remixlive, a mobile and desktop app that empowers DJ with simple music production tools. It achieved a rapid market growth, 3 million downloads and a 4.4 overall rating. DJ Mag said the app was “a very intuitive way to make professional-sounding tracks on portable devices”.

CONTEXT AND CHALLENGES

Mixvibes has been making audio apps since 1999. It’s also the company who originally developed Pioneer's Rekordbox, the standard music management software for DJs, used in 95% of clubs worldwide. In 2015, innovation in the DJ software category had stalled, a price war was raging and historical companies like Vestax went bankrupt. To prepare for the future, Mixvibes had to come up rapidly with a new product, and in a new category.

Business objectives:
- Make a complementary app to address both current and new users.
- Use Looptrax, a Mixvibes technology previously used in our software.
- Generate steady revenue to reduce dependence on our existing product line.

MY ROLE

As I was in charge of design and marketing, I was invited to lead the design of this new app. The CEO had 20 years of experience developing audio apps and a huge network, so he took care of most UX research. He asked me to translate his insights into wireframes and workflows, design the UI and oversee the integration with developers. I would then have to brand and market the app, from PR to videos. I was given 6 months to go from the first prototype to public release. This case study focuses on the product design part.

EARLY PROTOTYPE

Mixvibes has a learning-by-doing developer culture, so we began by making a rough working prototype to test technical feasibility and potential appeal. The CEO handed me a presentation with a feature list, information architecture and rough mock-ups. I started out by sketching the main ideas on paper. Then, I transferred my ideas to Illustrator where I worked out the UX and UI details (examples: touch target size according to guidelines and blogs; detailed behaviour of pads, position of each element to save developers time, etc.) The whole process took 3 intense days, exporting included.

KICK-OFF

We started by choosing between Remixlive and another app, for which I had also designed a prototype. To help this choice, I made a sales pitch for both apps (inspired by videos Google makes even before developing products). As a result, we made a decision in 1 week (against 1 month for previous similar decisions).

WHO IS OUR USER?

We interviewed 20 DJs, with and without showing the prototype. This confirmed some of our assumptions, but also uncovered new learnings.

We came up with the following persona: the wannabe producer

The key insight was that to advance their careers, DJs need to start making music. Their problem was that music production apps were either too simple (“I’ve tried X but it’s a toy”) or too complex (“Y feels like a plane cockpit”). Their unspoken need was an app combines instant magic (“I made my first hip-hop beat — in 5 seconds”), a progressive learning curve (“Oh, so that’s what the envelope of a sound means!”) and advanced music making options (“I've built a sample collection of over 1000 samples”).

CREATIVE REQUIREMENTS

We mixed this research with business objectives and came up with those guidelines:

Simplicity: make a track in seconds 
- a live-oriented loop launcher, with pre-loaded synced samples
- no academic musical knowledge required
- performance features in the front, preparation (organizing samples) in the back
- visual representation of the music (audio waveform, loops as circles)

Depth: a professional remix toolbox
- play many samples at the time and rearrange them on the grid
- lots of DJ style audio effects and professional-sounding samples packs
- In-app purchase store should offer sample packs of relatable music genre

Openness: works with your samples and your set-up
- possibility to import one’s own samples
- MIDI control
- use the device’s microphone to record any sound and loop it

WIREFRAMING

I started by designing the main screens' wireframes. I followed by the store and the details (settings, copy, banners promoting in-app purchases). I first sketched on paper, then prototyped with Invision and eventually tested my assumptions during user interviews.

I broke down the in-app purchase store in three categories to organize content, allow for possible bundles and optimize conversion.

I also pushed to have a 15 pages FAQ to teach users, show them we cared and minimize the support workload. On the side, I oversaw the curation of music content (e.g. sample packs that would be sold as in-app purchases). To find genres users wanted, I asked the marketing team quantitative analysis of producers charts websites like Beatport.

STYLE GUIDE

As I was still working on the UX, I realized that we’d need help on the UI if we wanted to meet the deadline. I negotiated a budget, shortlisted 10 design studios that felt within and interviewed with 4. I went with the one which scored higher on my criteria (music app design experience / music production knowledge / quality of UI work / good communication). We spoke twice a day and in a week, the style guide was ready and approved by the CEO. I converted my Illustrator wireframes into Sketch high fidelity mock-ups.

An extract of the final spec (image obstructed on purpose), made of 92 screens. It took about a similar number of iterations to finalize it. To communicate the specs to developers, I used Zeplin which saved lots of time, compared to our earlier Illustrator workflow. 

FINAL TESTING

Final user research showed that DJs needed a tablet-optimized layout, not just a scaled-up mobile one. This seemed like a deal breaker, so I insisted to design one. Besides, testers were never going to the store. We added a pop-up that offered 2 free sample packs and increased the discoverability of the store by 80%.

LAUNCHING AN MVP

Before the launch, I designed the icon and app store screenshots. I tested them on local DJ school students who fit our persona. I also wrote the PR, app store and website content. To end with, I made a (much needed) new responsive website for Mixvibes.

I had no time to shoot the launch videos by myself, like I did for previous launches. I contracted a DJ/video maker to do it. He gave a lot of feedback, which resulted in subtle UX tweaks. I also noticed that YouTube users fancied detailed walkthrough videos. I commissioned the contractor to make one: it got more views than the short launch video. 

The launch eventually exceeded our business goals. Besides, the app got featured by Apple, and had more than 70 articles. Eventually, DJ Mag said it was “a very intuitive way to make professional-sounding tracks on portable devices”.

POST MVP

This video was sent to me by a blogger / journalist.  Its title  suggests that the goal of the app (empowering DJs to start music production) was met. 

Roadmap-wise, we were eager to build the features we had in mind. However, conversations with forum users showed that incompatibility with audio routing systems like Audiobus or Ableton Link was a deal-breaker. We did not foresee this because we came from DJing, not music production.

We focused the first 2 updates on compatibility with other apps. 

  • gallery-image
  • gallery-image

In terms of monetization, sample packs didn’t sell as well as features. Paradoxically, no one complained about their quality. Interviews showed that users needed to be reminded when new content dropped. We made videos showcasing new sample packs and sent them as push notifications. This resulted in a 20% increase of the conversion rate.

Research showed that wannabe producers perceived Remixlive as “too technologic”. To offset this, we added colors to the interface. The team had diverging opinions about which ones to pick, so design decisions got backed up with a factual legibility ratio and references to best-selling hardware.

I also gave out versions to 100 YouTubers I selected. Some made videos with Remixlive but most importantly, their feedback often resulted in features we developed. It also allowed me to met Panos, a Greek YouTuber whom I later contracted to shoot our Android launch video. 

On the left, the video Panos made by himself when I sent him the product. On the right, the video I contracted him to shoot for the Android version launch. It also shows that Remixlive can be used in a music jam context, thanks to Ableton Link.

All those versions had positive incremental revenue, often in the ballpark of +15%.

ANDROID AND PC VERSIONS

Designing the much-requested Android version required minor tweaks, mostly to have the native parts (collection and store) comply with material design. For laptop, my work also consisted in a major UX change (= resizeable grid), this time to take the most out of the screen real estate and be compatible with MIDI controllers.

Process-wise, I exported pixel-perfect SVGs: developers only had to resize them. I would then look at their work to list adjustments, sometimes with explanatory sketches.

The resizable grid in Remixlive for Mac/PC

IMPACT ON ORGANIZATION

Business-wise, the app outperformed the goals: 3 million downloads in one year and a steady revenue stream that reduced dependence on Mixvibes' other product line by 100%. 

Remixlive was featured 200 times across local Play Store and App Store territories. It also made it to the Play Store selection of Most Innovative Apps for 2016, EMEA.

Besides, its good results decided us to develop a spin-off, Remixvideo, which got released in February 2017.

User-wise, Alain’s story warmed my heart. He is a middle-school teacher who used the app to teach music concepts to his 200 students. I reached out and we gave prizes for a Remixlive competition in his school. Kids experimenting the magic of making their first beats makes me believe that the app could become a major platform for learning music-making.

CONSIDERATIONS AND LEARNINGS

From a personal standpoint, I learned to hold very tight deadlines by prioritizing effectively. Besides, contracting a design studio and video makers made me understand the value of outsourced work. To end with, I now love Sketch, Zeplin, Flinto and WordPress.

In retrospect, I would improve the process by starting off with a design sprint to answer critical questions at start. I would also use wireframing tools like Azure, and back up every design decision with facts to make faster and better informed decisions.

Product-wise, I'd suggest to add animations to facilitate understanding, redesign the edit pane and improve first time shopping experience in the store.