RHYTM APP
San Jose, CA, USA
As I taught piano lessons, I realized that mastering rhythm is one of the most difficult aspects of playing an instrument. In addition to teaching rhythm, I wanted my student to have a tool to practice it on their own. There were plenty of apps which helped students understand sheet music or showed them how to play various accords, but none of them were good at training the rhythm.
That’s how the idea of designing a new rhythm app was born.
COMPOSING CURRICULUM
Before diving into design, I needed to develop techniques I’d use to teach the rhythm, specifically I needed to come up with a set of instructions/lessons that students would use.
I devised my curriculum based on three sources of information:
-
my own experience from the music school
-
books on teaching rhythm
-
reviews of other rhythm apps which helped me understand their missing parts
I decided on having ten lessons. Each lesson trains one specific aspect of rhythm.
WIREFRAMES
After my initial research into the learning methodologies, it was time to start thinking about wireframes and the overall app structure. I knew I had three vital requirements:
-
lessons view
-
ability to practice without specific lesson
-
unified score board for all completed lessons
I thought about the interactions between all three states. Initially I wanted to have a bottom tab bar with three icons representing a different views, but I found it unpleasant to have a permanent large view at the bottom of the screen. Then I thought about having a menu that can be shown through the swipes-to-reveal gesture, but that might have discoverability issues. Eventually I settled for the iOS’s swipe-between-pages style which can move between different views through the swipe gesture but keeps the user informed about the position through the dots next to the view’s title.
Below you can find those three views: timeline with lessons, settings (which later became “free play”), and statistics (which later became “score board”).
03
APP DESIGN
LESSONS MENU
Now the best part — real design begins!
Let’s focus now on the most important screen of the app, the lessons view.
There are total of ten lessons in the app. Each lesson represents one rhythmic group e.g. practicing half note and half rest.
Trying to cram all of the lessons into one screen (especially for smaller iPhone 5) was difficult if we were to preserve clarity; that’s why I decided to use a scroll view where information could be spread over larger area.
THEORY SCREENS
Once a lesson is selected, student is taken to the lesson’s detail view.
Here, we explain theory together with a practical auto-play example where one can hear and see how to play given rhythmic group.)
In the upper right corner, student can also tap on the metronome button which shows an overlay view with metronome’s explanation.
PRACTICE SCREENS
Initially I designed vertical practice view, however I quickly realized that the viewport was too small to fit enough notes. Since I didn’t want to have a scrollable note area, I decided to move to the horizontal view.
Once the start button is tapped, the student can play rhythm in accordance to presented notes.
SCORE SCREEN
Which brings us to the summary view where the final score of the play is presented.
After the practice is over, the summary view is shown with the final score.
FREE PLAY MODE
Independently from lessons, students can also practice all rhythmic groups in what I called “free play”. This mode allows them to keep practice their skill at any time. Before the play begins, students can configure three aspects of it: tempo, time signature and whether they want to play with one hand or two.
SCORE SCREEN
Finally the score board. This is where all lessons scores are shown.
The final score for a given lesson is computed by average of all individual tap scores (see grading section below).
GRADING
During practice, a student needs to tap the button with a specific rhythm. A computer analyzes those taps and needs to “grade” student while she plays the rhythm. It needs to understand what means to completely miss the beat, barely made it, or hit it perfectly.
Unlike humans, the computer’s timing margin of error is extremely minimal, hence we need to come up with a good way of measuring success.
Attached is the chart that correlates timing to the success of individual tap.
Option 1 — This option produces a perfect score only when the timing is absolutely perfect, and gradually decreases score once we move past the climax.
Option 2 — This option has a binary outcome: either tap is successful or it’s not.
Option 3 — This is the combination of the above options. It is possible to get the perfect score even with a small timing offset, and at the same time we get a partial score once we move further away from the perfect timing.
After much consideration, option #3 seemed the most reasonable.
ICONOGRAPHY
Music Notes
Icons were created in Adobe Illustrator
App Icons
LOGO DESIGN
Final logo
Logo variations
COLOR PALETTE
When I thought about the color palette for the app, I tried to choose something that can be associated with music. For that reason, the color palette resembles colors one can find in classic Orchestra. Orange and near-black are dominant colors there.
TYPOGRAPHY
The sans-serif font Lato gives a warm feelings. It is elegant yet not too serious. Perfect for the app.
