2020 - 2021

Preset System

Emily In Paris

Summary

As Slate Digital shifted its focus towards catering to the latest generation of music producers, our goal was to create intuitive tools that met users where they were in their creative journey. We prioritized the integration of Presets, recognizing them as a powerful means to provide instant, professional-grade settings to users of all skill levels. As UX Director, I led the effort and designed a visual reference library for these presets, seamlessly integrating them into Slate Digital's plugin ecosystem.

My Role

Responsible user experience design, ideation, interaction design, user interface design, prototypes

Team

Jordan, Co-Designer

Chris, Production

Thanos, Product

Problem

With a shift towards a younger demographic and a change in strategy for GUI design, there was a need for a fresh approach to presenting and engaging with presets. Slate Digital needed to establish a uniform, flexible, and valuable system that worked across various plugins with diverse utilities. I led the UX and UI design create a user-centric solution that streamlined plugin complexity, aligned with the new demographic focus, and provided a unified and adaptable user experience.

Early Research & Ideation

During the early UX research phase, I initiated a comprehensive evaluation of Slate Digital's existing plugin portfolio to inform our design and development strategies. Here's an overview of the key steps and considerations:

1. Plugin Inventory and Feature Analysis:

  • We began by compiling an exhaustive inventory of all the plugins that Slate Digital had released up to that point. This involved documenting each plugin's name, category, and the features included in their respective menus.
  • Since user analytics were limited at that time, we heavily relied on alternative sources of user insights, such as feature requests and support tickets. These resources proved valuable in understanding user pain points and identifying frequently used features.
Screen Capture of Slate Digital's Virtual Analog Plugin
screen capture of repeater plugin that utilizes low priority preset browser functionality

2. Future Plugin Roadmap:

  • We closely examined our planned schedule of upcoming plugins and their intended release dates. This analysis allowed us to anticipate the features that would be required for each new product.
  • Our goal was to identify recurring user needs across different plugins, as well as any unique features specific to individual products. This step was essential in shaping our product development strategy.
beginning of Slate Digital's timeline of product releasesending of Slate Digital's timeline of product releases

3. User Segmentation and Demographics::

  • We acknowledged that Slate Digital had two primary user groups, each with distinct needs and preferences.
  • To better understand our target demographic, we conducted research into the preferences and behaviors of our users. We also looked at similar plugins in the market that resonated well with this demographic.
  • By identifying recurring features and interactions in plugins preferred by our target users, we gained valuable insights into the expectations and desires of this group.

Approach & Theory

I soon recognized that our plugins fell into two distinct categories: those requiring a streamlined, lower-priority preset browser and those demanding a comprehensive system for preset organization and search. Regardless of the plugin's purpose, they were all part of Slate Digital's larger ecosystem of tools. Our primary aim was to ensure that both types of plugins felt intuitive to users, with consistent features, locations, and visual design. This approach allowed users to maintain a sense of familiarity when working with either category, eliminating the need to relearn how to manage presets between the two.

Lower Priority
For smaller plugins that didn't heavily rely on multiple presets, we employed a dropdown menu element positioned in the top left corner. This menu featured cascading folders for organization. This approach was particularly suited for projects like Fresh Air, where the limited number of controls meant that recalling settings for each knob held significantly lower priority.

Preset browser from Fresh Air plugin as an example of low priority preset browser functionality
Logos of Slate Digital products with the low priority preset functions

Higher Priority
For plugins with numerous controls and steeper learning curves, we emphasized the Presets feature. Also, located in the top right corner, it offered preset names and an icon that could display or hide an expandable area pinned to the left, enabling advanced functionalities like word or phrase search, tags, group selection/ actions, favorites, and preset descriptions.

Preset browser from MetaTune as an example of a plugin where presets are a high priority

Design & Prototyping

I spearheaded the UX design and prototyping efforts to outline the interactions for every feature within the preset functionality. Given that our development team was located thousands of miles away in a different time zone, clarity in our designs was of utmost importance. We presented each feature through a screen-by-screen flow, with initial animations and transitions integrated for a comprehensive understanding.

Phrase / Word Search
The user has the ability to enter the search menu and click the search field, allowing them to enter keywords, or phrases to filter search results — for both folders and presets.

GIF showcasing how the user can perform a search within the preset library based on character input

Tag Search
All search filter parameters would exist within one dropdown connected to the search field. This saves real estate in the confines of an already fairly small area. The user can turn on and off various tags to achieve specific filtered results narrowing down presets accordingly. The UX emphasizes filtering over phrase searching when the user engages with the filter controls.

GIF showcasing how the user can perform a search of preset using tags

Default Preset

Gif showcasing the how a user can engage with the preset menu to set a default preset on initial plugin load

Search Folders

GIF showcasing the user's ability to search within a specific folder vs the entire preset library.

Phrase / Word Search
The user has the ability to enter the search menu and click the search field, allowing them to enter keywords, or phrases to filter search results — for both folders and presets.

image showcasing how the preset interface look once it's been opened (or if the plugin is loaded with the preset browser open already)

Initial

arrow indicating the user has moved to the next step of the interaction
image showcasing how the search bar once the user has clicked the search icon in the preset browser menu

Open Search

arrow indicating the user has moved to the next step of the interaction
image showcasing the results based on a hypothetical word being entered into the search field

Enter Phrase

GIF showcasing how the user can perform a search within the preset library based on character input

Tag Search
All search filter parameters would exist within one dropdown connected to the search field. This saves real estate in the confines of an already fairly small area. The user can turn on and off various tags to achieve specific filtered results narrowing down presets accordingly. The UX emphasizes filtering over phrase searching when the user engages with the filter controls.

image showcasing how the preset interface look once it's been opened (or if the plugin is loaded with the preset browser open already)

Initial

arrow indicating the user has moved to the next step of the interaction
image showcasing how the search bar once the user has clicked the search icon in the preset browser menu

Open Search

arrow indicating the user has moved to the next step of the interaction
image showcasing the how the interface respond to the the user hovering the tags button within the search field

Hover Tags

arrow indicating the user has moved to the next step of the interaction
image showcasing the tags menu once the player has clicked on the tags button within the search field

Click Tag

arrow indicating the user has moved to the next step of the interaction
image showcasing a highlighted menu once the player has clicked on (a) tag(s)

Results

Tag Search

GIF showcasing how the user can perform a search of preset using tags

Default Preset

Gif showcasing the how a user can engage with the preset menu to set a default preset on initial plugin load

Search Folders

GIF showcasing the user's ability to search within a specific folder vs the entire preset library.

Outcomes

The initial system, designed in 2019, stands as a testament to its enduring flexibility and empathetic approach. Remarkably, the company has steadfastly adhered to this design across the eight subsequent product releases. Even though I have moved on from the Slate family, I continue to be excited about the upcoming projects I contributed to, which will soon hit the market, continuing to leverage this enduring design philosophy.

You can experience this system in action across various products, including Infinity EQ, MetaTune, Fresh Air, MO-TT, Infinity Bass, Murder Melodies, FGX2and Storch Filter.

Favorite Parts

One of the most enjoyable aspects of this project was the hands-on collaboration with our agile team. With just two weeks at our disposal, we ideated, prototyped, and finalized designs. We embraced a scrappy and unconventional approach. Collaboration was key, and we found ourselves working together on nearly every aspect of the project, resulting in not only successful outcomes but also too many enjoyable moments and shared laughs to count.

What I Learned

In an industry where user experience is still evolving and companies often rush to replicate each other's missteps, I found it particularly enjoyable to draw inspiration from proven UX examples outside the realm of music production technology and apply them to enhance the way users interact with Slate Digital's products.

Given that many of our users are Apple computer owners, we turned to familiar experiences within the Apple ecosystem, referencing MacOS and iOS search fields. This approach aimed to establish a more direct connection with experiences our users already find intuitive and user-friendly. My dedication to leveraging external UX insights brought a fresh and effective perspective to our design process, ultimately benefiting our users and the success of the project.

I discovered that there is always a point of reference available, provided we possesses the creativity, diligence and foundational knowledge to identify correlations between different experiences.