Rackloose front panel playing the High Dive preset, with STEP–16, SOLID, SIEVE, and LEVEL above the transport and keyboard

Rackloose
UX Case Study

Description

Rackloose is a modular synth that runs in a browser tab: a rack of original instruments, drum machines, and effects you wire together with virtual cables.

My Roles
  • Product strategy
  • UX design
  • product engineering
  • sound design
Project Link

The What

Product Summary

Rackloose is a studio rack in the browser. Synths, drum machines, sequencers, a mixer, and effects stack in one column, and every one of them is an original design. Press Play All and a preset is making music before you touch a cable. It runs as its own site and as a React component other sites can drop in.
Rackloose in windowed mode playing Bone Orchard, with DICTATOR and MONARCH above the transport and keyboard

The Challenge

Modular synths are famously hard to start. You get a blank rack, a pile of cables, and silence until you work out what goes where. The browser adds its own rules: audio can’t start until you click, screens get small, and the whole thing still has to work on a phone.
Rackloose Add device catalog with sequencers, synths, drum machines, and effects above the rack

The Solution

Start with sound. The rack opens on a full patch, and 27 factory presets in seven styles, from trap and funk to reggae, synthwave, and industrial, are one click away. Each one is a starting point you can pull apart. When you get curious, flip the rack and every cable is right there.
Rackloose Presets panel with factory presets grouped by style above the rack

My Roles

I designed every device and the rack around them, wrote the sound engine and its DSP, built the factory presets, and wrote the user guide. Then I packaged it all as a component so it could live inside other sites.
Rackloose user guide open over the rack

The How / Studio Experience

Play First, Patch Later

Nobody has to patch anything to hear something. Play All starts every sequencer at once, the computer keyboard plays whichever instrument you click, and a MIDI keyboard works too. The front panel holds the knobs and the music, and the cables wait on the back until you want them.

Depth on the Back

Flip the rack and the whole signal path is out in the open. Cables are colored by what they carry: audio, control voltage, or gate. On the back, each device shows only its jacks, with no knobs in the way.

Rackloose rear panel with color-coded audio, CV, and gate cables running between SPACE, STEP–16, PRISM, and BRIT

Screenshots

MONARCH vintage monosynth with three oscillators, a filter, and two envelopes
AURORA eight-voice polysynth with dual oscillators and a source mix
PRISM six-operator FM synth with its algorithm and operator controls
SKITTER trap step sequencer with kick, snare, clap, and hat lanes
STRIKE digital drum machine with sixteen lanes of steps
BOOM analog-style drum machine with its step grid playing

The Who / Audiences and Stakeholders

  • Have never patched a synth and want to hear something good right away.
  • Start from a preset and change one knob at a time to learn what it does.
  • Need plain labels and a guide that answers questions without a manual.
  • Know the studio gear these devices nod to and expect them to behave like it.
  • Want real routing: extra sequencers, modulation, an eight-channel mixer, and bus compression.
  • Record ideas with DICTATOR, export them as MIDI, and bounce the patch to a WAV.
  • Open the rack on a phone and still expect it to play.
  • Need jacks and controls big enough to drag a cable with a thumb.
  • Keep the ringer on silent and still want to hear the rack.
  • Mount Rackloose as a React component inside their own pages.
  • Need it to pause when it’s hidden, keep its keyboard shortcuts to itself, and clean up completely when it closes.
  • Pin an exact release and check its checksum before installing it.

Methods / The UX Process

Hardware as the Reference

  • Modeled each device on a classic piece of studio gear, from console channel strips to vintage polysynths, then gave it an original name, panel, and sound.
  • Kept the hardware habits that make racks fun: long-throw faders, LED meters, needles on the compressors, and a flip to the back for the cables.
  • Put mute, solo, clear, move, duplicate, and remove in the same spot on every device.

Patching Without Fear

  • One cable per jack, with numbered spares on every output, so one signal can feed several inputs without stacked plugs.
  • While you drag, only the free jacks that fit light up, and a line of text says what to do next. Escape cancels.
  • Undo goes back 50 steps and Revert restores the saved patch, so trying something never costs you the patch.

The Sound Engine

  • Built the rack on Web Audio. Ten devices also have an Analog engine: ladder filters and modeled drums written in Rust, compiled to WebAssembly, and run in AudioWorklets at 2x oversampling.
  • Level-matched every Analog engine to its Digital version, with Digital as the fallback wherever WebAssembly can’t run.
  • Made Export WAV render the patch offline through the same graph, so the file sounds like what you heard. Browser audio tests and Rust DSP tests keep it that way.

Shipping It as a Component

  • Packaged the rack as a React component with props for keyboard focus, pausing audio, and its own save slot. It disposes every audio node when it unmounts.
  • Shipped each version as an immutable release archive with a checksum, so host sites install exactly the build they tested.
  • Left out the backend, accounts, API keys, and analytics. Patches autosave in the browser and export as files.

The Outcome

  • Live at rackloose.michaelzick.com as a standalone studio.
  • Running inside Mike OS on michaelzick.com, where it opens like any other desktop app.
  • Booked for a regular gig in a basement bar somewhere on this site. You’ll have to find it.
  • 23 releases and 133 commits in about three weeks.