Igor Lanko's avatar Igor Lanko

Output Portal, granular FX plugin

During my time at Output, I was fortunate to work along with Neil Hallimen and Daniel Lepik to bring an amazing product concept they designed into a digestable UI ready for programming.

My role

UX design: Advanced tab, Preset browsing, activation flow, and utility UIs, development handoff.

Set goals

Turn an amazing visual concept into programmable software state.

Result

Functioning Figma prototype that sped up the dev process;

Online & offline activation flow thought through and built;

Features cut out due feasibility;

Critical error handling cases designed;

Product launched, sales started.

Timeline

A few months in 2019

What is a granular FX plugin

Output has a proper explanation, but the TLDR is it takes your sound signal and cuts it into smaller grainy pieces, creating space between them. That obviously changes how you hear the sound.

Here’s a good demo:

Sound on recommended.

Reworking Advanced mode & Presets browser

Daniel designed the entire plugin in Cinema4D. For better team accessibility and state management, I brought this all into Figma.

As the most visually complex page of the plugin, went through a dozen of iterations trying to find the balance between overcrowding the UI and fitting all the controls in.

Creating components

To prepare the concept for the programming stage we used Figma to write component documentation for all the styles, possible states and variants. Essentially synthesize the atomic design of the plugin. Mind you, that was before Figma’s component properties feature.

Portal's component frames created in Figma.
Portal's component frames created in Figma.

Disclaimer

Some pieces of work presented may not display the current state of the product. All rights to the media content presented belong to Output, Inc.