Alex Capolongo
UX Researcher and Product Designer
Late February-Early April 2025 (5 weeks)
Tools used
Design Lead, Product Designer, Software Developer
Figma, Arduino IDE, VS Studio Code, FigJam, Microsoft Word
Design Problem & Process Documentation
Design Problem
Amateur musicians face significant barriers when learning music theory and composition. Traditional methods lack immediate feedback and physical engagement, making it difficult to develop proper rhythm and timing. Our challenge was creating an intuitive tool that combines physical feedback with digital learning, making music education more accessible and engaging for beginners.
Key Challenges Identified
• Lack of immediate physical feedback in music learning
• High barrier to entry for understanding rhythm and timing
• Limited integration between physical practice and digital tools
• Need for more intuitive music composition methods
Design Process Review
1. Initial Research
We conducted some background research of existing music learning platform Drumeo:
Drumeo landing page; great concepts to build off of especially in music education
2. Concept Development
Based on our research, we developed our initial concept:
• Low-fidelity product mockup; used phone interface
• Touch-sensitive interface for intuitive interaction, and accessibility options
• Focus on beginner-friendly features
Early concept of physical prototype showing haptic feedback integration
3. Prototype Development
We developed two key prototypes:
Physical Prototype
• Arduino-based haptic system
• Basic touch sensors
• LED feedback indicators
Digital Interface
• Mid-fidelity Figma prototype
• Core user flows
• Basic visual feedback
4. User Testing
We conducted focused testing with 5 participants:
• 3 complete beginners with no musical background
• 2 amateur musicians with basic knowledge
Key Findings
• Haptic feedback was most effective for rhythm learning
• Interface needed further simplification
• Users preferred step-by-step guidance
• Visual feedback complemented haptic learning
5. Design Refinement
Based on our testing with 5 users, we made several key refinements:
• Simplified the interface to focus on core learning features
• Enhanced haptic feedback patterns for clearer rhythm indication
• Added more prominent visual cues to support learning
• Implemented a more structured onboarding process
Interface evolution based on feedback
Prototype Development
Physical & Digital Prototypes
Physical Prototype
Low-fidelity physical prototype showing Arduino integration, touch-sensitive surface, and haptic feedback components
Mid-Fidelity Digital Prototype
Interactive Figma prototype demonstrating user flow and interface interactions
Technical Implementation
The core of Composi's somatic experience is powered by our haptic feedback system, which uses precise vibration patterns to help users internalize rhythm and timing. I developed this Arduino IDE code using concepts learned in class
Arduino Code: Ultrasonic Sensor + Buzzer
// Arduino-based haptic feedback system #include
const int trigPin = 9;
const int echoPin = 10;
const int buzzer = 12;
const int ledPin = 13;
// defines variables
long duration;
int distance;
void setup() {
pinMode(trigPin, OUTPUT); //
pinMode(echoPin, INPUT); //
pinMode(buzzer, OUTPUT);
tone(12, 392, 1000);
pinMode(ledPin, OUTPUT);
Serial.begin(9600); // Starts the serial communication
}
void loop() {
// Clears the trigPin
digitalWrite(trigPin, LOW);
delay(100);
// Sets the trigPin on HIGH state for 10 micro seconds
digitalWrite(trigPin, HIGH);
delay(100);
digitalWrite(trigPin, LOW);
// Reads the echoPin, returns the sound wave travel time in microseconds
duration = pulseIn(echoPin, HIGH);
// Calculating the distance
distance = duration*0.034/2;
if (distance <= 20){
digitalWrite(buzzer, HIGH);
tone(12, 294, 600); // D4
delay(300);
tone(12, 262, 600); // C4
delay(300);
tone(12, 247, 1200); // B3
delay(300);
tone(12, 294, 600); // D4
delay(300);
tone(12, 262, 600); // C4
delay(300);
tone(12, 247, 1200); // B3
delay(300);
tone(12, 247, 600); // B3
delay(300);
tone(12, 247, 600); // B3
delay(300);
tone(12, 247, 600); // B3
delay(300);
tone(12, 247, 600); // B3
delay(300);
tone(12, 262, 600); // C4
delay(300);
tone(12, 262, 600); // C4
delay(300);
tone(12, 262, 600); // C4
delay(300);
tone(12, 262, 600); // C4
delay(300);
tone(12, 294, 600); // D4
delay(300);
tone(12, 262, 600); // C4
delay(300);
tone(12, 247, 1200); // B3
delay(300);
delay(500);
digitalWrite(ledPin, HIGH);
delay(100);
digitalWrite(ledPin, LOW);
delay(100);
digitalWrite(ledPin, HIGH);
delay(100);
digitalWrite(ledPin, LOW);
delay(100);
}
else{
digitalWrite(buzzer, LOW);
digitalWrite(ledPin, LOW);
}
// Prints the distance on the Serial Monitor
Serial.print("Distance: ");
Serial.println(distance);
}
Hardware Components
• Arduino Uno microcontroller
• Arduino Ultrasonic Sensor
• Touch-sensitive surface
• Arduino Buzzer
• Bluetooth module (IoT)
Somatic Features
• Rhythm-based vibration patterns
• Touch-sensitive gesture control
• Visual LED feedback
• Real-time haptic response
• Adaptive feedback intensity
✨ Design Journey
🎯
The Challenge
Started with an ambitious goal: create an intuitive music learning tool for beginners. The initial scope was broad, targeting everyone from complete novices to intermediate players.
💡
The Insight
Audience feedback revealed we needed to narrow our focus. We pivoted to specifically target amateur musicians, creating a more focused and effective learning experience.
⚡
The Solution
Developed a simplified, somatic-focused learning tool with intuitive haptic feedback. Created comprehensive but accessible instructional materials for our target audience. Connected to the IoT (Internet of Things) through Bluetooth and WiFi connectivity
🎉
The Outcome
Successfully created a focused, user-friendly music learning platform. Received positive feedback from our classmates about the intuitive design and effective learning approach.
📚
Key Learnings
The journey taught us the importance of focused design, early user feedback, and the power of simplicity. These insights continue to influence our approach to educational tool design.
✨ Project Summary
💭
Reflection
Looking back on this project, the most significant achievement was finally implementing Arduino IDE and Somatic Experiences into our approach. Coming up with a product based on music was innovative as music can involves numerous somatic senses.
📊
Evaluation
The project exceeded its core objectives. We created a working mid-fidelity web application, and a low-fidelity physical prototype that has working sound, and a touch screen. Areas for future improvement include expanding the test coverage, making everything high-fidelity and implementing additional accessibility features.