Guitar Tuner
An Apple Smartwatch App
Haptic, Sound & Visual Feedback
String Tuned
Tighten String
Loosen String
All strings tuned!
Context
I have been playing the guitar for a few years now and have also known a number of guitarists. I observed that we share a common frustration when tuning the off-tune (or loosened) strings of the guitar before playing. I chose to explore this problem for a small smart-watch design project..
Timeline
May 2019
2 weeks
Responsibilities
Solo project where I did basic UX research, interaction & visual design & animation.
Tools
Pen & paper
Principle
Sketch
Solution
After some exploration of the Apple Smartwatch, I decided to use haptic feedback, complemented with sound (& visual tracking on the watch) as an alternative to just visual feedback on mobiles to guide the user through the tuning process which greatly reduces interaction burden and attention, while making guitar tuning a seamless and intuitive experience.
The most popular method of tuning guitar strings is through mobile apps that help match the strings-sounds to their correct frequencies. The difficulty lies in placing the mobile comfortably to view the feedback from the frequency meter while using two hands for playing and adjusting the strings on the guitar.
Problem
Feedback Patterns & States
Apple has defined 9 different types of haptic (+Sound) feedback patterns. I picked 4 of the 9 to create a combination that maps well with the user intents for tightening and loosening the strings.
01 Up
Current state: String is tight and has higher than correct frequency
User action suggested: Loosen string to achieve right frequency
Haptic+Sound: Up - Tells the user that an important value increased above a significant threshold.
Visual:
02 Down
Current state: String is loose and has lower than correct frequency
User action suggested: Loosen string to achieve right frequency
Haptic+Sound: Down - Tells the user that an important value decreased below a significant threshold.
Visual:
04 Stop - All Tuned!
Current state: All strings are tuned & have right frequencies
User action suggested: Do nothing - stop tuning & enjoy playing your guitar!
Haptic+Sound: Stop - Tells the user that an activity stopped.
Visual:
03 Success
Current state: String has correct tightness & frequency
User action suggested: Check next string, or do nothing
Haptic+Sound: Success - Tells the user that an action completed successfully.
​
Visual:
Apple Smartwatch Haptic Guidelines
Apple's Guidelines
Use haptics to draw attention only to important events.
​
Use each haptic only for its intended purpose.
​
Provide visual cues to correspond with haptics.
​
Initiate the playback of haptics at the appropriate time.
Guitar Tuner App
The app uses haptics as the main source of feedback
Visual Design
The haptics are initiated in response to individual pluck-actions of strings.
However, it does require user to set their plucking pace as per the latency in feedback.
01 Low-fis
Critique: The design felt a little too crowded as it is showing tabs of other strings that are not immediately needed
Critique: The visual design has opened up and allows for focused and effective tracking of status of each string
When I validated my solution using Apple's design system outlines, I observed that the tuner app was using haptics to communicate a variety of information in a short period of time - which could lead to cognitive overload. However, due to time constraints I was only able to mark this as concern at the end of the project.
Each pattern is carefully matched with a specificied intended feedback
Visual states are available
The haptics are initiated in response to individual pluck-actions of strings. However, it does require user to set their plucking pace as per the latency in feedback.
02 Iteration 1 of High-fi
03 Iteration 2 of High-fi
04 Final Design
Reflection
I explored a new sensory interaction media and its application in a real-world use case. I also enjoyed using Principle to design an animation piece for the visual design part.
The design guidelines violated by this interaction design solution need to be investigated further through user testing to further iterate the design.
Let's work together
I'm currently looking for full-time roles in Product & UX design (willing to relocate).
