Graph Editor: sound design without the JSON
A full redesign of the Facebook Audio Engine interface, so sound designers could build audio processing chains without a developer or a line of JSON. It shipped, and powered sound modifiers in Instagram filters.
- Shipped into Instagram filter sound modifiers
- 6 experiences, ~60 pages handed off
Why were sound designers writing JSON?
I spent ten years in audio before design, so when I opened the v1 Graph Editor I could see exactly why sound designers refused it. Built by engineers for MVPs, it followed none of the paradigms audio tools have trained people on for decades.
Meta's apps needed interactive audio, and building any of it meant a sound designer handing hand-written JSON to an engineer for every change. The tool meant to fix that had zero of its intended users. An Instagram sound designer put it plainly: "I currently have no use for the Graph Editor."
Talking to the sound designers
I interviewed five sound designers as a peer, not through a translator. Three findings set the plan:
- Creating a node is the interaction that matters most
- Almost every graph starts with a sound file
- Metering must be easy to see
So node creation and file-in were designed first, not the visually impressive canvas.
What did I bet on?
Borrow the mental models sound designers already own from their audio tools, and reuse Meta's design system for everything that is not audio. With six months and one designer, a bespoke visual language would have been more distinctive and much less finished; every hour went to the audio-specific problems instead.
Core feature: linked parameters
Final Design
Directing a signal into a parameter became the primary interaction. Every sound designer tested chose it as the most intuitive model.
Comparative Research
I studied how Max/MSP, Omnisphere, FabFilter and Ableton-style modulators handle one parameter controlling another, borrowing the mental models sound designers already know.
Design Ideation
I explored the candidates in flows and screens, including a cleaner, more generic property-panel model that would have looked tidier and been learned by no one, then put them in front of users.
What did the team inherit?
The shell ran on Meta's existing design system, so no time went to generic components, the tool stayed consistent with Meta's language, and engineers had documentation they already knew.
On top of it I delivered a system tailored to the Graph Editor: colors, styles and components, fully documented. The team had never had one.
What shipped to engineering?
A version-controlled handoff: ~60 pages of hi-fi mockups across 6 research-backed experiences, prototypes for the key flows, and a documented Graph Editor design system (colours, styles, components) on top of Meta's, the first this team had.
The Graph Editor is an internal tool with no live link, so the work here is shown through crops and recordings.
A redesign that shipped, and put sound modifiers into Instagram filters.
- Shipped after handoff: the editor launched sound modifiers for Instagram filters
- ~60 pages of hi-fi mockups across 6 research-backed experiences, handed off version-controlled with prototypes
- Signal-into-parameter validated: every sound designer tested chose it
- A documented Graph Editor design system on top of Meta's, for the team to build on
What I'd do differentlyThis was the project where my audio background stopped being a fun fact and became the method. I could interview sound designers as a peer, and I recognized the paradigms they wanted before they named them. What I would do differently is push harder, earlier, for a shipped slice inside the six months rather than a complete handoff at the end; a smaller thing in production would have taught us more than sixty pages.