Designing and building a prolific string instruments tuning app
When passion meets expertise, expect fireworks. This is one of the rare cases when our team’s favourite thing outside work met our client’s strategic decision to develop an app.
Project
When Livintis W.L.L. contacted us with an idea of building a guitar tuner app for iPhone, we were excited but a bit skeptical knowing how many tuner apps are out there already.
However, minutes into our call with Managing Director, Ritvik Menon, we realized they were not looking to make another confusing digital tuner application. They wanted to create an experience that would encourage aspiring musicians while catering to seasoned players.
We couldn’t have been happier to take on this mission as musicians ourselves and members of a design and development team.
- AudioKit 5.1.0
- R.swift 5.2.2
- Lottie-ios 3.2.3
- SwiftyOnboarв 1.3.8
- UPCarouselFlowLayout 1.1.2
- Pitchy 3.0.0
Mission
Our approach had to be insightful and inclusive, speaking to a wide range of musicians with different tastes in music, instruments, and prowess.
Challenge
Build an app that would have fast sonic response, clear and visible tuning instructions, all in a modern UI with unique visuals.
Design Features
We designed an app with a revolutionary visual style, personalization, and professional-grade note detection. The app went live and received over a thousand positive reviews in just 3 months from pro players and bedroom guitarists.
Process
In the beginning, it was crucial for us to understand what musicians expect from a tuner app. For an outsider, it might seem like a somewhat serious guitarist would not use a conventional app but a hardware tuner of some sort. In reality, professionals use apps they can find on the App Store (and you’d be surprised by some of their choices, Honeyhoney on JRE), or tune by ear from the note they get from GarageBand (whadup, Ola Englund).
Discovery
So, putting a tuner app out there is really a lottery, as you never know who’s going to stumble upon it. With that in mind, we started the discovery phase with a thorough analysis of what’s available, followed by the user profiles definition, and stylescapes.
Tactile Experience
The combination of styles in these three got us in a direction of tactile experience but with enhanced digital functionality. We wanted the tuner to be more than just a generic guitar one, so we started thinking of ways to incorporate other string instruments for later versions of the app.
To cater to the personalization concept, we have created 3D models of custom guitar necks inspired by the iconic brands. This gave our digital tuner screen a consistent look together with a personal touch a user can see in neck profiles, headstocks, string gauge, and so on.
Identity System
After we’ve defined who is the target audience of the app, what problems it solves, and what message it sends to the world, it’s time to build a brand image step by step. Let’s check some strategies and features essential in this process. For sure, all of them should be based on user research and market exploration to find the original solutions.
Wireframes
We took the approach of designing the flow incuding instrument selection, tuning specification, and switching between two types of tuners.
UI Design
We then proceeded with the app design used brand colors, making it utilitarian, sleek, and elegant. In terms of development, we built the app using the Swift programming language which is the primary language for iOS app development today.
Onboarding
The onboarding flow is clean and simple highlighting main features of the app, which makes it easy for beginners to jump right in.
Smart Tuner
The tuner is a Smart mode recognizes a string a user picks and indicates which string that is. The undertuned string also turns yellow or red depending on severity, the in-tune string is green. The labels on each string also trigger sounds in tune, for those into tuning by ear.
Chromatic Tuner
A Chromatic tuner is a mode designed for professional players. It allows for finer tuning, does not require a robust interface, and is as sensitive as any player could ask for.
Settings
Consumer tuner apps do not offer a lot of customization. Our goal was to make the app really yours by allowing you to select an instrument to maintain visual reference with the app screen, you can also control the app interaction, and even calibrate the tuner based on your specific requirements.
Technical solutions
There was a lot of exploration done prior to design and a lot of testing while designing and building the app. Different environments affect the quality of acoustic tuning which is a huge challenge for our app that is positioned to cater to different string instruments. We have incorporated different mechanics to indication in order to negate the environment background noise and have a visual aid to support the tuning process.
Animation
Sound articulation is a mechanical action and while designing interaction, it made us realize how important it is to display the way sound waves vibrate in the context of string vibration.
Alternative Tunings
One of the challenging parts for beginner guitarists is understanding how different tunings are applied over a standard one. Usually, searching for those tunings results in finding text directions which that require some knowledge and are nothing but confusing to someone who just wants to play a song and owns a single guitar.
Our approach here was to give just enough alternative tuning options to cover most of your musical needs. We’ve added several lower and open tunings, and the renowned DADGAD aka Modal D in hopes that they make tuning in and out of these quick and easy.
Chromatic Tuner Design
One of the limitations of consumer tuner apps is that you don’t get past the provided tuning options with the same level of guidance. In the beginning, we’ve mentioned that our original idea was to create an app that even professional musicians could find benefit in.
In our experience with the guitar, we’ve transitioned from standard to a lot of different tunings which resulted in finding favorite ones and memorizing them. If you remember your tuning, you don’t need to look at the strings to tune, you just need an indication of whether you are above or below the pitch.
Chromatic tuners are the type of tuners for doing that. The how studio, rack, and pedalboard tuners work. So, one of our initial suggestions to the client was adding the chromatic tuner in a minimalist professional style you would expect from high-end sound equipment.
Development
We have worked on a sound equipment piece in our past, so setting up the infrastructure to handle audio was not a problem. The phones also became more advanced and Apple native technologies like AVAudioSequencer and MIDI services have evolved to meet the demands of the current sound production industry.
Challenge
The main challenge appeared to be in the setup of the particular response and sensitivity of microphones to fit the frequency range of a specific instrument. Add to that ambient noise of the environment and confirmation sound of the app itself and you get a recipe for disaster. The way our development team has handled that is through extensive testing and fine tuning of the AudioKit library.
.png&w=2560&q=75)
Results
As guitar nerds, for us, Guitar Tuner+ was more than a cool design project with an interesting implementation approach. It was an app we’ve selfishly built for our own use. When you put so much heart into a product, it’s destined to find a response among the people of the same tribe.
Customer testimonial
We are very inspired by the result, the Shakuro team was very involved in the project, which made our appRitvik MenonManaging Director, Guitar Tuner
