KOMP Music Notation App

When we first met with the genius developer who started KOMP (aptly named GENE:), we were blown away by the awe-inspiring amount of work that had already gone into the back-end optical recognition engine. The challenge? There was absolutely no user interface. In fact, the entire concept behind the KOMP app functionality and front end had not been determined. 

The opportunity to design something that was completely open-ended was pretty exciting. Who would the users be? How would they use this tool? How could we set it apart from every other notation tool out there? How would it be marketed? And how could the design work to take a notoriously complex subject and make it feel obvious and natural? 

Scroll down to view our initial study and findings. 

View Project

Envisioning the User

The first thing we needed to figure out was who we were designing KOMP for. Would it be for seasoned composers? music professionals? music educators? casual musicians? or total newbies? Music notation is skill that causal musicians generally don’t possess, so we stayed away from beginners. We also knew that tools for serious composers (Finale, Sibelius, etc) already exist, but these apps are intensely complex, not portable, and have an amateur (if not clunky) user interface and design.

Through musician interviews we found that there was a definite need for an app that would allow users to quickly jot musical ideas down. Creating a portable format and an easy sketch interface would be vital. We centered on the iPad Pro and Apple Pencil as the ideal hardware. Most importantly, we heard that users need to be able to export their work as a music XML file, allowing them to import and continue working on the score seamlessly within other tools like Sibelius and Finale. In essence, we would design a tool not to compete or replace more full-featured desktop apps, but to complement them. 

The main user persona we envisioned was the choral director. This user would need to be able to quickly write, edit and print parts out. They would also like to jot quick thoughts down and play them back. For more complex editing, they would use desktop apps.

Auto-recognition concept

The original interaction concept for the app was that a user would draw notes, then ‘submit’ them using a button or gesture. We couldn’t escape the nagging thought that people don’t write in single words when expressing an idea. They write in sentences. To impede this flow by having to stop and submit felt like a show stopper.

After much contemplation we had the epiphany that the tool should allow auto recognition of notes AS THEY ARE ENTERED. This was a huge challenge from a development/OCR standpoint. We didn’t know if it could even be done. But it felt like the only way to create something intensely usable. 

Our conclusion: We would design an iPad Pro app which could be used with touch or Apple Pencil. It would be for professional or high-skilled musicians who need to compliment other, more complex desktop tools. It needed to be mobile, simple, beautiful, with a sophisticated UX and a natural feeling UI.

The Challenge

The challenge? This needed to be in market within 5 months. Similar apps had taken 5 years to create and these had whole teams of designers and developers. We would have to make some hard decisions about what features and functionality we could have in market first and what would need to be left for later releases.

High Level Interaction and UX Paradigm

Early on we created an overarching concept of Pitch and Duration, as represented by the X and Y axis. Pitch is a vertical function and Duration is a horizontal (time-based) function. This guided the way all notes and elements moved within the app. 

Entering Notes

Users could use their fingers or the pencil to enter elements in order to not exclude those who didn’t have a pencil or didn’t have it with them.

There would have to be a very well thought-through paradigm about how users enter notation and how it would be recognized. We didn’t want users to have to ‘learn’ a complex way to enter notes. We wanted it to be the most natural way of writing notation so that the tool gets out of they way and the music is the focus. Here’s what we came up with:

DRAW A CIRCLE = it becomes a whole note

ADD STEM TO CIRCLE = it becomes a half note

ADD A FLAG TO NOTE = it becomes a quarter note

ADD BARS TO CONNECT NOTES

DRAW A ‘SLASH’ TO CREATE A QUARTER NOTE QUICKLY

The Design

In an exhaustive review of the competition – from desktop, tablet and mobile phone apps- we found a very common design methodology: show EVERYTHING all the time. This created a massive amount of noise on the screen and was a huge learning curve for users to remember where to find each of the elements within the program. There were in some cases dozens of palettes, with hundreds of choices. How could we simplify? We came up with this motto:

ONLY WHAT YOU NEED, WHEN YOU NEED IT.

The technical challenge was immense, but we created the app to only show elements relevant to a selection. A user could double tap any item to show its ‘mini-menu’ of choices. Or they could simply draw an item- like a sharp, and have the app recognize it and convert to notation.

A set of contextual mini menus within the app

The Brand and Marketing

From day one we called this app KOMP. (A cool play on the word ‘composition’). But like many things, it grew on us. The more we used the interim name, the more it seemed to encompass the idea of the project. Thus, KOMP was born. We designed a logo and brand that would represent a ‘classic’ and yet dynamic and modern app. No swirly lines and ‘classical music’ nods. We wanted to exude lux modern design, and to stand out.

.                                             

The KOMP logo is an abstract representation of the 5 lines of a music staff. 

The Reviews

“The user interface is strikingly modern, as clean as any you’ll find in the App Store, including Apple’s own apps. This really distinguishes it from some of the garish and juvenile designs of some of the other iOS notation apps. It might seem shallow of me to say this, but that’s very important to me. I wouldn’t want to spend a lot of time working in an application that I find ugly. Komp has a user interface and navigation that strikes a good balance between power and flexibility. The typography, colors, and general design language of Komp are a genuine pleasure to work with.”

“The tool palettes are clean, minimal, and unfussy, allowing you to focus on the score itself.”

“The rendered notation is another thing that distinguishes Komp from its competitors on iOS: it looks really good.”

“…First is the very stylish and clever radial menu. This circular, floating palette gives access to all the basic note and rest values, accidentals, and more. It can be easily moved around the screen and hidden entirely. Sitting on top of the score with a slight drop shadow, it has a distinct, tactile feel that I really appreciate.”

“I’ve spent some time with NotateMe and MusicJot. Both are nice and can even do several things that Komp cannot. However, NotateMe and MusicJot feel like tech demos to me in their design and the quality of the resulting score. Komp is the first mobile scoring app that feels like a modern app of the same caliber as the other apps I use on my iPad.”

– ScoringNotes.com, May 1, 2017