Enhancing the Creator Ecosystem
After establishing Phonogram Audio’s visual foundations and launching the first wave of sample packs, the focus shifted toward building functional value. Standard audio loops are great for quick workflows, but they leave a gap for creators who want to know how a sound was actually made. For the upcoming Acoustic Guitar Strums pack, we wanted to bridge this gap by revealing the exact musical architecture behind the audio.
My background as a musician gave me a unique perspective on this challenge. I knew that producers often want to go deeper into a sample to analyze its composition. This led to the development of a unified tool designed to assist in planning the sample pack itself, while simultaneously acting as a companion piece for the end-user.
The tool is built around two primary functions:
1. Production Utility: An internal dashboard to prototype, visualize, and refine complex acoustic guitar chord progressions and rhythm patterns prior to final studio recording.
2. Value-Add Feature: A built-in educational library allowing customers to break down the audio files visually, inspecting the exact fretboard fingerings and strumming patterns right from their web browser.
Inheriting the Brand DNA
Developed as a native extension of Phonogram, Tablature bypassed the need for a separate branding phase. It was engineered to pull directly from the established visual architecture of the primary Phonogram brand ecosystem.
UI Consistency: The tool adopts the same clean, minimalist grid and high-contrast typography (Outfit) that defines the Phonogram website, keeping the user experience cohesive and familiar.
Functional Color Pops: The vibrant, Pop Art-inspired color palette plays a highly functional role here. Across a complex interactive dashboard, these high-contrast accents act as visual anchors—making it easy to instantly tell downstrokes from upstrokes and see active frets at a glance without sacrificing the minimalist aesthetic.
Designing for Frictionless Utility
Traditional guitar notation tools are almost exclusively built for tracking individual notes. Tablature is unique because it flips the focus, serving as an in-depth notation system designed specifically for rhythm, strumming, and real-time chord analysis.
To pull this off cleanly, the interface required a single-page, focused layout. Rather than isolating individual features, I mapped out a unified, continuous loop that guides the creator smoothly from a blank canvas to a completed arrangement, allowing them to jump back and tweak parameters at any stage:
The Fretboard
The workflow begins on the Fretboard Visualizer - a clean, interactive grid mapping out the guitar neck. Clicking the intersections instantly frets the strings, offering immediate visual feedback on hand placement while dynamically analyzing and displaying the resulting chord names directly below the fretboard.
The Strumming Grid
Once a chord is defined, the user can push that chord to the notation timeline. The system dynamically generates a clean chord diagram alongside an open rhythm bar, where users can effortlessly compose, edit, and visualize custom strumming patterns.
The Library
After a full progression is built, the user can commit it to their personal library. From this dashboard, progressions can be reopened, edited, updated, or discarded at will. For offline utility, users can select specific progressions and instantly export them into a clean, print-ready PDF directly to their device.
By anchoring the dashboard around this intuitive 1-2-3 loop, the interface strips away technical clutter so the creator can focus entirely on composition.
Front-End Development & CMS Integration
The Core Engine: I wrote the tool as a clean, single-page application using HTML5, CSS3, and native JavaScript inside VS Code. Keeping the code lightweight was vital to ensure the interactive canvas renders flawlessly without lagging or consuming heavy browser resources. Dynamic Database Integration: To make the tool truly useful, it needed the ability to save and load data. I integrated the custom JavaScript engine with Wix Studio using Velo. This allowed the tool to communicate dynamically with the Wix CMS database. The Workflow Result: With this infrastructure in place, complex chord progressions and custom strumming patterns can be instantly written to, and fetched from, the database. This allows for seamless content management behind the scenes, making it incredibly easy to scale the chord library in the future.
UI/UX Design
Designed the layout using Figma
Lightweight Front-End Engine
Developed the tool using HTML, CSS and Javascript
Wix Velo API
Integrated the tool as a custom element in Wix Studio
CMS Database
Made use of Wix CMS to save and load data
Foundation and Future Pipeline
While Tablature is currently running in an unannounced phase on the live site, it has already successfully optimized the internal workflow for creating upcoming acoustic guitar sample packs.
Proof of Concept: The front-end logic and database pipeline are completely stable, delivering seamless data persistence for intricate musical structures. While the current build excels at prototyping short loops, the architectural blueprint is already primed for its next phase: scaling the engine up from a four-bar utility to handle full-scale song compositions.
Value-Driven Roadmap: The infrastructure is primed to launch as a premium free tier for customers, shifting Phonogram from a standard sample store to an interactive, creator-centric audio platform.
Scalable Blueprint: The clean separation of the lightweight JavaScript logic ensures that the entire code architecture is perfectly prepared to be adapted into dedicated desktop or mobile apps when the pipeline expands.
