Building A Unified Music Theory Learning Resource
Bringing music concepts together turning theory into color and sound, so musicians learn by eye and by ear.
Scope
I owned the concept, design, and testing of a music theory app. I validated the problem with musicians across disciplines, then tested the design with musicians and educators from Berklee College of Music. Their feedback shaped the product, I built with Claude Code.
Role
Timeline
Product Designer
6 Months
Contributions
Usability Testing
UX and Visual Design
Claude Code
Outcomes
Tested with Berklee educators
Shared by educators with students
Sound added to every page
Problem
Too Many Sources,
No Single Solution
In my research, I kept struggling to connect music theory across a variety of resources, and interviews with musicians across disciplines showed I wasn't alone. I combined the best of those resources into one intuitive tool that shows how the concepts connect.
A Visual Language
That’s Built On Color
Every note has its own color, carried through every chord, key, scale, and progression so musicians recognize a note before they read it. Major pages sit on white to match their brighter sound; minor pages flip to black to match their darker mood.
Navigating Key Relationships
Circle Of Fifths
I designed the circle of fifths as the heart of the app, where every key is interactive and plays its chord sound on tap. Hearing each chord while navigating turns an abstract diagram into something musicians can explore by ear, not just read. It is a powerful tool for understanding the relationships between keys, chords, and scales in music theory. Using the major and minor legend, musicians can move through related keys and start writing their own progressions.
Guided Exploration
AI Driven Search
Search lets musicians ask questions or explore music theory concepts in their own words. It uses AI to pull from the app's content, recommending scales, chords, keys, and progressions while explaining the reasoning behind each topic. I used conversation design frameworks to shape how those responses are structured, so they build understanding in the moment rather than just referencing patterns or rules.
Cross Instrument Comparison
Scale Pages
I built scale pages to show every major and minor scale on both piano and guitar, with a toggle to switch instruments side by side. I added the ability to compare parallel and relative keys so musicians could see how major and minor relate rather than learning each scale in isolation.
The Building Blocks
Chord Pages
Chord pages present the 24 basic major and minor chords in a simple, consistent form. I designed each chord to show exactly where to position your fingers on the guitar frets and piano keys. Two toggles let musicians switch between instruments and between major and minor chords, making it easy to compare how the same chord is played.
Beyond The Basics
Key Pages
I designed key pages as a quick reference for finding the chords within any major or minor key. Swapping between keys is simple through the mobile dropdown or desktop sub navigation, giving quick visual access to any key. Each page also goes deeper than the basics, covering note intervals, scale modes, chord inversions, and borrowed chords for musicians ready to explore a key more fully.
Browse, Filter, Play
Progressions Pages
Progression pages are a library of chord progressions musicians can browse in one place, with filters to explore from simple to more complex progressions. Each chord plays its sound when selected, so a progression can be heard in the app before playing it live. Swapping between keys is the same consistent experience as the key pages.
Results
This product started with a problem I kept running into, a struggle to understand music theory concepts from a variety of resources. I saw a need for a product experience that brought those concepts together in one solution. By grounding the design in a consistent color system, interactive sound, and consistent UX patterns, I created a cohesive experience where musicians can explore basic music theory concepts all in one place. After testing and iterating the product with music educators, they validated its value by sharing it with their students. The app is now in development, a sign that thoughtful design turned a common problem into a resource musicians find genuinely valuable.