tunefox-bannertunefox-banner

TuneFox App Design 

For fretted instruments tablature was a revolution for helping people learn how to play music. Tablature, or tab for short, is like sheet music but much easier to read and understand. So easy to learn from, that generations of musicians have become over reliant on a tool that doesn’t help them learn to improvise, or train their ear like the professional musicians of yesteryear. Tunefox sets out to course correct how musicians learn to play the banjo.

Wireframes & Sketches

For this project I added a unique step to my workflow, playing my banjo while I worked. From user research and testing to final wireframes, I made sure I didn't lose sight of who this product was for and how it was meant to be used.

User Research

Before wireframing began, we spent a month researching who our target users would be, and what kind of music learning problems they experience.. We put out large surveys to get an idea of general trends, then conducted in person interviews to create our user archetypes.

Start With Sketches

Although a frequent user of music tablature, I had never designed any myself. So this was a great opportunity to start thinking about the ways I could make tablature more than just something you read, but something you can hear, interact, and improvise with.

  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image
  • gallery-image

Song Selection Wireframes

For song selection, I knew I wanted the home screen to feature a “continue learning” feature, allowing users to get back to where they last left off in their learning process. The learning experience is song based, because jams featuring bluegrass standards are the very soul of bluegrass.

In testing we noticed some users would select a song, then change the genre of the song arrangement immediately. I took note of this and would later expand the genre, or tab type selection flow.

Tab Features

For selecting measures to highlight and loop, I mapped the simple tap interaction. Want to select multiple measures? Just tap any number of measures that you wish. To hear a high quality MIDI of what this would sound like users simply tap the play button.

The lick switcher would prove to be the most loved feature of TuneFox. Licks, jargon for a musical phrase, are a great way to encourage musicians to play a melody in different and new ways, encouraging improvisation.

Tab Info & Control

Allowing users to reference chord shapes helps users understand where on the fretboard certain melodies are coming from. In this iteration users accessed tab settings by pulling left, giving advanced musicians and power users greater control over tab.

Visual Design & Testing

After establishing some early design language with color and typography, I focused on creating a readable tablature design that works in fluid layouts for future use on other devices. During the first visual phase we ended up having two different testings sessions with users who fit our target audience. We would end up conducting a beta test for the final design.

Song Selection

In the early rounds of visual design, I worked on establishing how different colors would relate to different styles of music. This included the main genres, scruggs, melodic, and backup, and also more niche genres such as single string, jazz, and blues.

"Tab Type" selection was turned into song arrangement cards, where users could see descriptive previews of a song arrangments, color coded to help users instantly recognize what to expect before they start learning.

The Lick Switcher

Testing would prove this feature to be the most popular and useful learning tool. Switchable tab is labeled with a gradient bar both identifying that it can be interacted with, and what genre of lick is currently being used. Using the established colors for song genre and arrangement, users simply use 3D touch or the press & hold interaction to bring up a contextual menu of song licks for that specific measure.

Tab Control

These features didn't change much from their wireframes, but at this phase in the project TuneFox mode was represented as a slider on the tab bar. During testing this would prove to be difficult to develop and was cut. Opening settings was triggered by swiping left anywhere on the screen, but testing would show a button was needed for most users to find these features. 

Final Visual Round

After numerous rounds of testing and showcasing our work in progress with with early investor, banjo player, and comedian Steve Martin, we sought out to update the app designs based on user feedback. After making these changes, a working beta was prepared for two rounds of user testing and a final beta.

Navigation Changes & Titles

We simplified the continue learning cards and created a song filter system on the nav bar. Receiving great feedback from our song style selection cards, I chose to keep these consistent with earlier visual designs. The tab section saw a significant change with a large title at the top. I felt this made the tablature feel a little bit more like traditional tab music on paper. TuneFox mode was removed for a beats per minute slider, and a button to add a second way for users to open up the tab settings.

The Lick Switcher

Users responded to the Lick switcher wonderfully, and for many it was their favorite feature. However because this concept does not fit into most standard UX patterns, I created a first time onboarding bubble to introduce users to this great learning tool, encouraging users to try it out. We also rebranded this feature as "creative tab" in an effort to use less jargon. 

The Rest

The bottom navigation also included a deselection button for highlighted tab. The song scrubber was updated to be thicker, and more obvious so users did not lose their place in a song. Chord charts included multiple inversions, helping users see how they would make these chords in other places on the neck. This can be brought up with the simple tap of a chord above any measure.

Cut Features

As with any project there are many features that don’t make the final release, or are pushed out for later. TuneFox mode ended up being that feature for our team. At first the original implementation for users was lacking depth, and felt tacked on. We ended up redesigning this feature until we were confident it would be user friendly, but due to complications in development, the feature had to be cut.

TuneFox Testing Mode

For TuneFox mode we decided to break down a song one measure at a time. This would allow users to train their ears measure by measure, and also make this feature easier to develop. To access TuneFox mode, users simply turn their phone horizontal. This allows users to access the mode seamlessly, without adding clutter to the navigation on the song page.

When users see a measure, they observe what notes they are challenged to guess by ear. When ready they can tap the play button and the measure will loop. Users play along with the measure, and try to correctly play the notes they are hearing. If the user guesses right, the note is unlocked. If wrong, the hidden note will turn red.

Final Thoughts

TuneFox was built during bus rides to work, weekends, and late nights with a metric ton of coffee. I started this project while working at Misfit Wearables, and continued working on it after I had left Misfit for full time freelance. In order to create a new music learning tool, I needed to treat TuneFox like a fulltime job, even if that meant some sleepless nights. Before launch, we were able to show off TuneFox to a few influential grammy award winning Banjo players such as Steve Martin and Graham Sharp. Earning their praise was a real sign that we had just created something special.

At the time of this writing, I believe TuneFox to not only be the best work I’ve put out as a designer, but some of the best work I’ve done as a banjo player. Getting to work on a project from every phase of the design process is rewarding, but building a product that will help not only myself, but many other users become better banjo players is a feeling that is hard to match. I learned a lot about time management and really got involved with more user research, and being the only designer meant I needed to play the role of product manager as well. For what it is worth, I’m pretty sure I’ve become a better banjo player in the process.

Check out the latest version of TuneFox, Click Here.

I’m currently looking for a full-time product design role, let's chat:  stegalldesigns@gmail.com