Learning Music is Intimidating
Almost everyone I've met enjoys listening to music, but for most people it stops there. To start off this project, I sought out and interviewed.
Competitor Research and Inspirations
For example, one of the top competitors in the market we analyzed was Yousician, an app which attempts to help a similar demographics learn guitar on their own. Yousician tries to enhance musical recognition by bringing traditional guitar teaching tools like tablatures to life in a way that’s responsive to the user’s own playing. It’s able to recognize what a user is playing through the phones microphone and evaluate that performance in real time.
The advantage to this approach is it can lower some of the accessibility barriers that make it hard to begin learning guitar or any other instrument. Instead of needing to coordinate and schedule with a teacher, Yousician opens up possibilities of self-directed learning.
However, it fails to address two of the key concerns we saw with Angela. First, it presupposes guitar ownership, which is already a costly investment of its own. And more importantly, its technology doesn’t encourage persistence in a strong way. A lot of the app’s long term retainment strategy is built more on using push notifications to encourage a user to come back, rather than making it easy for anyone to hop in and learn immediately after downloading the app.
In order to create a learning platform with better retention and engagement, we decided to look somewhere - at musical games and toys. For example, I took inspiration from Toshio Iwai’s Electroplankton, a Nintendo DS game that presents a variety of small musical experiences as tiny microscopic creatures you can touch and interact with in order to create a widep. The game is instantly accessible from its simple presentation, and can allow anyone to make simple music on the spot.
Our goal then, was to nurture this sense of organic play when picking up the app, but to create a more robust and consistent musical instrument that a user can consistently practice and improve upon in their own time. For these ends, I chose to use what’s called an isometric keyboard, which is laid out as grid of hexagons arranged based on harmonic relationships rather than as a linear sequence of notes from low to high. This kind of arrangement was initially created to make music theory concepts more intuitive for non-piano players, so it was a perfect design to use and test.
First Design
The strategy I followed from here was to try to combine the playful and inviting structure of a game like Electroplankton and apply it to learning music from the new technical perspective that the isometric keyboard presents. For the first sketches, I focused on trying to make the hexagonal keys of the isometric keyboard the centerpiece of interaction in the app, keeping features minimal what’s necessary to play on the keys at the time. The proposed red route for the user in this iteration of the project was to play through the notes highlighted on screen, and then record that as performance as “highlight” at the end.
I was able to turn those sketches into a simple prototype I tested remotely with audio that I played along with their interactions over a video call. These tests showed that users would usually find the main isometric keyboard layout intuitive as a musical instrument and start pressing the buttons to play notes, but that they were confused as to which notes they were playing and unclear on how the highlight functionality worked. I also realized that I was inconsistent with which notes I was playing in coordination with each button during testing.
Protopie Prototype and Branding
Taking feedback from this first round of testing, I moved into turning the sketches into wireframes we could use for a second round of prototyping. The major challenge that came up at this stage was the hexagonal layout of the isometric keyboard. Most of the tools available didn’t have out of the box tools to do hexagonal grids, so we ended up creating one as a figma component from scratch. We then were able to use this component as the foundation of an isometric keyboard based design system, where we created a system of colors and symbols to help identify notes and musical relationships through pattern recognition.
The second major challenge involved finding a way to test our high fidelity prototype as a musical instrument that directly responded to user input. Figma, Sketch, and inDesign had some limited support for audio through plugins, but it wasn’t deep enough for creating a prototype where audio was the central feature. So, for the second round of prototyping we decided to use ProtoPie, a more obscure prototyping focused tool that had support for audio file playback. We recorded a series of organ samples to use for the app’s sound, and went from there to the next round of testing.
At this point, we also started creating an identity for our brand. The first step was choosing the name Glissando, which is a musical term for sliding continuously between notes of two different pitches. This name was chosen for the smoothness and ease both the meaning and the sound of the word implies.
The goal of this brand was to have a calm and approachable personality, so for the main color scheme we focused on a cooler color scheme of blues, greens and purples. We combined that with a minimal user interface that prioritized visual symbols over text whenever possible in order to make something with a simple and tactile appearance that had many possibilities for complexity.
Revisions and Issues
With a new prototype filled with color and sound, we were then able to move to the second and third rounds of usability testing. The second round of usability testing had the user go through a layout that added as new notes as the player hit the last new button displayed on the screen. Once all notes were displayed, a bottom menu would pop up, allowing the user to record and view clips and change levels - at least in theory. This type of functionality wasn’t possible to implement with the tools we had, so the user testing route would end with a menu popping up. This created what amounted to a dead end for the users in this round of testing, as they would quickly play through all the notes, see that the app had no further functionality in the menu, and cease playing.
For the next round of testing, the goal was to increase engagement by focusing entirely on the experience of discovering new notes and playing them. We added in a color bubble that grows and shrinks in response to the user’s touch as they play each note. To add a similar response element to the audio, we added in a delay effect by making each button play a second time after the user stops touching it.
In the most recent round of testing, we found mixed success from these changes. Users did tend to play more notes and try out playing sounds with different lengths and orders in this test, and the average time of engage doubled from a minute and thirty seconds to three minutes. The core issue that arose from the changes introduced last time was that the delay effect we created added a lot of inconsistency in the prototype and did not always work as intended. Users found the prototype interesting but had trouble forming pattern recognition when the link between sound and image was more inconsistent.
Lessons Learned
- Music theory is intimidating
- Non musicians are curious about the experience of playing music
- Consistency is foundational to long term engagement
- Adding responsive effects increases engagement, but creates challenges for consistency
- The core of musical experience is difficult to prototype and test due to visual focus of most tools
