A music learning app that makes practicing scales actually fun. I designed it to be visual and interactive, so both students and teachers can easily master the basics of music.
View full project on Figma →
This diagram is not the final shipped flow. Because we were building the app from scratch, I used it as a shared map of how the experience should hang together so we could spot gaps early and fold in screens or steps that still needed to exist. We iterated on it four times as the product took shape.
These are not portraits of real people. They are synthesized personas I used to empathize with who we were designing for while the project moved forward. I spoke with our team to understand the client and their learners, paired that with some light research, and turned it into two clear archetypes we could keep coming back to.
First-pass landscape mobile concepts for octave, range, key, instrument, and scale pattern flows—quick paper-style explorations to shape the direction before higher-fidelity screens.
This is the screen where students see the scale they are working on and mark how challenging it felt. I built it in four passes. Each pass fixed something the last one had not solved yet, so you can follow the reasoning from structure to final edge cases.
I started with a simple landscape wireframe and bounding boxes. I needed to agree on where the staff, the main actions, and the rating row would sit before any visual design. This step did not decide how settings would behave. It only locked the skeleton so later iterations were not fighting a moving layout.
Once the map was set, the open question was where secondary controls should go. Putting every option on the main canvas felt crowded, so I tried grouping metronome, drone, notation, and octave behind a gear icon in a pop-up. The center of the screen stayed about the staff and the Again through Easy buttons, with metro and drone still quick to reach on the side. That kept the first layout honest, but it introduced a new problem for the next step.
The pop-up reduced clutter, but it added friction. Students had to leave the practice surface to change tools, which did not feel right while they were playing. I removed the modal and placed notation, metronome, and drone on the same screen as round icon buttons so everything stays one tap away. Custom icons replaced long labels so the view stayed quiet. Beside the phone I tested two inactive styles: a red strike-through versus a softer grayed-out state.
The one-screen hi-fi layout looked balanced for a typical example, but I still had to stress-test real music. I drew the longest scale we would reasonably show to confirm the notation stays readable in landscape with the new icons and buttons. Then I designed notation off: a lighter panel with start note, key, octave, and a short rhythm strip. That way students who hide the full score still know what they are practicing.
This is not every screen in the app. It is a curated set of high-fidelity, full-color frames so you can see how the UI looks once illustration, palette, and components come together on a few key flows.
Scaly helps students practice scales in landscape with notation, simple practice tools, and a quick way to mark how hard a run felt. I designed it from scratch with the client’s team, not as a reskin of something that already existed.
Readable staff notation (or a lighter summary when notation is off), optional metronome and drone, and Again-through-Easy confidence marks. Built to stay legible for dense music on a phone in landscape.
Regular syncs with our team and the client kept the flow map and practice experience honest as scope shifted across those four passes.
Clear hierarchy, brand-aligned color and illustration, and reusable Figma components so patterns stayed consistent. I kept accessibility and touch targets in mind for short practice sessions.