riffrunner
riffrunner
A vocal training app for contemporary riffs and runs
Embedded Files
Project Overview
Project Overview
riffrunner is a mobile app designed to help singers develop their riffs and runs through structured, self-paced practice. This solo capstone project addressed the gap in accessible vocal training tools for contemporary singing techniques.
Timeline: 10 weeks, 100 hours
Role: UX/UI Designer, Researcher
Tools: Figma, FigJam, Google Forms
Research
Research
I conducted mixed-method research to understand the needs of singers learning riffs and runs, targeting amateur singers and voice teachers.
Affinity Map
Competitive Analysis
Methods:
Competitive analysis of 5 vocal training apps
Survey of 17 voice teachers across different genres
Semi-structured interviews with voice instructors
Key Insights:
Key Insights:
100% of teachers expressed interest in a riffs and runs training app
Speed and accuracy were the biggest student challenges (82%)
Breaking down complex runs was the most common teaching method (94%)
Current apps focus on classical scales rather than contemporary patterns
Students lack effective structured practice tools between lessons
Critical Discovery:
Teachers revealed that singers often think riff mastery comes from just listening, imitating, and singing fast, but effective improvisation requires deep scale knowledge and ear training.
The agility comes from knowing scales inside and out so your brain recognizes patterns and your ear can insert them into any song.
Define
Define
Research revealed two primary user types with distinct but complementary needs.
Student Problem: Maya lacks structured guidance for building toward improvisation and increased vocal agility, leaving her repeating the same patterns without confidence.
Teacher Problem: Professor Wilson needs effective digital tools for at-home student practice, currently forced to use valuable lesson time on repetitive drills.
Solution Focus
Progressive skill-building app with genre-specific scales, adjustable difficulty, and teacher assignment capabilities.
Sitemap, User Flows, Business & User Goals
Sitemap, User Flows, Business & User Goals
Sitemap
User Flows
Business & User Goals
Design
Design
I designed riffrunner around a core Riff Builder feature that gives teachers and advanced singers professional-level control over scale practice creation.
Star Feature: The Riff Builder
The riff builder allows users to construct custom vocal exercises by:
Scale Selection: Choose from Pentatonic Major/Minor, Blues Major/Minor, modes, and other contemporary scales
Pattern Creation: Select and rearrange notes within the chosen scale (e.g., 3-2-1 of Pentatonic Major)
Starting Note Control: Set a different starting note from the pattern (e.g., 1-3-2-1)
Vocal Range Targeting: Specify alto, soprano, tenor, or baritone ranges
Speed Control: Adjust BPM for comfortable practice tempo
Rhythm Customization: Adjust timing and feel of the exercise
Direction Control: Choose ascending, descending, or mixed patterns
Backing Track Control: Choose full piano/MIDI accompaniment, initial chord only, or initial chord plus first note guidance
Practice Track Generation & Player
The builder creates a complete practice session that begins in a key at the low end of the selected vocal range, modulates up through 3 octaves, then returns down - transforming the custom pattern into a comprehensive scale workout.
The player features:
Visual pattern representation with lines showing note relationships without intimidating staff notation
Follow-along capability similar to Spotify's lyric tracking, highlighting notes as they play
Audio preview so users can hear the track before saving
Save/Export functionality for created tracks
Playlists for organizing practice sessions
Favorites for quick access to preferred exercises
Sharing capabilities allowing teachers to send custom tracks and playlists to students
Visual Design
Visual Design
I created a bright, professional aesthetic that balanced sophistication with approachability.
Moodboard
UI Kit
Using a deep royal blue as the primary background, I built a vibrant color system around turquoise, yellow, and pink - a playful riff on primary colors that communicates these are fundamental building blocks anyone can learn.
The turquoise-green secondary and pink tertiary colors, combined with white text, create an interface that stays fresh and engaging while avoiding the blacks and greys of overly serious music apps or the childish aesthetic of beginner-focused platforms.
This color strategy reinforced the app's positioning: serious enough for professional use but vibrant enough to inspire creativity and practice.
Testing & Iterations
Testing & Iterations
I conducted usability testing with 5 participants: voice teachers, experienced singers, and beginners.
Results:
4/5 participants completed all tasks successfully (100% completion)
1 beginner struggled with riff building (25% completion) due to music terminology barriers
Teachers and advanced singers understood and enjoyed having control over different aspects like notes and rhythms
Teachers appreciated the sharing functionality for student assignments
Key Issues Identified:
Drag-and-drop interaction unclear to multiple participants
Music terminology created significant barriers for beginners
Script font illegibility across participants
Visual hierarchy needed improvement
Prototype showed returning user experience, confusing first-time users
100% completion for experienced users across all features
Teachers: "Would use this to assign scale practice for students without pianos"
Advanced singers: "Excited about creating complex riffs with this level of control"
Critical Iterations
1. New User Experience: Redesigned prototype to reflect a true first-time user experience instead of simulating a returning user with existing data
2. Enhanced Visual Feedback: Added disabled states for buttons and player preview in the riff builder until all required options are selected, providing clear guidance on completion status
3. Improved Accessibility: Updated color palette for better legibility and accessibility compliance, addressing multiple participants' concerns about readability
4. Audio Preview Addition: Integrated audio samples so users can hear what their custom track will sound like before saving
5. Premium Feature Hints: Added subtle indicators of premium membership benefits, such as access to additional scales and extended note ranges
6. Notation Accuracy: Improved musical notation to be more precise (writing octave as 1' instead of 8)
7. Consistent Interface Elements: Moved Play buttons to bottom for consistency across screens, improved drag-and-drop icons and checkbox clarity
Conclusion
Conclusion
This project revealed a crucial insight about my target audience that fundamentally changed my understanding of the product.
What I Learned
riffrunner is actually designed for teachers and advanced singers with music theory backgrounds - essentially a B2B2C product where teachers are the primary users who then share with students. The usability testing confirmed that beginners struggled significantly with the interface, while teachers and advanced users thrived with the professional-level controls.
Persona Realization: I initially focused on a teacher-student dynamic, but should have designed around different teacher types - tech-savvy newer teachers versus veteran teachers with less digital comfort. The app serves the experts who understand what students actually need to learn, not the end consumers directly.
Core Value Validated: Teachers confirmed they need a tool to address the gap between what students think riff learning requires (listening and imitating) versus what actually builds improvisation skills (scale mastery and ear training). riffrunner provides access to unconventional scales without requiring students to own pianos.
What I'd Do Differently:
Focus personas on different teacher segments rather than teacher-student split
Embrace the expert tool positioning from the start
Conduct more teacher-focused research on professional workflow needs
Profile Settings
Upgrade to Premium
Payment
Upgrade Successful
Next Steps
Next Steps
Beginner version consideration: Create a simplified interface or separate app for students without theory background
Enhanced teacher dashboard: Build robust assignment and progress tracking features
Institutional partnerships: Explore integration with music schools and vocal coaching programs
Most Proud Of:
Discovering through user testing that I had inadvertently designed exactly what the market needed - a professional tool for music educators. Sometimes the best products serve the business experts rather than the end consumers, and Riffrunner successfully fills that expert tool gap in vocal education.
This case study demonstrates my ability to conduct thorough research, adapt to unexpected findings, and recognize when user testing reveals a more valuable market positioning than originally intended.
Page updated
Google Sites
Report abuse