React · Vite · HCI · User Research
More Rocks
An interactive guitar-learning platform, built through a full Human-Computer Interaction design process, that helps players understand chord inversions instead of just memorizing shapes — the tool I wish I'd had over 15 years of playing.
The final design direction — categorized sidebar, Circle of Fifths, and a live chord/scale readout, arrived at after six rounds of iteration.
Overview
I've been playing guitar for about 15 years, and for most of that time I could play plenty of songs without really understanding what I was playing. The breakthrough came during a lesson when I finally understood how chord inversions and arpeggios connect to everything else on the fretboard — it changed how I saw the instrument. Most tools out there teach you to play a song (tabs) or solo over a scale, but almost none help you understand why a chord works the way it does or how it moves across the neck.
More Rocks is my attempt to build that missing tool: an interactive fretboard where a guitarist can select a chord, see its inversions, highlight a scale over it, and understand the relationship in real time — rather than memorizing a diagram out of context.
Selecting a chord highlights every occurrence of it across the neck, with notes and degrees shown below.
Interactive fretboard visualization
Clicking a note or chord highlights every place it appears on the fretboard, color-coded by scale degree. Chords and scales can be highlighted at the same time, so overlapping notes — the actual substance of "why this works" — are visible instead of implied.
- Root, third, fifth, and extended tones shown as distinct colors
- Chord and scale highlighted simultaneously to expose shared notes
- Low-fret navigation to shift the visible window up and down the neck
Three complementary ways to find a chord: sidebar categories, quick buttons, or the Circle of Fifths.
Three ways to find a chord
Different players think about chords differently, so the app doesn't force one path. A categorized sidebar (Chords, Scales) supports browsing; quick buttons support fast recall of the current chord; and the Circle of Fifths supports finding a chord by its harmonic relationship to what's already playing — genuinely useful once you're thinking in terms of functional harmony rather than a fixed list.
- Sidebar browsing by category
- Quick chord/scale buttons for the current selection
- Circle of Fifths for relationship-based selection
Saved chords sit in a playlist for instant recall while building out a progression.
Playlist for building progressions
Once a chord or scale is useful, it can be pinned to a playlist — up to four at a time — for instant recall without re-navigating the sidebar. It's built around a real practice scenario: exploring a C major scale and its inversions, noticing an F7 that fits nicely, checking a D5 and a G minor, and ending up with a curated sequence to actually play through.
- Pin up to four chords or scales
- One click to recall a saved item on the fretboard
- Supports comparing saved progressions side by side
Process
This was built as a full HCI project, not just a coding exercise — the design came from research and testing, not just intuition.
Research. Existing tools split into two camps: tab sites like Ultimate Guitar teach you to reproduce a song, and interactive fretboard tools like Fretastic or chord.rocks are good references but stay at the level of "here's a shape," rarely explaining why chords relate to each other. Hardware options like Fret Zealot add cost and complexity. Private lessons work well but run up to $50/hour in Toronto — out of reach for a lot of learners who'd otherwise practice on their own between sessions.
Fretastic — full-featured, but mobile-first and dense with controls.
chord.rocks — a solid reference tool, but a lookup, not a teaching tool.
Talking to my old guitar teacher and to my mom (a beginner) shaped the direction early on: my teacher wanted something that could show related scales and chord variations on click; my mom wanted something simpler — just a way to see where chords come from and how they connect. Building for both meant a desktop-first, uncluttered layout rather than the dense mobile UI most competitors use.
Design iteration
The design went through six rounds, from paper sketches to a high-fidelity Figma prototype, before implementation started in React.
An early digital prototype, testing left- vs. right-sidebar placement.
A simplified pass, stripping the layout down to just the fretboard and current selection.
Later iterations settled on a single, always-visible right sidebar, a consistent black background so colored notes stand out, and the Circle of Fifths as a permanent fixture rather than an optional panel — the combination that made it into the final build shown above.
Usability testing
Two rounds of testing shaped the final design: an early round on the low-fidelity prototype, and a second, measured round on the high-fidelity build.
Round one (low-fidelity). Participants understood the visuals but stumbled on vocabulary — several didn't know what an "inversion" was going in, which showed up directly in task time and confidence. The clearest, most consistent request was some form of guidance for first-time users.
Round two (high-fidelity, timed). Advanced and intermediate users completed core tasks — selecting a chord inversion, changing a scale shape, saving and recalling from the playlist — in 18–45 seconds with close to zero errors, and rated the app 4–5 out of 5 on clarity and enjoyment. Beginners took noticeably longer (55–75 seconds) and made more errors, and weren't able to complete every task unaided.
That gap — strong for intermediate/advanced players, rough for beginners — directly shaped what got built next: onboarding highlights that flash the sidebar and auto-select a C major chord for first-time users, and a color legend explaining what the highlighted notes mean.
Outcome
The final build (deployed and running live) implements everything the testing pointed to: the categorized sidebar, Circle of Fifths, simultaneous chord/scale highlighting, a four-slot playlist, and onboarding highlights for new users. It's built entirely client-side in React and Vite, using tonal.js for chord and scale math — no backend required.
As someone who's played for 15 years, this is genuinely the tool I kept looking for and never found — most apps either taught me a song or a scale, never the relationship between them. The usability data was also a useful check on my own bias as an experienced player: I default to designing for someone who already knows what an inversion is, and the beginner results were a clear, specific reminder that the interface has to teach that first.