Shatter -
a scales/chords VST plugin to prevent writer's block
Role:
• User Research
• UX Design
• UI Design
The Problem
In the digital age, producers can now make full-scale productions without any background in playing an instrument or taking classes in music theory due to the immense amount of tools that are out in the market. While these tools provide a ton of value to their users, there are often times where producers can not flesh out an idea to the extent that they wish due to a lack of understanding when it comes to music theory. This idea was a pet project I had that to design a VST (virtual studio technology) plugin to help producers achieve their goals when it comes to chord progressions and scales within an arrangement without having to kill their creative workflow and go to an alternative source to learn a scale. The goal is not to write a song for a producers but to assist them in learning about more chords and scales and to provide chordal and arrangement ideas that help producers overcome or "shatter" dreaded writer's block or the struggle to find that 'perfect' chord.
User Research
Because this is just an idea I hatched based upon own experience as a producer with zero traditional knowledge of playing a keyboard (or in my case a MIDI controller) the first component of the research phase was validating product/market fit and understand if other producers are held back from their lack of knowledge when it comes to to chordal arrangements and scales on a piano.
Survey:
I sent out preliminary surveys to all of my peers who are involved in music productions (both hobbyists and professionals) in order to discover whether the concept is valid. I received 62 responses with 84% of respondents reporting that they expressed a need to improve their understanding of chordal theory to help their production quality. In addition to validation, I also wanted to get an understanding of what soft-synth producers use the most often in their projects. 'Serum' and 'Massive' were overwhelmingly the most popular synths with 66% percent combined usage.
User Interviews:
I conducted user interviews in order to dig deeper into the workflows of producers and understand the attitudes and behaviors of how they work within a DAW. What I was trying to understand was how they prioritize components like sound design, composition, and mixing/routing in order to understand how I would go about building the synth from a userflow standpoint and where the education component would make the most sense from a location standpoint.
"I started from making hip-hop beats so I am comfortable with chopping samples but learning the music theory side is still a struggle for me and can slow down my workflow at times."
- John (Ableton Producer)
I then created some quick personas based on my feedback from my survey and five user interviews. While I personally feel that the effectiveness of personas tends to vary based upon the problem and initial understanding of said problem, in this case they seemed very useful because I didn't want my own, admittingly strong, bias' to get in the way during the design process. The goal of the personas was to humanize the design process and set a clear reminder of needs, pain points, contexts and behaviors.
User personas based upon interview feedback. 'Mike' is the primary persona.
Comparative Analysis:
Next I focused on the products already on the market that have similar functionality and purpose and compared their layout, features and general workflow from a heuristic standpoint. I focused on content layout specifically in order to understand which types of UI flows from a modular standpoint work best. I then user tested some of these products (I downloaded free demos if available) with some of my friends who produce to attain an understanding of what works and what falls short. The biggest takeaway was that there was a significant lack of clarity when it came to copy and labeling and the only app who's layout really supported the functionality was Reason's Chords and Scales plugin. Users were able to understand how creating scale parameters has an effect of the chord out significantly quicker due to an intuitive "left to right" approach when it comes to features with parent>>child relationships such as creating a scale setting to create chord selections.
Comparative document for content layout and takeaways.
In addition to comparative analysis of similar products, I also conducted a makeshift usertesting session where I asked my friends who produce and compose music to demo some of the producers just to get some feedback outside of my own personal preferences. I wound up settling with Reason Chords and Scales, Suggester and Cthulhu as the three apps I tested with since they were the closest to what I am trying to build and the easiest to get hold of. The key takeaway was that using elements such as color to section of different blocks of content played a HUGE impact on the ability for users to understand how to use the interface. Reason does this very well and suggester executes this to an extent (but since they are an iOS app there are more page jumps instead). Users were able to understand the basic logic of the chord module in Cthulhu after 3-5 minutes of acclimation but none out of the 5 grasped this understanding instantaneously. Suggester performed the strongest in terms of task success and time taken per task but it has by far the most basic functionality. Users were able to pick up the core features of Reason's Chords and Scales within 3 minutes but it took longer to understand how it worked with the sequencer. However, those features are secondary so I viewed this plugin as a success.
Next, I began to synthesize these results to prepare for design concept. I realized that layout in the UI was of the utmost importance for this project since the biggest user hurdle for the plugins/apps that I tested was how each part of the UI worked with the other components and the relationships that they have with one another from a parent > child perspective. These relationships were often lost at first and it had to take a good deal of tinkering around until the results became intuitive. The other key takeaway was how a successful product in this realm hits a balance between giving the users insight on the chords they are being suggested/lcoked into versus giving them plenty of options in an intuitive manner. How these options are 'bundled' plays a huge part in how quickly a user will engage with a particular feature.
Design
Design for this project began with concept sketching. While user research gave me a ton of insight I still didn't quite know what I was tangibly going to be designing. I began playing with the idea of combining the chord/scale plugin within an VST synth but figured to scale back in order to get the chord/scale component correct. Early sketching was around the idea of having a robust chord building feature with a simple scale set-up. Instead of just adding an 'alter' feature I included 'genre' buttons in order to allow users with no music theory background, the ability to create chords based upon the genres that they prefer. Eventually I wound up keeping this concept but felt as though buttons were not the correct UI element for selection because it gave too little context regarding the names of the chords in case a user does know some music theory. I wound up changing this element to a matrix selection grid listing multiple chord options via scrolling.
Some VERY ROUGH early sketch concepts with annotations so I remember what I was thinking at the time.
3 iterations of wireframes based upon user feedback and evaluation with annotations.
For the UI design, I found that having a dark background is a more welcoming UI treatment than the white background I initially played with and completed the green toggle and knob elements due to stronger contrast. Purple was a natural fit int he scheme. I initially played with orange and reds for the "off" and "unlocked" features to show users that the relationship between the scale and chord is essentially 'broken' but wound up with a dark gold to match the palette in a stronger manner. For input fields, I wanted the designs to be as light as possible so I went with flat borders with no fill in a light purple that still contrasts with the background in strong manner. I want the golds and greens to shine because there is an important relationship for what they represent I would like that to be as clear as possible.
Status
This is a pet project that I am doing for fun so the process will continue to be ongoing. Currently, I have an engineer buddy of mine to look over the level of effort for creating a prototype using popular C++ VST platforms such as JUCE and Supercollider to see how feasible it would be to prototype this. In addition, I am iterating on the UI design in terms of colors, layout, copy (NEEDS improvement) etc. and figuring out which features should be implemented next through continuous testing of apps already on the market. Stay tuned!