chordstar

cs 160 user interface design fall 2014

paulina ramos
jason won
sarah hernandez
alvin yau
daniel kang

Learning guitar is hard.

It can be overwhelming for a beginner. You have to
gure out where to place your ngers on the fretboard,
know what chords come next in a song, and constantly
look up and down from the fretboard to a music sheet.
Chordstar is an assistive learning app that displays
chords in progression on the smartwatch screen
(worn on the underside of your fretting wrist) as you
play the guitar, providing a seamless guitar-learning
experience. Were targetting beginning guitarists ages
15-40 who are just starting to learn how to play chords.
The entire experience will take place on the fretboard,
which minimizes the amount of context switching and
maximizing learning focus and eciency.

Brainstorming
We started with a very open-ended brainstorm, from which
we generated over fty dierent ideas. We then narrowed
this down to our twelve favorite ideas, and after discussion,
selected our top three ideas:
Knobby (an automatic door opener)
Picture Trigger (a watch picture trigger for GoPros)
Guitar Hero (a guitar learning app)
From these, we decided that Guitar Hero would have the
most potential.
Guitar Hero would provide a useful learning platform for
beginners by teaching them chords in real-time on the watch,
encouraging them to practice, and providing useful analytics.
By wearing the watch on the underside of the wrist, the user
can have all relevant information in one centralized eld of
view, instead of having to constantly context switch between
an information source and the fretboard. In addition, the
microphone on the watch can detect when to change out
the displayed chord, so the user does not have to ddle with
any of the devices. In the end, the user can focus purely on
interacting with the guitar, and nothing else.

Ideation
We then worked towards guring out exactly what features users would need on the app.
Since the main purpose of the app was to provide one centralized location for everything
related to guitar learning, we came up with several tasks that users of our app wanted solved
so we could design our app around them.

Picking a song to play

The user must be able to easily search and select a song through the application, and get all
relevant information (lyrics, chords, etc).

Tracking practice time

A problem that beginners (to anything) typically have is simply not putting enough time in. We
can track their practice time, encouraging them to be more responsible about practice.

Learning a song
The user must have all information relevant to their learning in front of them. More or less this
is just the current chords and how to play each chord.

Recording yourself
Listening to yourself play can give you a lot of insight into how to improve your play. However,
this is normally quite tedious so most guitarists avoid it.

Tuning the guitar

Having an in-tune guitar is key, and is especially relevant once you start playing songs with
dierent tunings (standard, drop D, double drop D, open D, etc)

Listening to specic song exerpts

Guitarists typically want to listen to what a section should sound like, so they can emulate it.

Ideation
Another feature we considered was displaying karaoke-style lyrics on the phone screen so
that the user can sing along while playing a song. However, we ultimately decided to not include
this feature after discovering from our user research that learning song lyrics was not a primary
concern for beginning guitar players. Having both features would be a little overwhelming for
a beginner.
Finally, our app name also went through many iterations. When we rst conceived the idea, we
called it Guitar Hero just for claritys sake. Later, we changed it to Strummly before nally
becoming Chordstar. The last name change was a pivotal point for our apps design: Strummly
conveyed a more cutesy and pleasant feeling, while Chordstar conveyed more power and
ambition. After deciding on Chordstar as the nal app name, we envisioned a dark theme
with bright neon colors against a black background, reminiscent of rockstars and concerts.

Sketches

Initial sketches: originally, we wanted to put most of the functionality on the watch.

Sketches

Final sketches: because of the unique form factor of the watch, we decided itd be best to
move more functionality to the phone. This shows a typical workow of selecting a song,
playing it on the guitar, recording it, and listening to it again.

User Studies
In order to gain more insight into a guitars learner, we
conducted three contextual inquiries using the master-apprentice
model to get a feel for how people currently learn guitar. We
observed them where they typically practice from start to nish,
intermittently probing them for rationale behind some of the
decisions that they made. We avoided direct interview, because
learning guitar is rather dicult to break down into individual
tasks.

PARTICIPANT 1

MALE, 21, ELECTRICAL ENGINEERING AND COMPUTER SCIENCE

This interview took place where he normally practices guitar: in his room. It was rather
dimly lit and he preferred to sit on his bed and play guitar there. First, we discussed his
background, both in general and specically with music. Then, he showed me how he
normally learns guitar. He grabbed his guitar, played a few chords just to check that they
sounded vaguely right (note: his guitar was actually out of tune by a little bit!), and then
proceeded to look for a song to play on his phone. He mentioned that he sometimes
uses his computer for this purpose, but he typically uses the UltimateGuitar phone
application to both nd a song and grab the associated music.
Once he started practicing, there were only a few things he alternated between doing:
reading and playing the chords and lyrics, and specically checking how to play one
particular chord. There would only be about 10-20 seconds of actual playing each time
before hed have to interrupt his playing to interact with his phone to check something
or scroll down. Most of the time hed just move the strumming hand o to scroll down
to see more chords/lyrics, but sometimes hed have to use both hands. When he did,
repositioning the fretting hand took a couple seconds, which is probably why he tried
to minimize using that hand. When he looked up how to play a specic chord, the
actual fretting for that chord took up a lot of space on the screen, and he usually just
memorized the other chords in the song so he didnt have to keep on closing and
reopening the page. I also noticed that the way his head and wrist were positioned
to fret, his wrist was in his eld of vision.
Afterwards we briey discussed what our vision for our application was. He conrmed
that he was able to see his wrist very well. He also mentioned to me that he does
spend a lot of time scrolling up and down the page, and although the UltimateGuitar
app has an auto-scrolling feature, its very dicult to know what pace you should play
at, and its even harder to use if you make mistakes.

PARTICIPANT 2

MALE, 21, INTEGRATIVE BIOLOGY

User #2 generally practices guitar in his room to avoid disturbing his roommates, so
we conducted the interview there. He began by getting his guitar and four dierent
music books out: one was a beginners guitar book and another was a chord dictionary.
After the initial setup, the rst thing he did was tune his guitar. He did this by using a
tuning device that would play the note out loud rst; then he would play the note and
adjust the strings on the guitar until the device indicated that the correct note was
played. He did this several times for a series of notes. After this, he began with a simple
warm-up that he had learned from his guitar instructor. He played some scales practicing
nger movements along the frets. He explained to me that it is important to move your
ngers between strums otherwise there will be a messy transition between two notes.
This warm-up was to help him practice smoothly transitioning between notes. While he
was doing this, I noticed that for most of the warm-up he was looking at his hand placed
on the frets to check his nger positioning, but he would occasionally look down at his
lower hand to make sure he was strumming the correct string.
Next, he took out one of his music books and propped it up in an open drawer in his
dresser (using it like a music stand). He started playing through some of the music but
he often would have to consult another one of his books to gure out how exactly to play
some of the chords. This took a while to get through one song. After he was done
practicing, I asked him about our application and if he thought it would be helpful to him.
He suggested adding in a game portion that has you match the chord where it will either
give you a picture of the chord or it will give you the name of the chord, and you play
through as many as you can get through. He said it was important to be able to read the
chords and to be able to name them. He also pointed out that for beginners, it is really
helpful to have visual pictures that show the ngers on the frets and identify the fret
numbers and strings that must be pressed to play each chord. He said including these
pictures would be helpful. He also pointed out that you dont necessarily always play
chords, sometimes it is just notes. He brought up some interesting things we will need to
consider and also lent us some of his beginning guitar books so we could use them as a
reference for some additional guidance.

PARTICIPANT 3

MALE, 22, COMPUTER SCIENCE

This user practices guitar in his room mainly because his roommate is the one that
teaches him how to play. The tasks were quite simple: they talk about what song they
want to play, and then measure by measure, they proceed to learn the song. One of the
most challenging part of learning how to play the guitar was when the users roommate
was trying to show him what frets to press down on when trying to play a chord. It was
dicult because his roommates ngers were in the way to see exactly which fret was
being pressed down on. Another aspect that added diculty was that a lot of the whole
process was a matter of recall rather than recognition. That meant that when his
roommate was trying to show him a chord, it wouldnt be long before he would forget
what his roommate had just showed him. One last thing the user mentioned was that
since his roommate is also a student at Berkeley, he could only ask his roommate to
teach him something new when his roommate wasnt busy; that means the user was
limited to whenever both he and his roommate had free time.

Competitive Analysis
We looked in-depth at three dierent competitors that are available on the market right now.
PitchLab Guitar Tuner is a hands-free tuning app for guitars and other acoustic instruments.
Though it has a very sophisticated tuner which can even help you determine how well youre
playing specic chords, it does not teach someone how to play a song. In addition, the app
is mostly on the phone, which means users will still have to switch focus between the phone
and their fretboard. In addition, the app also lacks documentation and has a very unintuitive
user interface.
Learn Guitar Chords is a chord learning app that teaches users to play and learn chords on
the app by pressing down on virtual frets. It provides instant feedback about whether youre
playing the right chord or not. However, learning chords on a virtual fretboard is far dierent
from learning chords on an actual guitar (hand positioning, nger strength, size, feel, etc). In
addition, this app does not specically teach you songs.
Guitair is another virtual fretboard app for. Unlike Learn Guitar Chords, it lets users learn
songs, and uses smart watch technology (worn on the strumming hand) to strum the strings.
However, it doesnt actually ask you to push down frets; instead, you push down buttons
which correspond to dierent chords. Though this is more fun and simple, it does not really
teach you any oine guitar skills.
After examining the competition, we found that there really isnt a successful similar app that
currently exists. We provide a unied experience that both gives users hands-on experience
with an actual guitar and minimizes context switching by putting all relevant information on
their wrist, near the fretboard.

Personas & Scenarios

Sally is a 20 year old College student. Sallys new roommate in the dorms has a guitar
and is pretty good at playing. She has encouraged Sally to learn and has even oered
to let Sally borrow her guitar. However, because of both of their busy schedules, there
is never a good time for a 1 on 1 tutoring session, so Sally is stuck to learn on her own.
Sallys roommate told Sally to look up songs and chords on the internet, but Sally is
having a really hard time guring out where to start and nding material that is suitable
for her beginning level. Sally does want to learn how to play, so she can eventually play
duets with her roommate, but the frustrations she has come across have almost
completely discouraged her from trying at all.
Sally has been making a lot of improvement with her guitar playing since she downloaded
and began using Chordstar. She likes that she can keep track of her progress so she
knows exactly how much she is improving. The practice menu also helps Sally monitor
that she meets her goal of 5 hours of practice each week. She keeps track of this by going
to the android context menu button and selecting the View Progress option from the
menu. This takes Sally to a screen where she is able to see practice stats for the last
seven days. She can also easily click on the Spinner at the top of the screen to change
the displayed stats to Last Weeks stats or her Average Stats. The Visualization of the bar
graph really helps Sally understand her practice data and helps her make new goals for
improvement.

Personas & Scenarios

Michael is a 16 year old high school student. Some of the other kids at Michaels school
will bring guitars to school and play at lunch, attracting the attention of many cute girls.
Michael really wants to learn to play guitar because he is hoping it will help him attract
girls too. Michael has no experience reading sheet music and is having a really hard
time guring it out. Michaels goal is to be able to play hit songs like "Hey Soul Sister",
so he can perform them at lunchtime for the girls, but right now it seems almost
impossible to Michael.
Ever since Michael downloaded the Chordstar application, he has seen some serious
improvement in his guitar playing abilities. One of his favorite features the application
has is the tune your guitar feature. When Michael plays for the other girls at school, it
is so important that his guitar is in tune so the song sounds correct to Michael and all
of his friends who listen to him play. To tune his guitar, Michael simply opens the
Chordstar application and selects View Tuner from the android context menu. He then
starts by pressing down the E button, which is the rst note on the tuner screen. The
tuner will play the note from the phone and Michael continues strumming E and
adjusting his guitar until his E matches the E played from the tuner. He then repeats
this process for all the rest of the notes on the tuning menu. Once he has nished his
guitar is in tune and is ready for playing!

Personas & Scenarios

Alex is a 38 year old stay at home dad. Alex had always wanted to play the guitar but
never got around to it. Reecting back on his life he is trying to get around to some of
the things he never had time for when he was younger. Now that his 9 year old son is a
little bit more independent he has some time to learn to play guitar. Because Alex needs
to be there for his son, he is not able to go get lessons, and learning from books has
been quite dicult for Alex. Alex is hoping that he can learn enough to be able to join
the neighborhood band with some of the other dads, but so far it has been a struggle.
Alex downloaded Chordstar because he heard from a friend that it helps eliminate some
of the unnecessary frustration that comes with learning to play guitar. Alex opens the
Chordstar application and is immediately shown a screen that gives him the option to
select a song from his already downloaded songs, or download a song. He has currently
been working on learning State of Grace by Taylor Swift, because it is his wifes favorite
song and he is hoping to surprise her with it once he is able to get a 100% accuracy on
the song. He selects State of Grace and hits the Play on guitar button on the following
screen. The phone application then reminds Alex to turn his watch around so he can
view the chords on it while he is playing. Alex really likes that the notications are pushed
to his watch with the chord to play. Not only has this solved Alexs previous issue with
constantly having switch between looking at his hand positioning and his music books,
but this also means that he doesnt have to worry about counting time between notes.
The watch handles that by pushing notications to his watch at the correct interval that
matches the timing of notes in the song. Alex plays the notes as they come up on the
watch and when a note is played incorrectly the watch will keep showing the note until
it is played correctly. Once Alex nishes playing the song, he is shown a screen that
shows his accuracy for his session.

Final Designs

created using Photoshop

Practicing a Song
phone interaction

Splash screen

Select a song, or add more

songs to your library.

Choose whether to play

or listen to the song

Practicing a Song
phone interaction

Prompt for you to turn your

watch around.

You can practice the song

on the watch, or end
your practice session.

At the end of the session,

you can view your score or
try practicing again!

Practicing a Song
apple watch interaction

Tabs for each chord are pushed to the watch when you start practicing a song. This
provides a very readable way for users to gure out what chord to play.

Practicing a Song
toq watch interaction

Our design for the Toq watch is slightly dierent, due to its technological limitations. Here you see a
two-step lookahead of chords being displayed on the Toq screen as a notication. The numbers
correspond to what frets need to be pushed down basically a condensed version of a tab.

Listening to a Snippet

Select a song, or add more

songs to your library.

Choose whether to play

or listen to the song.

Listen to a particular snippet

of the song.

Tuner and Practice Log

Tune your guitar!

At any point, open the sidebar

View your weekly and

average practice logs

Technical
Challenges

Unfortunately, we had a lot of technical barriers that prevented us from implementing

most of the functionality of the app. Firstly, sound processing on mobile devices is
extremely dicult, so we were unable to perform actions such as recognizing correct
chords and responsive guitar tuning. Secondly, the Toq watch had a very limited API,
so we could not implement things such as pushing tab images to the watch and
recognizing when the user had changed the orientation of the watch. In addition, due
to some time crunches, our Android app layout was designed with only the Samsung
Galaxy S3s layout in mind, and only Android 4.2 and above.

Learning to play guitar is dicult. Beginners have to struggle with learning

the order of chords in a song, learning how to actually fret and position their
hand correctly for the chord, learning the tempo of a song, and sometimes
even learning lyrics and guring out how to sing and play at the same time.
Most people use a computer or a phone to look up sheet music or chords
for songs, and this means when people actually play the guitar, they have to
constantly look back and forth between the fretboard and some other
auxiliary screen. Having to constantly switch between looking at or
interacting with both the screen and the guitar makes for a disjoint
experience that can be overwhelming for beginners who are already
struggling with both parts individually.
With Chordstar, we focused on making the learning process a little more
cohesive by providing all relevant information right on your fretting wrist
to make a more seamless and ecient guitar-learning workow. By having
all information right in front of them, aspiring guitarists can feel a little less
overwhelmed and a little more prepared to become a guitar hero.