A VST synthesizer plugin that allows the user to easily create the sound they want by providing clear and informative visualizations for each parameter.
PROJECT TYPE
Synthesizer
VST Plugin
TOOLS
Figma
Adobe Illustrator
Adobe XD
MY ROLE
UX Designer
UI Designer
TEAM
Eric Uhde
Casper Loevenfald
Nikolas Joyce
TIME
May 2020 - March 2021
A majority of both professional and amateur musicians make music with music production software, which allows users to record sounds and play virtual instruments (commonly referred to as “VST Plugins”). One of the most popular kinds of plugin instruments is the synthesizer. Synthesizers allow musicians to create sounds from scratch and manipulate those sounds with a number of different controls.
Learning how to create sounds with synthesizers takes a lot of time and effort. Even after someone learns about all of the different controls on a synthesizer, creating sounds can still be an overwhelming and time consuming process. There are so many different controls on synthesizers and they all effect the sound of the synthesizer is completely different ways.
ABOUT PRIMER
In Brief
How might we help users understand synthesizer controls and how those controls affect the sound they are creating?
Design Challenge
Solution
We designed Primer, a VST plugin synthesizer that provides visualizations for each of the synthesizer controls. This helps create a more intuitive user experience, where the user is able to turn a knob or move a slider, and see exactly how it affects the sound that the synthesizer makes. With Primer, the user is able to program synthesizers in a traditional way, but the visualizations help the user conceptualize the sound they are creating.
Realtime visualizations for each synthesizer module and control
See exactly how your sound is being shaped with an interface that provides visual feedback in real time. Each module is color coordinated across the rest of the synthesizer, making it easier for the user to see how and where controls are routed
Drag and drop connections to controls
Primer allows to you drag and drop modulation sources to any control. This will highlight the control the same color as its modulation source, and will show how much the control is being modulated.
Quickly save and load presets
Creating and saving presets on primer is intuitive, and the preset page makes it easy for users to find exactly what kind of sound they’re saving or looking for.
PHASE 1
RESEARCH
Competitor Analysis
We first looked into the market to see what VST synthesizers people like to use, what they like and dislike about creating sounds on these products, and to examine whether these existing products can help users better see and conceptualize how sounds are being made and effected by synth controls.
We found that:
Most apps are lacking in visualizations and feedback that would help the user. Every digital synthesizer interface is modeled after the interfaces found on analog synthesizers, which also do not provide much visual feedback.
Ease-of-use / gentle learning curves and high functionality (e.g., wavetable editing, several waveform options, etc.) are not mutually exclusive. For example, Serum is generally considered a good synth to use for beginners because of the visual feedback it provides, while it also has the functionality and the technical features that experienced users want for the most part.
People need to search for each word they don’t understand, which takes time and effort.
Therefore, we hope to create a tool that can tailor to the needs of musicians of every skill level to help them quickly and easily create the sounds they want.
Surveys & Interviews
It was important for us to develop an understanding of the process users go through when creating a synthesizer patch and the differences between each user’s process. While there are obviously different levels of skill and experience, the nature of how someone creates a sound on a synthesizer can vary drastically between users. We also wanted to make sure we knew where in the process people are getting frustrated, and where people are able to have the most fun / feel like they’re most creative.
We first used a survey to help us narrow down our target user group and quickly learn about the most important features and the pain points that musicians encounter when creating a synth patch. We then conducted interviews to dive deeper into the problems users face when creating patches.
Insights
There is a notably broad difference between how each user approaches creating a synthesizer patch. Because of this, the issues and pain points that users run into are equally as broad.
One user might create sounds from scratch while another might choose a preset and tweak parameters, some users want to create sounds that are similar to analog synthesizer while others might want to make sounds that are only possible on digital synths, users have varying levels of experience, etc.
Despite the broad user base, there are a number of significant functions and pain points that are shared between different kinds of users.
Users need to be able to quickly save and load presets.
Users want to have the option to create patches quickly.
Visualizations and feedback help users better understand the sound of the patch they’re creating.
These insights made it obvious that we needed to narrow down our user base and focus our attention on something more specific. After conducting the interviews, our next step was to create an affinity map as a group to identify themes from our survey and interview data.
Affinity Mapping
To better understand how musicians use digital synths and identify potential problems, we invited some musician friends and coworkers to participate in affinity mapping sessions with us. We wanted to have a full picture of the different ways synth patches are created so we could brainstorm solutions based on our findings up to that point.
Key Takeaways
Based on our research, we were able to narrow down our user base to musicians who use typically use synthesizers as a supplemental instrument in their music, as opposed to the main focus of their music. This allowed us to focus on the needs of these users and distill and specify our most significant findings.
Our main findings include:
Users usually don’t like to spend too much time or effect creating sounds, and they prefer creating simple patches.
Regardless of skill level, users prefer visual feedback that allows them to better conceptualize how different synthesizer modules and controls effect the synthesizer patch.
It’s important for users to be be able to quickly load and save presets.
Users love to feel like they have mastery over their synthesizer of choice. Even though most users have multiple synthesizer plugins, they will almost always choose the synthesizer they are familiar with, rather that using different synthesizer plugins in different contexts.
PHASE 2
DESIGN
Ideation
Based on our research findings in mind, our team brainstormed solutions together. We attempted to come up with as many ideas as possible without considering feasibility at this stage. We then went through the ideas and discussed which of them would best support the main purpose of the application.
After our team completed discussing our ideas and distilling them down, I organized them into the following roadmap:
Our mind map was used to organize our ideas into a structure that would be helpful to reference during the rest of the design process. We also took the opportunity to brainstorm and refine some of our previous ideas. Eventually, we narrowed down our ideas to four themes that address our users’ concerns from different perspectives.
We settled on the following core functionalities:
Provide graphics for each module so users are able to see how each control effects the patch in realtime
Provide visual feedback that shows how much a control is being automated by a modulation source
Allows users to hover over a module, control, etc. to see more detailed information. Right click a control to see where it’s modulation source is
Each module is color coordinated across the rest of the synthesizer, making it easier for the user to see how and where controls are routed
Sketches & Wireframes
Casper and I created the following wireframes and brought a prototype to the users for feedback.
User Feedback & Revised Design Goals
All users liked the waveform windows and visual feedback that is provided when modulation is applied to a control. This was reassuring for us, since this was the function we focused on.
Helping Users Understand Their Synth Patches
Some users were confused about loading presets, since the preset selection is located in the Master module. Users were unsure of what kind of preset they were selecting- Does selecting a preset change the whole synth? Does it apply a preset to just the master section?
There were a few users that found it difficult to select a waveform when they first launch the synth. “Is there a waveform already loaded in that I can’t see?”
Some users had difficulty finding the control section for the oscillators and filter section. They thought that the controls for these section were separate from their relative modules.
With these insights in mind, we created a few more iterations of lo-fi mockups to refine the visualizations and information architecture issues until we felt confident to move on to the high fidelity design.
High Fidelity Design
For the first iteration, our primary goal was to validate whether the design helps different types of users create patches quickly and with ease, in a way that helps them understand the synthesizer controls.
What I learned
The most prominent thing I learned during the process of this project was how important it is to have a specific target user group. At first our user group was far too broad, even though we had the belief that it was particular and niche. The user behavior had too much variability because of this, and it made it harder for us to find exactly what users wanted. When we narrowed down our target user group, the direction we needed to go revealed itself through more focused user research.