Back
Jam.js
What originally started as an entry for a spline hackathon, quickly evolved into me designing and building my own free to use web app.
What originally started as an entry for a spline hackathon, quickly evolved into me designing and building my own free to use web app.
Role: Product Designer
Tools: Spline, VSCode
The Problem:
Learning guitar is hard and sucks for a while. Beginners often struggle with finger placement and complicated diagrams as I know I did. After teaching some friends guitar I noticed the same questions being asked and them needing to look at my hands from multiple angles so they could better understand how my hands were holding the chords.
To the right are two normal chord charts. At a glance it is quite unclear what each little symbol means, its difficult to even tell which direction one is supposed to be looking at.
Building and Modeling
This was originally going to just a simple spline scene that highlighted the correct strings and had a key showing which finger should be placed which string.
Building and Modeling
This was originally going to just a simple spline scene that highlighted the correct strings and had a key showing which finger should be placed which string.
Building and Modeling
This was originally going to just a simple spline scene that highlighted the correct strings and had a key showing which finger should be placed which string.
Original Prototype
Here is what the first working prototype looked like. You could click one of the buttons, and it would show you which strings to play, and where to place your fingers. Sadly, I knew this wasn't really enough to help users and as much as I was dreading it I was gonna have to model the actual hand positioning.
A couple of other things I noticed at this point was that I wanted to overlay a flat interface rather than having one in a 3d space so that users could click it at anytime. I was also going to have to move away from a hype realistic style as it was too heavy on the machine and I wanted this to actually be usable. All of these constraints led to a full redesign and, a decision to build this myself using 3.js.
Here is what the first working prototype looked like. You could click one of the buttons, and it would show you which strings to play, and where to place your fingers. Sadly, I knew this wasn't really enough to help users and as much as I was dreading it I was gonna have to model the actual hand positioning.
A couple of other things I noticed at this point was that I wanted to overlay a flat interface rather than having one in a 3d space so that users could click it at anytime. I was also going to have to move away from a hype realistic style as it was too heavy on the machine and I wanted this to actually be usable. All of these constraints led to a full redesign and, a decision to build this myself using 3.js.
Low Poly Style
First things first I had to try and figure out how I wanted the web app to look and feel. I opted for a low-poly aesthetic to ensure maximum performance on the web, guaranteeing quick load times and smooth, high frame rates. I started with the guitar neck and the did the strings with the markers showing where the fingers go, as well as the actual hands. Last but not least I designed the surrounding environment to fit the style.
Low Poly Style
First things first I had to try and figure out how I wanted the web app to look and feel. I opted for a low-poly aesthetic to ensure maximum performance on the web, guaranteeing quick load times and smooth, high frame rates. I started with the guitar neck and the did the strings with the markers showing where the fingers go, as well as the actual hands. Last but not least I designed the surrounding environment to fit the style.
Final Application
After successfully designing the 3D assets for each chord, I focused on the essential element of auditory learning. I recorded myself strumming each chord to provide users with immediate and accurate audio feedback as they practice.
With all visual and audio components complete, the final stage was the application build. For the flat User Interface (UI), I prioritized user control and customization, I added buttons allowing users to toggle both the sound and the hand model on and off.
The application, which is shown on the right, is now fully functional and incorporates these controls for a personalized learning experience
After successfully designing the 3D assets for each chord, I focused on the essential element of auditory learning. I recorded myself strumming each chord to provide users with immediate and accurate audio feedback as they practice.
With all visual and audio components complete, the final stage was the application build. For the flat User Interface (UI), I prioritized user control and customization, I added buttons allowing users to toggle both the sound and the hand model on and off.
The application, which is shown on the right, is now fully functional and incorporates these controls for a personalized learning experience
After successfully designing the 3D assets for each chord, I focused on the essential element of auditory learning. I recorded myself strumming each chord to provide users with immediate and accurate audio feedback as they practice.
With all visual and audio components complete, the final stage was the application build. For the flat User Interface (UI), I prioritized user control and customization, I added buttons allowing users to toggle both the sound and the hand model.
The application, which is shown on the right, is now fully functional and incorporates these controls for a personalized learning experience
Reflection
This was a really interesting project that pushed me to explore the limits of what’s possible inside a Figma prototype. It became less about just simulating UI and more about building interactions that felt genuinely responsive and dynamic using tools like Smart Animate and variables.
One thing I would change in a future iteration is the repetition of the addition and subtraction animations. While they’re helpful the first few times, they can become distracting once users understand what’s happening.
Back to top