Glissando

June 14, 2022

Glissando is my first iteration for a music game, and it is both a good example of the current limitations I see about music in design spaces, as well as a seed of future ideas that can challenge those limitations. It is a music learning app prototype I made for a Springboard UX design class, and reflects some of my philosophy in ‍creating interactive music environments that I wish to follow forward into the future. 

The germ of this project was that while almost everyone I have met enjoys listening to music, for most people it stops there. To start off, I conducted interviews to confirm this hunch - while it was incredibly common for interviewees to have childhood experience taking piano lessons at their parents’ urging, it was just as common for that interest to fall off later in life. Basic music theoretical concepts would stand as intimidating walls, making most afraid to even pick up an instrument. 

I believe just picking up an instrument and playing is the most important part. My first instrument was a harmonica that I would just play for fun. ‍My design goal was not just to nurture this sense of organic play, 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 is called an isometric keyboard, which is laid out as a 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 harmonic relationships more intuitive for non-piano players, so it was a good starting point for an exploratory instrument where neighboring notes would instantly feel right. In Figma I created a pattern of colors and symbols for each note of the scale to anchor the user and allow them to more consistently hit the same notes without using existing symbols.

Taking all these concepts together, I had plans for a simple app called Glissando. The idea was to use a slowly unfolding isomorphic layout as an introduction to the C-Major scale, note by note. The big challenge now was finding a way to implement the concept, since Figma had strong capabilities for interaction but no way to implement audio. With the help of my course mentor, we identified Protopie as a possible platform, though it was still limited - you can set up samples to trigger and stop playing in response to other interactions, but little else. This made actions as simple as a note stopping when you lift your finger difficult to implement, especially as it multiplied across all of the notes that eased in. Early testing involved squashing simple bugs where notes would sustain indefinitely or trigger from the wrong input. However, I then had a prototype that was ready to bring in front of users to get feedback and round off this project.

In prototype testing, the initial engagement was encouraging. Users would be curious about each mysterious new hexagonal button as it appeared, and touched them to hear each sound. Once all the notes appeared, they weren’t really sure what to do next, and the familiar walls began to manifest themselves. I tried to address this with new features. Visually, colored bubbles would respond to the key you were playing, and aurally the app would play a second note after a delay in response. Unfortunately, neither of these features succeeded at their specific goals. The colored bubbles added some visual flair to the app, but did not sustain engagement on their own. In turn, the delay ended up being beyond Protopie’s capabilities, and mainly added buggy confusion to the app as random notes would come in from nowhere.

Coming off the project, I am proud of how I was able to execute the concept in prototype form. The extra effort into getting at least basic audio added a lot in terms of making the exploration feel natural in testing. I think the problems revealed in testing showed clear suggestions for improvement that would have gone well into further possibly hardcoded prototypes. As a game designer, my goals would be to take this kind of philosophy to deeper places, finding ways to directly turn the player’s actions into an instrument in the game world’s aural fabric.

1 / 3
My initial wireframe for to lay out the isometric keyboard and features.
2 / 3
The design at the time included settings for customizing sound and layout.
3 / 3
In transitioning to high fidelity

Related Posts