Although the previous version was an already powerful tool, it had a steep learning curve. We wanted to modernize the UI, improve feature discoverability, and create a unique interactive visual that you could use to creatively manipulate your sound.
Tools
01
Color Palette
#FAAF40
#DA7452
#61A1B9
#7155C7
#B860A0
Neutrals
A color was designated for each of the 5 unique modules. These colors were crucial for easily identifying controls and making the anemone visual in the center easy to understand.
02
Before
The skeuomorphic look & lack of visual hierarchy were an issue but the real problem was how in the past, each product was created with a one-of mentality and UX consistency was non-existent. We solved this by using standardized components from the Suites Kit I created for the team.
03
The Anemone
The centerpiece of the UI is delightful to watch and easy use. Simply move the nodes up/down and watch as audio-reactive waves affects your sound. The anemone displays how many modules are on, their intensity, and lets you effortlessly mangle your audio.
04
Broad to Fine Control
By default, we only show controls that 80% of users will interact with and tuck away advanced features. Each module has an advanced panel that allows power users to tweak synth engines, filters, and get into the nitty gritty.
05
UI Implementation
I worked directly with devs in Git and implemented the UI using an in-house design tool that allows you to edit the product in real-time. More specific tasks required digging around in Xcode and editing C++ myself.
VocalSynth 2 launched successfully and is used by world renown musicians such as Madeon, Disclosure, Zedd, and much more. To this day, it is one of the most powerful vocal processing tools available.
