Impact
100,000+ kits generated with user samples, favorable reviews from the producer and tech community
Company
Role
Product Design Lead
Responsibilities
UI/Visual Design
Prototyping
Interaction Design
Art Direction
Concept/usability testing
Team
Product Manager
2 Full-stack engineers
1 Backend Engineer
1 QA Analyst
Year
2021
The problem
Only 2% of Arcade users utilized their own audio samples to create custom kits. We believed enhancing the appeal of custom samples would boost usage and retention.
The approach
We prioritized for quick go-to-market strategy, optimizing for feasibility, reduced complexity, and performance targets for real‑time playback
Challenges
Key challenges included limited resources for research and a complex tech stack, combining stateful web architecture with modern music tech libraries.
Editing sample slices
We considered allowing sample slice adjustments but faced technical challenges. To simplify the initial launch, we excluded this feature, allowing users to adjust slices post-save.
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.
Using FX Presets to help personalize the results
A standout feature of Kit Generator was the introduction of audio effect presets, known as FX, which allowed users to customize the sound of their kits. These presets offered a range of options, from reverb-heavy, spacey effects to aggressive, distorted sounds. Users could also opt for a 'dry' sound by disabling the FX. I explored various interaction patterns to make selecting these audio effects intuitive and engaging.
Drawing inspiration from real life
To simplify the UI for selecting FX presets, I drew inspiration from the See 'n Say toy, which is intuitive even for children. This approach allowed us to visually represent different FX options in a user-friendly way.
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
Without formal research resources, we used Maze for quick usability testing by sharing prototype links with team acquaintances. Initial confusion about 'Generate Kit' was resolved as users navigated the prototype, boosting our confidence to proceed with a Beta version.
Internal dogfooding: Output's first "Beat Cypher"
To evaluate Kit Generator's performance and identify issues, we organized a 'Beat Cypher' session. Employees created beats using Kit Generator and Arcade, documenting bugs and usability concerns. This feedback helped us address major issues and improve the product.
