Frets 2 Keys

Assistive music application for guitar and piano players to translate between instruments and explore chords and keys.

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 instrument to efficiently 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.

Watch this video to see a demonstration

THE PROBLEM

What challenges do musicians face?

A lack of musical theory knowledge limits your ability to communicate as a musician

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.

Many learn through feel and listening not through formal training and reading

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 repetition.

Translating between guitar and piano is difficult if you don't understand how they are different

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.

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.

THE 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?

Getting initial prototype reactions

In 2018, a minimal version of this prototype was created shared with Reddit. It received a lot of comments and positive feedback about how useful people found it, but they would’ve liked it to have more functionality.

Next… to validate the new prototype

After building the application in Swift, another survey was created and shared through the same reddit avenues, and also my personal network of musicians.

Conducting the survey

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.

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 I get here?

FEB 2018

Print & Graphic Design

Wrapping my head around the 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.

MAY 2018

Processing Prototype

Making it interactive

I manually created those charts 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.

DEC 2019-JAN 2020

Adobe XD Prototype

Exploring different features and designs

At this point, I had gained a lot of experience with Adobe XD. I took my previous Processing 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!

FEB 2020

First iPad Prototype

Learning Swift and building

I debated using MAX, or making a web app, but eventually decided to use Swift despite never using it before. There were a lot of challenges that I faced but it was great working in an environment that affords the opportunity to build anything you can think of.

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.

MAR 2020

UI Improvements & Testing Feedback

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.