One of the fun things with this project was figuring out what features to put into the interface. I wanted the UI to immediately contain all the controls the user needed so there were no hidden menus or popup panels. (In a future version those will be required, but not now.) The reasoning is especially for kids and novices, digging around menu systems means you spend more time exploring the app than making music. And immediately I wanted the user to begin playing.
But, a cockpit?
Originally it wasn’t. It was just going to be a simple drum machine. I knew I wanted it to have some sort of instantaneous readout of the audio being produced in the system. (I have a fondness for oscilloscopes.) It also needed to have relatively big buttons:
And the more I thought about my favorite synthesizers I found they all basically did this:
- Cool-looking 3D-ish interface
- Blinking lights
- Grouped controls
I also found that they:
- Had way too many buttons
- Controls were all over the place
- Color palettes are typically fairly monochromatic
But was as simple as:
Additionally, I wanted it to be playable by holding the corners of the iPad and playing with just your thumbs.
First came the sketch pad. I almost always start there for any project. I’m a big fan of paper prototypes because you can get ideas out of your head quick, everyone at the table can see what you’re working on, and it has a physicality to it.
The first cut had a lot of buttons all over it. The top 1/4 of it was intended to be the visualizer and effects unit. The overall idea felt good but the buttons were too far apart: I couldn’t hold the iPad by the corners. It also meant there were too few main buttons: playing just one synth on the left was boring.
The next paper prototype attempted to focus just on the drums but the whole idea wasn’t gelling.
Finally, the idea of different instrument panel components coming together began to make more sense. The least-used or ambidextrously-used controls could be in the center, more used buttons could be towards the corners. The other reason to put scopes up top or in the center was because your hands would be covering the bottom corners.
Wireframes in Adobe Illustrator
The paper prototypes felt decent and doable even on an iPad Mini, which is the minimum target platform for this project. Now it was time to begin putting details in and trying to figure out how to make this look more entertaining. Over Thanksgiving break several iterations happened which resulted in almost the same interface that is there today.
It turns out that the buttons were still too big and too far apart. The window also took too long to render with my limited iOS skills. And despite the left hand synth looking cool, there were not enough buttons besides the awkward 45-degree turn of the wrist.
The final interfaces
After roughly tracing the Illustrator vectors in Photoshop, dimension and lighting were added to give it more depth. Ridges appeared, colors got darker, the left panel changed colors to make it distinct from the right one, the synth-switching and drum-switching controls moved farther away from the pads (because they were inadvertently being tapped), and the scopes became smaller. The looping controls at the top were actually not originally going to make the first version of the app but without them the app felt too hard to play. Most people don’t have the coordination to do right and left hand tapping independently, so looping solves a lot of this problem: record some drums or bass, then layer on top, then play with the effects later.
Making the user interface was a very fun and very iterative process. The early designs “failed fast” and I kept putting new designs out for friends to try. The design is still far from perfect and many aspects are overly cartoonish, but the organization feels solid and plans to upgrade all of this with better art are not long in the future.