Visual Tool For Understanding Music Theory

Designing a simple reference tool to help learn the foundations of music theory and playing piano.


It all started with impulsively buying a mini keyboard for fun. Then quickly realized I don’t know anything about playing or writing music. After researching music theory I felt like all the information I needed to reference was overcomplicated and not all in one place. I decided to make my own visual resource for learning. Created a user experience that keeps everything clear, concise, and visual, to help anyone while learning music theory or playing the piano.


UX Research
UX/UI Design


Breaking down the basics of music theory into the most crucial elements for playing, writing, practicing music into the 5 core navigational elements for informational architecture. These are further expanded visually into each individual musical key pages. The user experience has nice balance of understanding/studying one basic concept and how they all five concepts work together. It also allows users to compare all the basic chords, notes, inversions, scales, intervals, modes, and borrowed chords are in one place for all the 24 basic musical keys.

UX / UI 

The UI was deliberately designed to be simple and transparent. The music theory information is at the forefront of the design. The UX is designed to allow users understand/study the 5 basic concepts of music theory and how they all work together in all 24 basic musical keys. It allows users the ability to navigate and compare the breakdown of the musical keys with ease.


The home page gives users an overview of all 5 elements that make up the foundation of music theory. Giving them the power to discover any key with circle of fiths. Create and improvise melodies with scales. Memorize and compare relative and parallel keys. Play the basic triads chords are built from and even spice them up with more complex chords. Taking those chords and writing beautiful chord progressions for the foundation of a song. Ultimately giving users the musical confidence to dive in and start playing.


This comparison swap button allows users to go back and forth to understand the differences and help memorize the patterns. Parallel scales start on the same note but have different notes throughout the scale. Relative scales have the same notes but starting note is different because they infact are in a different key. C major and C minor are parallel. C major and A minor are relative.


These major pages give the ability to navigate between musical keys and immediately see understand and compare the keys with each other. All the chords, notes, chord inversions, intervals, scales, modes, and borrowed chords are in one place.

All of this information helps tremondously useful when trying to learn or write music on piano. Beginners can easily play the chords just by looking at them. Advanced players can look up the notes in a phrygian mode or find a secondary dominant chord to add to their chord progression.


Playing chords using different intervals can help the music sound and play smoother. These key pages assist users in compare the root position, 1st inversion, and 2nd inversion in all the basic 24 chords. That’s 72 inversions to memorize and practice and 432 chord inversions to prototype for these pages… 


The minor pages are slightly different in design because minor key tends to sound sad. Using black backgrounds, swapping header alignment, and leading with minor chords. This gives users another layer of understanding these minor keys are different visually and sonically. Same experience and ability for users to navigate between musical keys and immediately see understand and compare the keys with each other.


Side by side chord comparison to help identify which notes make up the more complex chords starting from the basic triads. Great reference for users who are looking to spice up their chord progressions with a Dominant 7th chord. Also useful for practicing and memorizing the patterns which chords are built from.


Essentially the same user experience on desktop would be scaled for the same mobile friendly experience. Simplifying the content to become more of a quick reference tool making it easily accessible for looking something up like D Major Scale or the 5th Chord in the F Minor Key. 


This little personal project turned into a massive amount of work. Not only to understand music theory but create a visual tool to use as reference while playing, transcribing, or writing music. I’ve shared this project with some musicians and they praised the experience and wished they had something like this when they first started. It’s been tremendously helpful and fun to make and practice all the patterns that makeup music theory.


Fast Casual Restaurant Rebrand


Experience & Capabilities


Shoot me a message


Privacy Settings
We use cookies to enhance your experience while using our website. If you are using our Services via a browser you can restrict, block or remove cookies through your web browser settings. We also use content and scripts from third parties that may use tracking technologies. You can selectively provide your consent below to allow such third party embeds. For complete information about the cookies we use, data we collect and how we process them, please check our Privacy Policy
Consent to display content from Youtube
Consent to display content from Vimeo
Google Maps
Consent to display content from Google