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
Starting with Apex Legends was natural, given our team's familiarity with the game. We condensed crucial information into 6 intuitive screens and 3 pop-ups, ensuring a comprehensive yet streamlined user experience, all while integrating unique components for enhanced engagement.
Chromatic Tuner
Starting with Apex Legends was natural, given our team's familiarity with the game. We condensed crucial information into 6 intuitive screens and 3 pop-ups, ensuring a comprehensive yet streamlined user experience, all while integrating unique components for enhanced engagement.
Settings
Starting with Apex Legends was natural, given our team's familiarity with the game. We condensed crucial information into 6 intuitive screens and 3 pop-ups, ensuring a comprehensive yet streamlined user experience, all while integrating unique components for enhanced engagement.
Technical solutions
From a game with just 10 key stats to another boasting 100, we crafted individual interfaces that not only display essential game metrics but also offer insights into strategies and item usage, fostering skill growth and community learning.
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
