Product
Building A Unified Music Theory Learning Resource
Bringing music concepts together into a visual tool that helps musicians see how theory applies to what they're actually playing.
Services
UX Audit
Competitive Analysis
Wireframes
Interactive Prototypes
Design System Components
Design QA
ADA Compliance
A/B Testing
Team
Product Designer — TJ Hari
Engineer — Alex H.
Overview
While learning piano, I struggled to find a single digital resource that made music theory concepts actually usable while practicing. I'd find myself juggling multiple apps, one open for the circle of fifths, another for chord progressions, constantly switching back and forth just to understand what I was playing.
After talking with other musicians, I realized this wasn't just my problem. I built a prototype that organized these music concepts visually and tested the experience with musicians and educators. Two music educators wanted to share it with their students, which validated the prototype and has led me to develop it into a full product.
My Role
As Product Designer, I was responsible for creating an intuitive learning experience that made music theory accessible to beginner musicians.
I designed user flows, wireframes, and prototypes that translated complex musical concepts into clear visual systems. I collaborated with musicians and educators to validate design decisions through testing and iteration. My focus was ensuring the experience empowered musicians to understand theory while practicing, rather than memorizing patterns.
Designing The Solution
Circle Of Fifths
The circle of fifths is a powerful tool for understanding the structure and relationships between keys, chords, and scales in music theory. Using the major and minor key legend anyone can find key signatures to create chord progressions and understand how the keys modulate clockwise.
Designing The Solution
Scale Pages
Scale pages have the notes for all the major and minor scales on both piano and guitar which can be toggled back and forth for comparison. Useful for deeper understanding of how to transcribe a musical piece or song from one instrument to another. This could be further expanded to additional instruments.
Designing The Solution
Key Pages
All the colors were deliberately chosen to belong to their respective note, scale, key, or chord. These key pages are simple visual list for quickly finding the chords within each major and minor key. The comparison swap button gives access to go back and forth between parallel and relative keys and major and minor to understand the differences.
Designing The Solution
Chord Pages
All the chord pages will showcase the basic 24 major and minor chords in a simplistic form. Again the swap button makes it simple to compare the differences between major and minor in addition to understanding how to play the chords on both piano and guitar.
Designing The Solution
Chord Extensions
Additional more complex chords are accessible with tabs. These pages include all the notes in the scale that make up these chord extensions and how to play them in all the basic major and minor keys. Once it’s understood the basic chords are just a foundation everything is built it opens up a lot of possibilities in music.
Designing The Solution
Progressions Pages
There are no rules in playing music but these act as great outline for the major and minor formulas for creating chord progressions. Also including the tonic, subdominant, and dominant chords based on the chord progression is helpful in creating tension and release for a chord progression that’s less common.
