iPad displaying Tabletop app

Tabletop

Music Environment for iPad

What It Is

Tabletop is intended to mimic a wired-together hardware setup for electronic musicians. Its environment is literally a tabletop surface, and various instruments, devices, and effects connect in modular permutations to create a virtual studio setup.

Hot off the heels of past successes, our small team at Retronyms worked heavily on instinct to create new products that we, and we're pretty sure other music enthusiasts, wanted to use. I huddled with my colleagues for a solid week to knock out the designs and development underpinnings of our idea.

Within a year of its conception, Tabletop was the #1 selling music app for the iPad.

We spitballed ideas of what core of device combinations would make for a compelling experience, and went to work on our favorites: a touchpad sampler (comparable to the revered Akai MPC), a simple keyboard with original sample-based patches and basic ADSR, a turntable music player, a tone matrix pattern synth, and several basic effects (delay, reverb, chorus).

Because our team was small, we were able to work fast, often handing wireframe explorations in progress to developers who were already working on technical proofs of concept. This rapid iterating and collaboration lead to creating a functional app with significant visual polish in a matter of weeks, while we worked out bigger workflows and performance issues.

Because there were challenges in designing both each device’s experience as well as the overarching app environment, it was easier to pivot between the somewhat self-contained experience per device and the larger, full-app environment experience.

The app was initially released for the first generation iPad, where performance was laughable compared to the blazing processor of the latest from Apple. Because of those limitations, our team invested a considerable amount of time in testing our own product to ensure that it was reliable and usable.

Product Objectives

  • Overall app workflow for song (session) creation, saving, browsing, editing
  • Design of unique devices standardized in sizes to integrate into overall product offering for rollout
  • Modular design of nine-screen interface to accommodate combinations of device sizes, as well as spatially accommodating virtual audio cables to connect them
  • Product viability via business model focused on in-app purchases as feature and capability upgrades, including an in-app “Device Store” to market and demo new offerings over time
  • Manage processor demand against rich, skeumorphic visual experiences
  • Sound design, sourcing, and audio library creation for device presets
  • Integrate third-party SDKs to synchronize third-party iPad apps to broaden product appeal
  • Incorporate expanded capabilities such as Apple’s Inter-App Audio (IAA) technology as part of Retronyms’ future product roadmap

Products Within a Product

To better describe the scope and extent of work that went into Tabletop, it helps to break it off into pieces and parts. Most of my responsibility was in the designing of specific devices: their behavior, functionality, look and feel, and, in many cases, the sounds that shipped with them. For many of these features and projects, I was involved on nearly every level: concept, naming and branding (where applicable), wireframes, visual design, production of visual assets, and, in some cases, sound design and/or XCode compositing.

M8RX (TONE MATRIX)

The M8RX emulates popular tone matrix hardware products, providing the ability to program up to 32 unique patterns. The device features over 60 original sounds with the ability to change the scale and key of playback. Challenges in this device included how to navigate between different octaves, how to accommodate multiple pattern banks, and how to simulate skeumorphic illumination without hitting the iPad processor too hard.

M8RX wireframe excerpt
M8RX wireframe excerpt
M8RX tone matrix, in use
M8RX tone matrix, key popover

GRIDLOK (TOUCHPAD SAMPLER)

Inspired by the industry standard for touchpad samplers, the MPC2000, Tabletop’s Gridlok offers 16 pads for live play as well as numerous presets and a workflow for recording samples in-app. Its grid of pads also incorporated mute groups, where one pad will auto-mute the other’s sound when tapped in sequence (for an open and closed hi-hat combo, for instance).

Gridlok wireframe excerpt
Gridlok wireframe excerpt
Gridlok touchpad sampler, in use
Gridlok touchpad sampler, recording sample

SPINBACK (TURNTABLE PLAYER)

SpinBack allows users to load in music from their local library, in-app recordings, or from the AudioCopy clipboard. Its pitch adjuster, tonearm, and platter simulate the hands-on experience of a turntable.

SpinBack wireframe excerpt
SpinBack wireframe excerpt
SpinBack turntable, default state
SpinBack turntable, playing audio

MASTERMIND (INTER-APP CONTROLLER)

When our team decided to incorporate Apple's newly announced inter-app audio compatibility, I designed Mastermind as a new controller for any active compatible audio app on the iPad. Used in conjunction with Tabletop’s MIDI Learn feature, its controls can be mapped to any compatible parameter in the selected app.

Mastermind Inter-app Controller wireframe excerpt
Mastermind Inter-app Controller visual design

MIDI LEARN MODE

To route controls within Tabletop to external controllers, users can enter MIDI Learn Mode and map specific controls to their connected hardware. MIDI Learn Mode is an example of a workflow or feature that applies to the “software layer” of the experience rather than the specific instruments or devices within it.

MIDI Learn wireframe excerpt
MIDI Learn wireframe excerpt
MIDI Learn workflow, zoomed out design
MIDI Learn workflow, zoomed in design

VARIOUS AUDIO EFFECTS

Many of Tabletop’s effects occupy a quarter of the screen, all based on a carefully considered system of proportions that account for graphic perspective, pre-defined button and knob dimensions, and in/out ports for signal routing. I conceived the initial suite of effects including their shared visual language, naming, and branding, while some later effects deviated to instead emphasize uniqueness and freshness as discrete in-app purchases.

Tabletop Ekko Delay, wireframe
Tabletop Filter effect, wireframe
Bit-Crush effect, wireframe
Autopan effect, wireframe
Various Tabletop effects, visual design
Various Tabletop effects, visual design