Tunear App

01. The Challenge

The CalArts course assignment was to create a simple (3 page) app design from scratch. I'm a firm believer in research-founded design, so with my guitar-playing background I chose the musical instrument tuner as the base concept for my app, with a special listening game/feature as an added bonus. The name of my app is "Tunear", which is a combination of the words "Tuner" and "Ear" as a nod to the listening feature of the app. "Tunear" also means "to tune" in Spanish, so the name works on a couple of levels.

02. The Strategy

Tunear is a guitar-tuning app for beginner preteen and teen musicians who have big dreams of sharing their music with the world. Tunear not only provides a quick and easy way to tune a guitar with a smartphone, but it also has a listening feature that helps train the user's ear to recognize the guitar string notes. Designed with a music club look and feel with hazy twilight gradients and simple line illustrations, Tunear has layers of color with glowing accents to help provide visual contrast and direct the user's eye. I sketched out the two different pages (Tuning page + Listening page) of the app to anticipate what buttons/icons/symbols the user would need to easily navigate and enjoy the app.

A summary of the main activity of the app:

The home screen will default to the guitar tuner page of the app, which will use the smart phone's microphone to pick up the guitar string notes as the user plays them. The screen will feature a guitar neck with color-coded strings so the user can easily keep track of which strings they are tuning. The screen will also show a progress dial so the user knows how sharp/flat the strings are until they are properly tuned. The second page of the app is the listening feature, where the smart phone speakers will play a guitar string note, and the user selects the coordinating string on the screen that they think matches the note they hear.

‍
A Step-by-Step walk through of the app:

A user opens the app on their smart phone and is prompted by a pulsing dial on the main page to begin strumming a guitar string. When the smart phone microphone hears the notes being played, musical note images will float down the page to indicate that the user is being heard. The user knows the tuner is working by the changing location of the tick arrow on the dial and the changing color of the dial itself: orange indicates the string sounds sharp or flat, and the user is rewarded with an animated green glow when the string is tuned correctly. The string the user is strumming is also reflected on the screen by highlighting the coordinating string string on the on-screen guitar neck illustration. This will reduce the amount of times the user will have to look down at their hands vs. focusing on the on-screen activity.

The user knows they are on the "Tuning" page because the menu symbol on the bottom right corner of the screen is glowing white while the other symbols are faded white. When the user selects a different menu navigation symbol, it will glowing white while the others will change to faded white.
‍
When the user selects the ear symbol to view the "Listening" page, they are prompted by a white glowing "Listen!" button to start hearing the different guitar string notes. The button will scale larger as it is pressed and invert in colors once selected. Once the button has been selected by the user, it will be replaced with play, pause, and stop buttons. The note will automatically being playing, highlighting the play triangle in green. The user then taps on the labeled guitar string illustrated on the page, and when they select the correct string, it will animated with a highlighted white glow. If the string is correct it will highlight with a success message the same color as the correct string. If it is an incorrect guess, a "keep trying" message will appear. The note will be repeated every 3 seconds until a string is selected of the sound is paused/stopped by the user. Once the user has made it through listening to all 6 strings, they will receive another success message/animation and then the play, pause, and stop symbols will be replaced with a the passive "Listen!" button so the user can begin again if they like.

03. The Result

This was my first UI/UX mobile app design project, and I loved creating the Tunear brand. I received a certificate for Visual Elements of User Interface Design from CalArts for completing the course, and I was excited to dig deeper into more UI/UX design.