Arrangr

A waveform and arrangement display for musicians. Manual Word doc to AI-assisted workflow to mobile app.

Product DesignMobileFigmaReact + Rails

Research & Identify

As a worship drummer, my weekly prep has been manual for years: screenshot drum tracks from Ableton, crop in Photoshop, paste into a Word doc in sequence order. Repeat for each song in the set, typically 4 to 5. I needed a way to see arrangements and audio stems together, at a glance.

The Old Way

The old way worked but was repetitive. Interestingly, the Word docs defined the information architecture: section order, audio stem shapes, BPM, and personal notes.

Visual forthcoming
Manual Word doc with Ableton screenshots

Version 1

What if I could parse Ableton's project files directly? I built a React/Tauri app using AI to extract section names, stems, timing, and BPM. After iteration, the stems lined up. I tested it on stage and it worked.

Visual forthcoming
React/Tauri prototype parsing .als files

Version 2

Version 2 got serious: Rails API for set lists, React web for editing, Expo for on-stage mobile/tablet use. I built Upstream, the design system, to support it.

Visual forthcoming
Component library
Visual forthcoming
Mobile and tablet screens

What I Learned

Each version brought me closer to the goal. Next: can the reference sync with the live set to show your current position in the arrangement?