Project Overview
TuneIt is a simple tuner app that that includes some features to help novice guitar players tune their guitars. This product is designed for users of any age and any technology literacy level.
Project Duration
The project was developed from June through October of 2023
The Problem
Tuning a stringed instrument can be confusing for new players of various instruments. There are some situations where players may severely under-tune or over-tune strings because the tuner will automatically change what string they are on or have no frame of reference what specific tone the string should be at.
The Goal
Create an easy to understand tuner app that makes tuning simple and provides some tools to help make tuning easier for new people.
My role
UX Designer, Researcher, and UI Designer
Responsibilities
User Research, wireframing, and prototyping
Starting the Design
Digital wireframes and low-fidelity prototype
Main Screen
The tuner interface uses a vertical layout to intuitively convey the current tuning state of the note that you are tuning.
Additionally, the tuning peg doubles as a button to play the current note and, in a hypothetical final version of the app, will play a sample of what the note should sound like.
A string lock feature allows the player to only focus on one single string for tuning without having the tuner auto-snap to another string.
.
Tuning selector
Above the tuner, a dropdown is present that allows the player to choose alternate tuning methods for the tuner as well
First Time User Experience
To help introduce the features of the app to new users, a guided first time user experience allows users to help them get familiar with the tuner's features.
Low-Fidelity Prototype
The low fidelity prototype establishes both the primary flow and the first-time user experience flows for the product.
The low fidelity prototype can be accessed here.
Refining the Design
Mockups, high-fidelity prototypes, and accessibility
Mockups
In the first iteration of the mockups, I worked on implementing an image of an actual guitar headstock. Most of the design was carried over from the initial wireframes.
Over the course of many iterations, work was done to help add some depth to various elements of the UI and to make the overall experience more comfortable to read.
Key Mockups
High Fidelity Prototype
A final high fidelity prototype presents the app in its final style. It presents the first time user experience flow and the overall main screen experience.
You can view the high fidelity prototype here.
Accessibility Considerations
Contrast levels were considered on every screen. Additionally, I explored utilizing depth in order to help make the screen more comfortable to look at and to make popup menus more defined.
Going Forward
Takeaways
Impact
The app was well received from friends and family who helped provide feedback for the tuner app. Users expressed interest in the string lock and note playing features of the tuner and stated that this idea would help make tuning a much easier experience.
What I learned
This project was a major exercise in learning how to utilize the tools provided in Figma in order to add more depth to my designs compared to previous designs that I have made in this portfolio. This also increased my familiarity Figma overall.