Trainer modules
Modes, root notes, and scale-degree practice were shaped into focused learning modules with clear answer states.
Case study
Sisco's Guitar Trainer
AI-assisted HTML5 prototype, native iOS development, ARKit exploration, scale logic tools, interface design, and visual QA tooling.
Role
Product Designer, UI/UX Designer, AI-assisted developer
I started Sisco's Guitar Trainer because I was working on my own guitar chops and wanted a better way to practice modes, root notes, scale degrees, and how those sounds relate to chords. I could find static charts, but I wanted something more active: a trainer that would show the fretboard, ask questions, reveal answers, and help connect pattern recognition to real musical decision-making.
The first version began as an HTML5 web app that I vibe coded from scratch with AI. I used prompt engineering, fast UI iteration, and visual direction to turn rough ideas into working screens. I built early trainer views for modes, root notes, and scale-degree practice, then kept adjusting the interface around what felt useful while actually playing guitar.
Design process
Teaching AI the way guitar players think
The biggest challenge was teaching the AI the difference between scale patterns, root-note positions, interval logic, and the way guitar players think visually across the neck. That became a prompt-design problem as much as a UI problem.
Answer states
Color, finger-number cues, and feedback states helped the trainer feel more active than a static chart.
Scale builder
A scale builder helped define scales, chart notes, and map degrees across the fretboard for rapid logic testing.
AR exploration
Native iOS opened the door to ARKit, camera tracking, depth sensing, and overlays connected to the physical instrument.
Outcome
A product system, not just an app screen
From a UI/UX perspective, the project became a full design system: guitar textures, leather panels, gold controls, bright answer states, finger-number cues, drawer navigation, trainer modes, settings, and AR views all had to feel connected. It shows how I use AI, design judgment, iteration, and product thinking together to turn a rough idea into a polished interactive experience.
Navigation system
Drawer controls and mode switching created a flexible structure for multiple trainer states.
Visual system
Interface textures, color states, and instrument-inspired controls helped give the product a distinct identity.
Testing workflow
Calibration screens and QA passes turned experimental AR and fretboard ideas into repeatable product behavior.
Portfolio story
The case study shows the full arc from personal learning need to AI prototype to native iOS product direction.