TunaString

Preface

Tuna String is a digital guitar tuner app that will be available on both the Android and iOS. This app is for guitarists of all levels that want a quick no non-sense tune-up so that they can get jamming as quick as possible with no fuss.

Tuna String's Pluck-N-Play interface all you have to do is just open the app, pick a tuning key, and pluck away while Tuna String automatically detects which string you're trying to tune, and tells you whether you need to tighten or loosen the strings.

Ideation

Mood Board

The issue with most existing tuners is that they try to copy the appearance of physical tuners rather than adapt to the phone. They either become hard to read, or set too serious of a mood for what is supposed to be a fun session. The app is meant to be quick and easy to use. I was going for a laid back look and feel compared to existing tuners.

A mood board showing the inspirations driving the UI design of Tuna String, and the colour palettes to be utilized
Images used in the layout were pulled from Pinterest.
A mood board showing the inspirations driving the UI design of Tuna String, and the colour palettes to be utilized

Typography and Colour

The typefaces chosen had to balance each other out. Fredoka comes off as a fun and relaxed type - which is great when looking to set the tone, but it needed to be balanced out by a typeface such as Open Sans for information delivery. Yes, the app is supposed to look relaxed, but it also needed to come off as an app that knew what it was doing.

Brandmark show casing the colours forming the identity and look-and-feel of the website Brandmark show casing the colours forming the identity and look-and-feel of the website

Initial Mock Up

Button Library Draft

The functions of the app, on the UI level at least, are very simple. The average user will only ever use two buttons: a record button, and a button to change the music scale. Below you can see the very first draft of the button library compiled for the application.

A mock up showing the initial designs and properties of the buttons to be used in the application A mock up showing the initial designs and properties of the buttons to be used in the application
Initial Mock-Ups

The initial mockup saw various changes to the UI. Ideally, I'd have wanted the utility buttons at the bottom of the screen but it didn't quite work since the guitar bridge, and the saddle is generally considered the bottom-most part of a guitar. You'll also notice that the "Start Tuning" button was abandoned in favour of a microphone symbol.

A mockup showing the first UI variation, without an established scale present that would tell users if the guitar is in fact in-tune A mockup showing the first UI variation, without an established scale present that would tell users if the guitar is in fact in-tune
A mock-up variation showing a visible scale being introduced to the UI, and a change in a few of the colours presents. A mock-up variation showing a visible scale being introduced to the UI, and a change in a few of the colours presents.
A mock-up variation showing the UI with a different background, resized buttons, and the introduction of a Help button A mock-up variation showing the UI with a different background, resized buttons, and the introduction of a Help button
A mockup of the settings menu overlayed over the main app background A mockup of the settings menu overlayed over the main app background

Final Prototype

Components and Colour

Button Library

A final button library was introduced that better achieved the look-and-feel the application was going for.

The final designs for the buttons to be used in the application The final designs for the buttons to be used in the application
Icons and Scales

Icons and graphical elements were introduced to better inform the user as to how to use the application in a simple and intuitive manner without relying on the off-chance that users had previously used a guitar tuner previously.

The icons and graphics used to represent the modules that give users feedback about where they are on the music scale The icons and graphics used to represent the modules that give users feedback about where they are on the music scale

Prototype Demonstration

First Launch
A visual of the final app prototype's splash screen that appears on the launch of the application A visual of the final app prototype's splash screen that appears on the launch of the application
A visual of the prototype's main interface showing button placement, and tune scale placement A visual of the prototype's main interface showing button placement, and tune scale placement
Settings Menu
A visual of the prototype's main interface showing button placement, and tune scale placement A visual of the prototype's main interface showing button placement, and tune scale placement
A visual of the prototype's settings menu and the menus present within it A visual of the prototype's settings menu and the menus present within it
Tuning Demonstration
A visual showing the changes to the strings in the UI when tuning is in progress A visual showing the changes to the strings in the UI when tuning is in progress
The logic behind how the tuner works with the user, and responds to input The logic behind how the tuner works with the user, and responds to input

Final Thoughts

If we look at the functionalities within the application itself, we'll very quickly realise that we've got everything we might need from a guitar tuner. The real difference comes from how it presents itself to the user. By avoiding the cutting edge look and feel, we've adapted the app to suit people who might not be professional guitarists or adept guitarists for that matter.

The way we present something will easily change how people perceive it. Make the app a bit playful, and users might think this is a lightweight app that's easy to use, and if you make it a bit more serious people might see the application as a bit too sophisticated for their current skill level.