Zach Steiner
Aug 20, 2015


  • UX
  • Design
  • JavaScript

I've created an initial functional version in JavaScript. Currently, it only supports transposing a single note.

Cheat Sheet
Main Screen on Phone

I've played saxophone for more than 20 years; never professionally, but occasionally with other instruments. The saxophone family is weird and wonderful, by design. There are saxophones in all shapes and sizes, but they are unified by a common key layout. So I only need to adjust my breath support and embouchure to switch from soprano to baritone sax. A G has the same fingering on all saxophones. There's an interesting catch, however. That G that I'm playing on a soprano is not the same actual note is on an alto or baritone. Not just a different octave, but actually a different note. Soprano and tenor are B flat instruments (keeping company with trumpet, clarinet), whereas alto and baritone are E flat instruments. Thus the fun of playing transposing instruments. Due to the vagaries of transposing instruments, I've experienced the awkward situation of everyone in the band playing "Autumn Leaves" in a different key. That happened when I sat in with a jazz trio. Referencing transpositions quickly is important when you're in the heat of playing or in dark basements or clubs.

For when I played out, I made cheat sheets on 4'x6' index cards for alto and soprano. I've long kicked around the idea of an app to make this easier. Thus, the concept for transpose. There are a lot of transposing tools out there that take a note or scale and transpose it to another key. They have uninspiring interfaces, but more importantly they never approach the UI from a transposing instrument standpoint. I want the app to clearly answer the question: What does this particular note sound like on my instrument. If I play a G on alto sax what is that on piano? This concept shows the workflow and interface design.

The goal for the UI is to be quick to use and easy to read. With the device on the music stand, the result should be easy to read when glancing down. The parameters should be easy to change on the fly. The UI is simply instrument selection and a circle of fifths, which is immediately familiar to musicians. Tap the starting note on the circle and it highlights in blue. The transposed note is indicated by the triangle.

Tablet Version
Select a note.

The result is given in plain English below the circle. The app assumes some musical knowledge, but shies away from using jargon in UI copy. Though I play instruments and read music, I've never felt comfortable with music jargon. My intent is an approachable, quick reference tool. Jargon simply adds unnecessary cognitive load.

Select Instruments
Select Instruments

To change the instruments, tap on each to bring up the selection grid. The instruments are laid out with easy to tap targets (90px). This is more visual than a select list and requires less precision. Users potentially have a saxophone or guitar on their lap or around their neck.

Additional instruments can be added by making the grid scrollable. Each instrument will eventually have a custom illustration by Jackie Glimp. Currently, only piano and alto sax (via free vector icons) are provided as an example. The key of each instrument is used as a placeholder for the mockup.

I started with the idea for transpose as a simple tool to transpose single notes, but it could easily serve up chords and scales as well. In switching to chord or scale mode, the user then needs to select the target note (B-flat) and type of scale or chord. These will be select lists of the notes (in circle of fifths order) and type of chord (e.g., major triad, minor 7, etc.) or scale (minor, pentatonic, blues, various modes, etc.). Then the application presents the two chords or scales next to each other.

This UI would allow the user to quickly hop between keys, chord type, scale modes, and instruments. This would be particularly useful when trying to play a song in a mutually easy key for the instruments present. The app will remember the instrument selections and original note when switching between note, chord, and scale mode.

Tablet UI
And Chords
Tablet UI
Scales Too
©2020 Zach Steiner