Kit Generator
for Arcade

Project Summary

Kit Generator is a feature that my team and I developed in Arcade, a subscription-based music software plugin that delivers a variety of playable audio sample-based kits featuring different instrument sources for making different kinds of music. Kit Generator allows users to upload their own audio files and have it converted into a playable Sample Kit that you can save and re-use for later.

Company
Role
Senior Product Designer
Responsibilities
UI/Visual Design
Prototyping
Interaction design
Art direction
Concept/usability testing
Year
2021
Team Structure
Product Manager
2 Full Stack Engineers (C++, React)
1 Backend Engineer
1 QA Analyst
Product Reference

The Problem

This was a top-down request from the leadership team at Output who identified that less than 2% of existing customers were using their own audio content when using Arcade. While users could upload their own audio samples and create custom kits, the process was a very manual and tedious process and based on data available, we knew that very few people were creating custom kits. Based on this, the hunch was that if Output provided a way for users to upload and use their own custom samples in an interesting way within Arcade that we would see an increase in engagement and ultimately retention.

Some of the key challenges we faced, outside of limited resources for conducting research or running experiments to validate our key assumptions, were working with a complex tech stack. Arcade is a unique product in that it’s one of the first Saas music tech products to be built with a combination of stateful web architecture (React) and modern music tech software libraries (C++ & JUCE).

The Approach

Starting with a proof of concept

We started with a proof-of-concept prototype that a previous designer had built which demonstrated the core idea of utilizing user audio samples and converting them into playable kits within Arcade. With the proof of concept in place and proven (at least internally), our team was tasked with building out the final experience that would go to market.

At a high level the flow involved a user uploading an audio file, having Kit Generator slice up the audio and assigning the slices to various keys of Arcade’s sampler so that a user could play it like any other kit in Arcade.

Positioning Kit Generator as an "intermediate step" and narrowing down our feature set accordingly

We had multiple rounds of internal discussions as well as stakeholder discussions where we explored what we thought we needed to ship with first. We ultimately arrived at the conclusion that Kit Generator, as a feature, would be treated as more of an "intermediate state" and that tweaking and editing should occur after the kit was saved by the user. This was a BIG assumption that we made in retrospect, but based on that principle, we prioritized our MVP set of features based on technical feasibility and the amount of time required to develop features.

Some features that didn't quite make the initial cut

There were a lot of interesting directions that we could take Kit Generator in, all coming with varying degrees of complexity in terms of technical implementation and product strategy. Some of the features that didn't make the cut:

Waveform view

The initial proof of concept prototype provided a waveform view of the sample and where Kit Generator was slicing the audio. We decided to omit this to prevent confusion that the user could adjust the slice points at this stage.

Editing sample slices

We discussed the possibility of adjusting sample slices at this state, but ran into some technical complexity based on some edge cases. To keep the 1st launch simple, we decided to not include this feature in the first launch reasoning that users could make those adjustments after the kit was saved.

Using FX Presets to help personalize the results

One of the key features established for Kit Generator was the ability for a user to choose from a list of audio effect presets (labeled FX) that would color the audio of sounds produced by Kit Generator. This would allow you to make your kit sound uniquely different based on your selection, from spacey and washed in reverb to aggressive and distorted. And if you wanted a more “dry”, non-effected sound, you could simply disengage the FX. I explored a few different interactions and patterns that users could use for choosing audio effects for their kit.

Drawing inspiration from real life

A big part of Output’s audience included people new to making music on a computer. In an attempt to make a simple UI for choosing an FX preset, I turned to real life everyday objects for inspiration. What’s a device that was easy enough for a child to understand how to use? The See ‘n Say! This classic childhood toy served as a great analogy for visualizing a collection of different options that produced different effects. I would display the FX presets in a similar way, with each section of the “wheel” representing a different FX preset combination.

Choosing an audio sample slicing algorithm

While we de-prioritized fine tune placement of audio sample slices, one feature that did make it to the top was the ability for Kit Generator to slice the audio in interesting ways. This ranged from more experimental and warped slicing to more rhythmic or straightforward slicing for more “traditional” purposes.

Testing concepts with real people

At the time, Output didn't have any formal research resources to aid the team in conducting usability testing or customer interviews. In order to get some initial reactions to Kit Generator's user flow I spun up some quick usability testing using a product called Maze which allowed us to send out prototype links directly to friends of people on the team. Overall, we heard that there was a little bit of confusion initially around what "Generate Kit" might mean, but as they went through the prototype they were able to get a better understanding of what was intended. The team felt like this gave us enough confidence to move forward with cutting a Beta version for internal and Beta testing.

Internal dogfooding: Output's first "Beat Cypher"

To help gather additional insights into how our solution was working and stress test Kit Generator, we sent an open invitation to the entire company to participate in what our team referred to as a “Beat Cypher”. This was a 1 hour session where participants would be required to create a beat using Kit Generator and Arcade in their DAW of choice, the intended use case for our customers, and document any bugs, usability issues, or any other observations related to using Kit Generator that surfaced. After the hour was up, we would gather back online and listen to the results of our beat creations and share our documented findings with the product team. In this way, we were able to squash major bugs and address any usability or feature requests that came out of the session.

Impact

The team launched Kit Generator with a marketing push behind it in the form of email and Youtube video promotions. We saw the following results:

100k+ custom kits generated

Since launching, Kit Generator has seen steady adoption, and to date there have been over 100,000 kits generated with user samples using Kit Generator inside Arcade.

Critical reception

Shortly after we launched we saw a number of Youtube videos that were produced outlining the benefits that Kit Generator provided for song creation or completion. This gave us some signal that we were on the right track with Kit Generator.

Up Next
Kicking off a new Activation team