simple-mockups2.jpg

Tunefy is an app that helps you tune your guitar, bass or ukulele anywhere using a clear, intuitive and integrated native interface. No more, no less.

Mockup1.jpg
Android Copy@2x.png
 

01 . CONTEXT, PROBLEM AND APPROACH

There are a lot of tuner apps out there that have too complex interfaces with a lot of redundant information that requires the user to constantly be tapping on the screen or pay too much attention to details, increasing drastically the cognitive load. The last thing a musician wants when having a detuned instrument on his or her hands, is having to continuously tap the smartphone to go through information before starting to tune or when tuning and not having a clear and neat interface that can be seen and understood quickly and effortlessly. Time is valuable, and the longer the time-span between the user need and the solution is, the bigger the frustration.
Tunefy offers you a clear and logic interface that guides you from a relatively long distance using colors, forms, icons and sound feedback.

 

02 . WHY GO NATIVE?

USABILITY

Because the user already knows how to use native patterns, using Material or iOS Human Interface Guidelines can improve app's usability and learnability. I.e the tabs on android, the bottom menu on iOS or the icons themselves.

CONSISTENCY

Native patterns give huge consistency across apps and screens to ensure the user doesn‘t get overwhelmed easily.

 

03 . CREATING USER PERSONAS

User Personas@2x.png
 

04 . CREATING USER FLOWS

5.1 Mobile Platforms iOS User Flow.png
 

05 . LOW FIDELITY WIREFRAMES

lofi-wireframes.jpg
 

06 . HIGH FIDELITY WIREFRAMES

high-fi-wireframes_iOS.jpg
 

07 .  RETHINKING THE INTERFACE

PROBLEM AND HYPOTESIS

Redesign tuning user interfaces and interactions to make it stand out from the standard patterns. Using morphing shapes, movement and sound to reduce the cognitive load.

APPROACH

Keeping always in mind two important Design Principles: KISS (Keep It Simple, Stupid) and MAYA (Most Advanced, Yet Acceptable), I began to study behaviors in forms, movement and color.

form-study.jpg

SOLUTION

After going through different approaches I selected morphing shapes because of their simplicity and effectiveness. Opacity wasn't the best when considering people with sight problems, shape movement was good, but could be simplified. Gradients were good, but too many color options could overwhelm users. After considering more complex shapes like a plane and its context, thought could be implemented later as a further gamification of the app, but not as a standard solution for the default auto home screen.

 

09 . USER TESTING

After implementing the new interface I conducted some user testing which guided me to the final tweaks to shape the final UI - I needed some feedback to let users know the interface was ready to receive audio signals so I added a microphone icon. Feedback was also needed on the "Auto Tuning" screen to show when the tune had reached the correct frequency so I changed the color of the solid from blue to green.
On the "Manual" screen I simplified even more the guitar, bass and ukulele illustrations to reach the essentials of the instruments and also added them as a soft background on the "Splash", "Sign in" and "Sign up" screens.
I reduced the glow of the CTAs on the iOS screens.
I added some explanatory information below the "Loop" and "Sign in" and "Sign up" fields on the "Settings" screens. Also on this screen, I added a toggle switch button that allows users to activate the frequency value to make it visible while tuning their instrument.

 

10 . STYLE GUIDE

Style Guide.png
 

11 . ILLUSTRATIONS

Illustrations@2x.png
 

12 . FINAL UI

iOS

iOS Copy@2x.png

Android

Android Copy 2@2x.png
 
 
guitar.jpg