Creating a tuner app: Tunefy
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.
Please visit my website for more: www.orioltorne.com or try the prototype here!
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.
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.
CREATING USER PERSONAS
CREATING USER FLOWS
LOW FIDELITY WIREFRAMES
HIGH FIDELITY WIREFRAMES
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.
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.
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.
STYLE GUIDE
ILLUSTRATIONS
FINAL UI
iOS
ANDROID
Try the prototype here!
Hope you liked it! Please show some love for the project and like it :)
MORE CASE STUDIES
Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by me:
