TLDR
Chops is a percussion learning app designed to teach the basics of drumming. It is targeted towards individuals who are looking for a cost-efficient way to learn to play the drums. Backed by research from real drum teachers and drummers, Chops has structured lesson plans, multi-modal forms of teaching, and engaging tutorials and activities to teach stick control, rhythm, coordination, and listening skills. The app is rhythm-focused and specifically designed for snare drum.


**NOTE: This is optimized for desktop viewing.**
Details
Methods: Market Research, Interviews, Usability Testing, Information Architecture, Wireframing, Branding, Prototyping, UI Design
Timeline: 10 weeks
Tools: Figma
Context: Passion Project
The Objective
This project originally started out as a 5 hour design challenge to design an app that teaches percussion. After the challenge ended, I decided to carry out the project to fruition and design the full experience from start to finish. I identified an opportunity to design a cost-efficient alternative to in-person drum lessons, which can cost upwards of hundreds of dollars per month.
The Solution
LESSONS​​​​​​​
Chops offers lessons with multi-modal exercises in consecutive levels with increasing difficulty. In each level, there are also required video lessons that the user must watch, which are found in the video section. New lessons and Levels are unlocked once the user completes the majority of the previous level. 

VIDEOS
Chops has video lessons (which supplement the lesson exercises) as well as tutorials. The video lessons are interactive and ask questions throughout each video to ensure full user comprehension of the topics. The tutorials explain drum topics. Users can filter through the videos based on time, topic, or type.

DRUM TOPIC RESOURCES
All of the different rudiments, time signatures, styles, and techniques can be found in the drum topics section of the app. Here, users can learn more about the topics found within the lessons and videos and find more examples of the topics in music.

Final Prototype
My Design Process ⬇️: Discover. Define. Design. Deliver
DISCOVER
Understand the problem area and learn about teaching drums
Market Research
Before diving into the project, I wanted to understand the market value of a drumming app. I created an affinity map that plotted structured to self-taught learning against physical to digital experiences. As with most things, the best way to learn is through in-person instruction. However, physical learning and teaching are often the most expensive, with classes and band camps adding up to hundreds of dollars over just a few weeks. The affinity map shows that there is an area of opportunity from both a cost and experiential perspective for a digital solution that has structured learning.
Check out my video explanation of the market analysis of learning apps here 👉👉👉
DEFINE
Identify what will go in the app
Object-Oriented UX - Noun Foraging
The goal of this exercise was to find the real-world objects that might need to be represented in the system. I brainstormed all of the different objects that could be relevant to this app. I looked for repeated objects and nouns found throughout the learning app as well as important concepts mentioned in the first interview. I then consolidated the objects into related categories. 
Object Mapping
The consolidated objects listed above created the foundation for the object map which I created in Trello. Object mapping describes the app’s objects' structure and outlines the objects’ content and functionality. The content is listed in order of importance from top to bottom. Additionally, in the Trello object map, I started thinking about admin/user permissions and visibility of content (such as email) which would be useful when working with a software engineer.

Wireframing
Using the Information Architecture from object mapping, I brainstormed different UX configurations for the objects in the form of Lists, Modules, and Detail views with respectively increasing information. It was important to maintain the same Information Architecture throughout the different components to ensure consistent user understanding.
DESIGN
Create the experience of teaching drums
Paper Prototypes - Testing Concepts
User Testing 
Testing Goal: Identify the most intuitive way to display lessons [list vs cards vs carousel] and gain user feedback on lesson flow.
Digital Wire Frames - Main Navigation
A/B Testing - Lessons Exercises
I still needed to solidify the experience of the lessons themselves. I conducted A/B usability testing with interactive prototypes to provide a more realistic experience, which allowed users to give more specific feedback.  Because playing drums is in a physical activity, I needed to identify how the physical act of playing the drums affects the interface design of the app. I did two rounds of usability testing to identify what UI practices make the most sense when recording video and audio in each of these states. 
RHYTHM LESSON
UX Goal:  Users record themselves playing the required rhythm at a given tempo.

Research Question: What UI practices are the most intuitive for recording and playing audio?
Rhythm Idea A 
STICK HEIGHT
UX Goal: Users control their sticks so they only stay within a given area on the screen. 

Research Question: Do users understand how this activity works? Which version do they prefer?

Stick Height Idea #1 

HAND TECHNIQUE
UX Goal: Users mimic the technique of the video to practice and improve their technique.

Research Question: Is a full screen takeover camera too intrusive? Do users understand how to complete the lesson activity?

Hand Technique Idea #1 

A/B Testing 2 - Lessons Exercises
DELIVER 
Execute the final user interface and branding
Brand Direction - Inspiration Board
Starting with the Button
I started ideating around the button since it would be a versatile and primary element on the lesson and video pages. I experimented with a variety of styles and tried to push the UI beyond flat material and iOS design and took textured elements from the drums themselves.
Button Iterations 1
I decided to move forward with the sleek design with gold accents due to the resemblance of old metronomes. I then further brainstormed variations of the button. Because drumming is such a physical activity, I designed the UI to have 3D/physical similarities.
Light Mode vs Dark Mode
After deciding on a visual style, I prototyped both light mode and dark mode versions of the UI. I aimed to bridge modern elements from neomorphism UI with the "classic" gold accents that were inspired by the metronome. I initially was leaning strongly towards the dark mode since it aligned with the dark tones from the inspiration board. I gathered feedback from a variety of individuals (other designers and potential users) and learned that the Dark Mode is too low contrast since neomorphism relies so heavily on shadows and therefore is much harder to see. Additionally, music notes are traditionally black on a white background
Design System
Final Design
Key Features
Rhythm Exercise
The Rhythm exercise allows users to record themselves playing a given rhythm at the specified tempo. After pressing record, the app gives them a 4 beat count in at the tempo and then they play the rhythm. Afterwards, the user gets feedback on their performance.
Stick Height
Being able to control your sticks is a fundamental part of becoming a better drummer. The Stick Height exercise teaches drummers to play in a specified area to work on controlling their drum sticks. The camera interface has a blue overlay so users can aim the height of their sticks in real time.
Video Lesson Question
In the video section of the app, users can watch tutorial videos and lesson videos to watch drummers play through varying drum topics. In the lesson videos, users will get asked questions to ensure that they are internalizing the information and truly comprehending the video.
Conclusion
Back to Top