JAM is a mobile music app designed to allow musicians to play along with YouTube songs in real time through synchronized lyrics and dynamic chord overlays.
This project focused on building a clean, music-first interface that eliminates the need to toggle between multiple tools.
Problem
Musicians learning songs via YouTube often juggle:
Video playback
Separate chord charts
Dynamic lyric pages
This fragmented workflow disrupts rhythm, slows memorization, and breaks immersion during practice. The core issue was not access to content — but lack of integrated interaction.
Goal
Create a music interface that:
Keeps users inside one continuous flow
Provides real-time chord feedback
Reduces cognitive switching
Supports quick song saving and organization
JAM (CASE STUDY)
02.
Interaction Flow
Primary Flow: Splash → Create Account → Home → Search → Song Selection → Immersive Play Mode
Secondary Flow: Primary Flow: Save → Add Saved Song to Playlist → Library Access
Motion and Interaction Principles
Immediate Feedback
Favoriting and playlist actions respond under 300ms to reinforce user input
Rhythm Alignment
Chord overlays appear with consistent timing to the song
Product Overview
Convert YouTube songs into playable guitar chords
Display lyrics with real-time chord overlays
Organize songs into libraries and playlists
Explore curated music based on listening activity
Brand Guidelines
With a minimalist color palette of black, grey, white, and a pop of orange for JAM, the neutral color palette minimizes distractions during active playing sessions, while the accent orange reinforces interactive states and call-to-action elements.
Additionally, the font Nunito for the main logo with a play button motif and the supporting text is minimalist, but the letters have rounded edges, contributing to a cozy, but clean look and feel.
PROJECT: PRODUCT UI/IX DESIGN + INTERACTION & MOTION SYSTEM DEVELOPMENT + PROTOTYPING
PROGRAMS: Figma, Adobe After Effects, Adobe Illustrator