Project
Frets 2 Keys
Role
Solo project
Time
2018-2020
Medium
Web app (SaaS)
INTRO
So, what does the application do?
Input chords and translate
You can input a chord on either instrument and it will be translated to the other to quickly see how to play it.
Hear what chords sound like
Select any combination of notes, and click the play button to hear them. You can play all the notes at once, or arpeggiated.
Explore keys and chords
Choose from all 12 major keys, and see the chords within them. Also choose additional types like 7th, suspended, etc.
Learn about keys and chords
When you have selected a key, it will tell you all of the chords. Additionally, it will tell you which degree of the scale each note is associated with, and will be colour coded accordingly.
THE PROBLEM
What challenges do musicians face?
01
A lack of theoretical knowledge can limit communication
A lot of musicians, particularly guitar players, are lacking in musical theory knowledge. A lack of understanding makes it challenging to translate what you are playing to other instruments, or other musicians.
02
Many learn through feel and listening, not formal training
Many people learn in different ways. If you are learning guitar or piano by reading music, you must learn how to read the notation, interpret it, and understand how it relates to your instrument.
For standard notation, there is no visual correlation that shows you where certain notes or chords are on your instrument. That is a skill that has to be learned through a great deal of repetition.
For standard notation, there is no visual correlation that shows you where certain notes or chords are on your instrument. That is a skill that has to be learned through a great deal of repetition.
03
Translation between instruments is difficult
Translating between guitar and piano can be quite daunting if you are not familiar with both instruments. Each note on the piano only exists once, however, on the guitar, majority of the notes are repeated in multiple positions, and the pitch difference between strings is irregular and can be changed.
This difference in functionality between instruments makes it challenging to translate between instruments.
This difference in functionality between instruments makes it challenging to translate between instruments.
CONTEXT
Why is piano important?
It covers all the bases
It is laid out sequentially, and spans the frequency range of almost every other instrument.
It affords new opportunities
It is invaluable for all musicians to learn how to play piano even moderately well. It is a great tool to organize and arrange your compositions.
Here is an example of the frequency range of a piano relative to other popular instruments
DEMOGRAPHIC
Who is interested in this?
Intermediate Musicians
Want to learn more about their instrument through exploring new keys and chords.
Multi-instrumentalists & Song writers
Want to take the chord progressions they are playing on one instrument, and translate it to another, or to other musicians.
How do we know people are interested?
01
Initial reactions from Prototype Version 1
In 2018, a minimal version of this prototype was created and shared with Reddit. It received enough attention to validate interest in this concept (600+ up votes and 50+ comments). Numerous people commented stating they found it to be quite useful, but overall the consensus was that it needed more functionality.
02
Gaining insights from a more polished prototype
After building the application in Swift, another survey was created and shared through reddit again, and also my own personal network of musicians.
The survey explained several of the features of the application and showed examples of what they would look like while being used. Participants were asked to rate how useful they would find the individual features, as well as the overall application based on a 5 point Likert scale.
The survey explained several of the features of the application and showed examples of what they would look like while being used. Participants were asked to rate how useful they would find the individual features, as well as the overall application based on a 5 point Likert scale.
03
Validating the new prototype
Overall, out of the 45 participants that took the survey, 85% state that they would find the app useful. This proved to be enough of a sample size to show that there was still a demographic of people that wanted this and would find it useful.
THE PROCESS
How did we get here?
Wrapping my head around this concept
I built these 12 individual charts for each major key. This was the initial attempt for me to visualize this information. At this stage, I was creating this for myself, and hadn’t though about the fact that other people might want it.
Bringing all the keys together
I decided to create a large poster with all 12 of the individual keys I made, and 1 master chart in the center. I put this big poster above my piano as a reference as I was learning piano, to help me translate from guitar to piano.
Making it interactive
I manually created those charts above in Illustrator which took a lot of time. They were great for getting my idea together, but this prototype was my first step into trying to make this idea more interactive and allow for more freedom and flexibility for the person using it.
Exploring different features and designs
At this point, I had gained a lot of experience with Adobe XD. I took my previous prototype framework, and began exploring different features as well as different ways of organizing and displaying this information.
Testing and feedback
I tested this prototype with 5 users, and although it was well understood, it was limited in its ability to adequately represent what the full application would do. So, I needed to build the real prototype next!
Learning Swift and building
I decided to use Swift despite never using it before. There were a lot of challenges that I faced but I really enjoyed using XCode and writing in Swift.
A great start, but improvements still needed
This was the prototype that was used for the next round of testing. It was great to get some of the core functionality working like choosing chords and keys, as well as selecting individual notes on the instruments.
Overall, the prototype was well understood, however there were some great points of feedback used to improve the next iteration, which I will break down below.
Overall, the prototype was well understood, however there were some great points of feedback used to improve the next iteration, which I will break down below.
Modified the visual language
Some of the participants mentioned that it was difficult to tell which fret was which at a quick glance. So, the individual notes were separated into smaller boxes. Also, horizontal strings were added as well as vertical fret grooves. After testing this version, participants found it much easier to understand which fret was where.
Reworked the colour scheme
The colour scheme was lightened from a dark to a lighter one. Participants were having a difficult time discerning between notes that were active and notes that were not. Additionally, colour was removed from the active notes by making them gray and to only put prominence on notes that are actively selected.
Used colour for a different meaning
Initially, colour was used to convey octaves. Two different participants mentioned how it would be useful to see the degrees of the scale in a key, and potentially have colour signify those degrees. The colours were modified to have a rainbow spectrum of colour to show each degree.
Added more chords
This was always the plan from the beginning, but it proved to be more challenging than anticipated. The way that chords were stored had to be re-structured. Previously, an array was used in each Key class that held the 7 main chords in the key. However, this proved ineffective as there are obviously more than 7 chords in a key. So, a master dictionary was created that held all the chords, and instead, that was used as a reference for all chords.
KEEP EXPLORING
