This website uses cookies to ensure you get the best experience on our website. Learn More

Designed and built a prolific string instruments tuning app

Whenever passion meets expertise, expect fireworks. This is one of the rare cases when our team’s favorite thing outside work met our client’s strategic decision to develop an app. Behold the story and the beautiful final product this endeavor resulted in.

Guitar Tuner+ | String Instruments Tuning App Development

Mission

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.

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.

Outcome

Shakuro designed an app with a revolutionary visual style, personalization, and professional-grade note detection. The app went live and received a bunch of positive reviews from pro guitarists and bedroom enthusiasts.

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.

Guitar Tuner+ | String Instruments Tuning App Development

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.

Guitar Tuner+ | String Instruments Tuning App Development

Digital Tuner Design

The launch version was decided to feature two types of acoustic guitars and a ukulele. These instruments have a lot of tonal differences on top of the design ones, so we wanted an app to reflect that, so we came up with a screen layout featuring a guitar neck and headstock, which gave us a lot of room for animation that we’ve found to be extremely useful in the tuning process.

Guitar Tuner+ | String Instruments Tuning App Development

Visuals

One of the things we wanted to visualize in the guitar. It’s important for beginners to know exactly which string to pick when tuning, so we had to make the main screen UI easy to read but add visual value too.

We started off with a neck profile layout and personalized instrument display based on the selection made on the first launch. This was a strategic decision, as the more instruments get added, the better personalization gets added, especially with extended range and classical instruments.

Guitar Tuner+ | String Instruments Tuning App Development

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.

Guitar Tuner+ | String Instruments Tuning App Development

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.

This type of animation shows the selected string, while also displaying the state of it being in or out of tune. The interface above the headstock is a very intuitive concept widely utilized by digital tuners. The idea is simple: you need to put the ball inside of the circle and use text prompts to see which way to tune — up or down. When the note is in tune and sustained for 3 seconds, the animation indicates the in-tune state.

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.

Guitar Tuner+ | String Instruments Tuning App Development

The digital interface turned out just as clean and functional as we wanted it to be and we moved to what we consider to be the killer feature of the app – the chromatic tuner.

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.

Guitar Tuner+ | String Instruments Tuning App Development

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.

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.

Technology stack

AudioKit 5.1.0

R.swift 5.2.2

Lottie-ios 3.2.3

SwiftyOnboard 1.3.8

UPCarouselFlowLayout 1.1.2

Pitchy 3.0.0

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. Our tribe turned out to be quite versatile with seasoned players and rookie guitarists that made their choice towards the “by guitarists for guitarists” product among myriads of other apps. We’re currently looking forward to designing a massive update to the app with premium features, more instruments, tunings, and smoother experience.