App Product Design
Music Theory
Designing a simple visual reference tool to learn the foundations of music theory and playing the piano and guitar.
Services
UI Design
UX Design
Prototyping
Information Architecture
User Testing
UX Research
Team
Lead UX/UI Design — TJ Hari
Overview
Inspiration for this digital product came from a desire to learn how to play piano. After researching the basics of music theory, I was frustrated to find none of the apps or sites successfully included all the necessary information in one place. I found myself having a bad learning experience jumping back and forth, expecting to memorize too much information. I decided to create my own music theory app that consolidates the crucial information into one visual resource.
Challenge
The main challenge was to create a simple design system to visually distinguish between the musical concepts like the circle of fifths, keys, scales, modes, chords, and progressions. I needed to create a design system that is a simple, intuitive, and appeal to beginners learning music theory on piano or guitar. The user experience for the main content needed to include all the relevant information for each key on the same page in addition to navigate between key pages and swap back and forth between major and minor keys.
Approach
To establish a clear visual hierarchy I assigned 12 corresponding colors for each of the 12 notes in an octave. I paired those colors with their scales and chords. Another subtle visual motif was assigning shapes to each musical concept page. For major key pages which often sound bright and upbeat the background are white, for minor key pages that sound dark and somber the backgrounds are black. A experience designed to easily swap back and forth between piano, guitar, major, minor, relative, and parallel keys.
Managing the content is quite intense, the design needed to be rock solid before populating 8x across their respective 24 keys pages. It’s a meticulous, rigorous prototype and heavy production type project but it solves the issue which inspired the conception of the app.
Results
The Figma prototype is fully functional and interactive app experience, awaiting to find a developer to build and bring to the app to life.
I crafted a user experience that keeps everything clear, concise, and visual to help anyone learn the basics of music theory. The UI is designed to be deliberately simple and transparent the music theory concepts at the forefront.
My musician collaborators have tested and validated it’s a successful learning tool for playing music. The ability to navigate, compare, and breakdown the musical keys with ease.
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.
Scales
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.
Keys
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 .
Major & Minor Keys
-
![]()
Major
-
![]()
Minor
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.
Chords
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.
Progressions
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.
Results
The Figma prototype is fully functional and interactive app experience, awaiting to find a developer to build and bring to the app to life.
I crafted a user experience that keeps everything clear, concise, and visual to help anyone learn the basics of music theory. The UI is designed to be deliberately simple and transparent the music theory concepts at the forefront.
My musician collaborators have tested and validated it’s a successful learning tool for playing music. The ability to navigate, compare, and breakdown the musical keys with ease.