Virtual Guitar
UI
•
UX
•
Interactions
2022
The virtual guitar is a teaching aid for the instructors to visually explain the concepts of guitar. It is integrated as a feature in the FrontRow live class environment. The instructor uses this tool to explain chords and melodies to the students, in realtime.
Current scenario
During a live class, the instructors don't have a seamless method to visually explain chord patterns and melody sequences. They depend on non-ideal solutions to explain these.
Showing a physical guitar on camera
Often a challenge to show finger placement and closer look of the fretboard
Showing printed diagrams on camera
Depended on factors such as video quality and lighting
Screensharing images and third-party applications
Have to constantly switch between the live class stream and other windows
A guitar built into the live class
In-class experience
The guitar adds to the class experience, rather than switching between different environments
Synced view
The instructor's guitar view is updated realtime in the student's mobile app
Audio sync
Guitar tones are generated on both the ends in sync, rather than transmitting the audio data from one to the other
Finger markings
The finger diagram helps in easily understanding finger placements, and is added as a draggable component
Mode 1 • Chord diagrams
Learning chords is an inevitable part of the guitar learning process. The chord diagram mode helps the instructor to choose a chord they wish to teach and in just one click the diagram gets generated on the virtual fretboard, along with the finger numbering and placement.
Chords are organised on the basis of
style + root note + type. This provides an extensive set of chords;
2 styles x 12 roots x 15 types = 360 chords
A same chord can be played in multiple styles and shapes. Considering the level of learning of the students, we have confined this to open and barred chord diagrams.
After selecting a chord, instructor can play a preview of how it sounds. Either playing all the strings at once (strumming), or playing each string one by one automatically (picking)
Mode 2 • Melody marking
Melody marking is used when the instructor needs to teach the sequence of notes in a melody. Each note is marked along with the finger number on the virtual guitar so that the students can see in real time. Also a tablature is introduced to record the marked notes as a sequence.
While marking a note on a fret, instructors are provided with an extra option of choosing the finger number
The option to create new sections helps in breaking down the melody into smaller parts
A simpler way of representing each notes in the tablature for layman users to easily understand
