Vibra

Audio middleware design system for
sound & haptics interactions

Design System Architecture

UI Design

UX Design

UX Research

Product Strategy

Overview

Sound and haptics fall into a gap. FMOD and Wwise are deep, powerful audio engines built for AAA game studios — they assume a dedicated audio engineer and a game-engine pipeline. A fintech app or a smartwatch shipping a handful of sounds doesn't need that. So most product teams fall back on spreadsheets, Slack, and one-off prototypes, with nothing structuring sound and haptics as a versioned source of truth they can manage and ship across devices.

Vibra is the lightweight governance layer above the creation tools. Designers bring in finished assets; Vibra turns each into a structured, queryable token with behavior, accessibility, and platform config — one source of truth that feeds designers, developers, and AI coding tools. It doesn't author sound or replace the engines. It governs what they produce.

Type

Pre-launch SaaS

Role

Product Strategist

Product Designer

UX Researcher

Year

2026

Problem

Too much tool, or no tool at all. FMOD and Wwise are overkill for a team shipping a handful of sounds and haptics. The fallback is spreadsheets, Slack, and one-off prototypes

Hypothesis

If product teams had a structured system to organize, govern, and ship their sounds and haptics — the way they already do with visual design tokens — they could scale without consistency falling apart.

Solution

One workspace that turns every sound and haptic into a queryable token: structured, platform-aware, and live. The same source of truth feeds designers, developers, and AI coding tools, and ships the right implementation to every device.

12

User interviews

3

Distinct workflow patterns

6

Device classes

Users

Sound interaction designers

Audio UX Leads

Design system managers

Front end devs

Customers

Mid size consumer apps

Design system teams

Enterprise product orgs

Key Findings

No shared repository: assets had no single home, so there was nothing to store, version, or pull from.

Teams reuse the same sounds and haptics across products.

Tokens scattered across drives, DAWs, and Slack threads

MVP Roadmap

Research & discovery

Design & prototype

Validate & iterate

Build & Ship

Grow & expand

Projects

Teams run sound across multiple brands and products with no home base. Projects is the launchpad — every sound system at a glance, surfacing the two things that matter most: how many sounds live inside, and when it was last touched. Lightweight on purpose, structured enough to scale across brands without clutter.

Design System & Interaction Matrix

Design system: The design system is where every sound and haptic becomes a managed entry — organized, versioned, and tracked through its lifecycle — so designers and engineers work from one source of truth instead of trading files and filling in the gaps themselves.

Interaction matrix: The interaction matrix handles what happens when sounds and haptics collide. In a real product, more than one can fire at once — a notification lands mid-scroll, a haptic overlaps a chime. The matrix is where teams declare those rules: what takes priority, what overlaps, what gets interrupted or queued. Instead of that logic living in an engineer's head, it's recorded in the system — Vibra maps the intended behavior, and the platform carries it out.

Asset Library

The library is the repository for raw sound and haptic assets. Upload a sound or haptic once and it's available to pull into any project. We found teams reuse the same assets across products constantly, so instead of re-importing and re-versioning the same files for every project, the library keeps one copy any project can reuse.

Developer Settings

A design system nobody can implement is just art. Settings is where Vibra wires into the stack developers ship from. API keys scope credentials per environment so staging and production rotate independently. The MCP server exposes the library to AI dev tools — paste the config into Claude Code, Cursor, or Copilot and they query tokens the way they query Figma tokens, straight from the source of truth. The SDK handles platform routing, accessibility, and runtime logic, so a developer references a token by name and forgets the rest. Designers update a token; the SDK pulls the new behavior on the next play. That's the line between a design tool and a system of record.