xTuner: A Metronome & Tuner for the Next Generation of Musicians
Context
My Role:
Team Size:
Deliverables:
Time Frame:
The Problem:
As we settle into an age of digital music creation with modern, RGB-inspired interfaces and futuristic MIDI Controllers — musicians are no longer willing to tolerate music apps that aren't as smart as they are.
At least 60% of musicians under 35 now use their phone as their primary tuner and/or metronome — tools that accompany every practice or recording session.
We need digital tools that feel competent and beautiful next to a pro editing computer and belong in the hands of the next Ed Sheeran or Metro Boomin.
Kickoff:
We set out to design a tuner/metronome app that would satisfy the needs of a new generation of musicians — a generation that uses their devices as key tools for songwriting, producing, and performing.
Project Objectives:
Stage-Worthy
A tuner needs to be usable during a small performance as well as in the studio or home.
Pro-Feel
The customer wants to feel pro even if they are a beginner. Embody the "pro experience."
Comprehensive
Provide all the tools a producer, songwriter, or performer needs to make their magic.
Intuitive
Use common gestures to empower the user to navigate the app in a familiar way.
Research + Discovery:
We began our discovery process with a competitor analysis and series of interviews which revealed some opportunities for improving the digital tuner and metronome experience:
A Poor Tuner Experience 🤨
Customers complained of a poor translation from the physical tuner's functionality to the digital medium. They reported clunky interfaces that are only useful if you're holding the phone close to your face, and are hard to read from far away.
From our own testing, we observed some tuner apps have a scientific, sound engineer feel, and are filled with readings of frequencies, cents, and decibels. Other options have oversimplified interfaces that don't look like they belong in the hands of a pro musician.
Competitive Analysis of the Top 3 Tuner Apps:
Next Steps: What types of products will the next generation of musicians need?
1. Streamlined, Thoughtful User Experience📱
These modern-day musicians and songwriters now expect elevated design and good user experience to be implemented in all their digital tools, so their tuner and metronome should be no different.
2. Intuitive and Modern UI to match their DAW's 🎛️
They are using beautifully designed digital audio workstations like Logic and Ableton to produce their music.
3. Consistent with their Consumption Tools 🎶
They use Spotify or Apple Music to discover influences and are using services like Soundcloud, Youtube, and TikTok to release and promote their music.
Early Iterations
The Chromatic Tuner
A chromatic tuner is a tool that nearly all string musicians use for each performance and practice session. This includes guitarists, bassists, and other instruments like ukuleles, mandolins, etc.
Visibility
One of the main goals with the tuner was to make it visible from far away, as the user will likely have both hands full while tuning. The phone could potentially be placed on a piano, on the floor, or on a music stand.
After approving lo-fi wireframes, we iterated on quite a few different visual designs to maximize legibility while avoiding the "traffic" light look that many tuners have.
Most of these initial designs were ugly and didn't accomplish the goal of providing great legibility while looking elevated and futuristic.
Later on, we created a dial from a mesh gradient and tweaked the colors more toward red/yellow/green so that they would resemble a traditional tuner. This turned out to be well received by test participants and provided good legibility while also reportedly feeling professional, modern, and clean.
The Metronome
Our next challenge was to create the metronome, which is an adjustable click player that musicians practice along with to improve their timing and keep a consistent tempo.
This was the most challenging interface to design, as there are many buttons and adjustments necessary to provide a working metronome.
In the end, we developed a metronome that test participants felt comfortable using and appreciated the hierarchy of features in the UI.
Design System
High Fidelity Design & Interactions
Chromatic Tuner
Adjust Metronome Tempo
Metronome Preset Interface
Metronome Toggle Settings
Piano Pitch Reference Player
Guitar Pitch Reference Player
User Testing: Problems & Solutions
Tap to Expand Items
Challenge #1: Too Many Taps
At first, we thought our customers would want to input the tempo on the metronome by using a numerical keyboard, allowing high precision. Upon testing, users complained that this required too many taps, and disrupted their practice flow.
Implementing a circular slider was better received among test participants, and allowed us to expand the colorful RGB design system.
It seemed counterintuitive at first that musicians would prefer a less-precise number entry system, but it became obvious after observing them using it within their workflow.
Often, test participants would be practicing a piece, set their metronome to 140, then after one run-through they would increase the tempo to 150, repeating the process and changing the tempo again with each run-through.
Key Learning:
These musicians are often using their metronome in an intuitive, non-fixed flow state and our interface needed to reflect that.
Challenge #2: Placing the 'Tap Tempo' Button
Tap Tempo is a feature that lets the user tap on the screen in rhythm to set a tempo. Tapping to the beat along with a song sets a 'beats per minute' average, allowing the user to replicate the same tempo as the song they are listening to.
As seen in Challenge #1, the original placement of the tap tempo button was on the same screen as the numerical keyboard.
We soon realized that hiding this button away from the main interface was a bad idea. One of the drummers testing the app mentioned that he'd prefer the tap tempo to be readily accessible. He mentioned that he uses tap tempo quite often and having it buried in a menu would be something that would frustrate him.
Placing an icon on the main metronome screen to access tap tempo allows users to access the feature with only a single tap. It opens the 'tap tempo' pad in place of the metronome "face" providing a large, centralized area, and also prevents accidental changing of the tempo.
Challenge #3: Avoiding the "Traffic Light" Look
We didn't think the common red-yellow-green color scheme of tuner pedals and apps would fit in with the modern and beautifully designed tools that the next generation of musicians demand.
Traditionally, red signaled out-of-tune and green signaled in-tune. This system works because of the stark color difference between the two and the resemblance with traffic lights.
'C Tuner,' an Already Existing App
Our improvement to this was to design a futuristic-looking mesh gradient, which acts as a backdrop for the needle display. While it doesn't avoid red-yellow-green, it incorporates other colors and blends them to create a more nuanced and elevated feel.
With a teal-green hue at the top of the dial, it's still quite obvious when you're in-tune. There is also a small indicator light below the dial, which glows red, orange, or yellow when out-of-tune, and green when in-tune.
More Projects:
