GrooveMachine

Code meets music.

UI Design | UX Design | Graphic Design

Introduction

GrooveMachine is a tangible interface that uses music as a metaphor to teach kids about coding. It's a table where people can place tangible pieces onto its surface. The center octagonal hub serves as a step sequencer, which causes the tangibles to play a music sample when their section is passed over by light. My task was to bring this project into the digital realm by re-designing its web UI and UX.

Using the GrooveMachine.

What It Used to Be

The previous web version of GrooveMachine.

Everyone agreed that GrooveMachine's website needed a facelift. However, the developers didn't want the overall functionality of the site to change. So I set out to make changes to the look of the website first before I made any suggestions on its interactions.

New Layout

My first move was to experiment with different layouts. I made three different wireframes that kept the tangible drawers, volume and tempo settings, and "Save" button. One functionality I did add was the "Help" button, which I thought was crucial for new users since this app had somewhat of a learning curve.

Each column is a possible layout.

Jumping In

We went with the layout with the navigation bar at the top of the webpage since it offered the most real estate for the sequencer in the center. I also made several mood boards to get a good feel for the tone of GrooveMachine.

Many different styles and inspirations.

Dedicating as much space to the center sequencer as possible.

I also made menus and settings appear off to the side so that users can still see main action of the app.

Menus do not overlap with the sequencer.

Audio Visualization

One major part of the GrooveMachine web app was the audio visualization, one of the factors that distinguishes it from the physical version. The audio vis allows users to "see" the sounds that they're making so they can make a mental connection between the two.

Several audio vis concepts the symbols on the top left indicate direction of movement.

Some of the fan favorites with the first color palette applied. I also tested the code vis overlay on each one in the right column.

Code Visualization

Another important component of GrooveMachine was the code visualization. This was a way for the user to see their actions translated into code. It was updated every time a change was made to the configuration of the table. The web version needed to have something like that too.

The physical version of GrooveMachine had the code vis on a separate screen.

The bottom left box shows the "global" table status. The eight smaller boxes show the "local" octant statuses.

Tangibles

For each tangible I designed an unselected, inactive, and active state. The unselected state indicates that the tangibles were still in the drawers, not yet moved. The inactive state indicates that the tangible has been manipulated and placed onto the table, but not yet passed over by the step sequencer. The active state indicates that the tangible has been manipulated and that it is currently being "activated" by the step sequencer and producing a sound.

The different tangible states.

The blue tangibles have circular markings on them to indicate that they are "connector" tangibles. In other words, the blue tangibles produce the main sounds. The red, orange, green, and yellow tangibles are "modifier" tangibles. They're meant to attach to the connector tangibles and modify the main sound, like audio effects.

Re-Skinning

I started to experiment with brighter color palettes because the UI was a bit too dark.

Playing around with sequencer colors.

Applying color palettes to the background and other UI elements.

This one felt the most appealing.

Bottom Menu

A bottom menu was added because of important additional functionalities that weren't present in the previous version of the web app. The "Direction" and "Sample Pack" settings were added since they were a crucial part of the table. "Direction" changes the direction of the step sequencer, while "Sample Pack" changes the genre of sounds that are played (i.e. Mariachi, Acoustic, Hip Hop, etc.).

All of the options laid out.

Onboarding

The last major part I designed was the onboarding screen. This part was tricky because I wanted to give the user enough information but not to overwhelm them. I decided to do a semi-transparent screen overlay with simple instructions regarding each button.

Instructions on how to use GrooveMachine.

Making Accessories

I also made a loading screen for the app.

Fun times ahead!

And I designed some large scale informational posters to go along with a museum exhibition of the physical version of GrooveMachine and a style guide for future reference.

What's Next?

I want to conduct some user studies on the web app to see what users of our target demographic think and feel when using it. I'd also like to do a comparative analysis of existing projects like GrooveMachine to further iterate and inspire my design desicions.

View Full Project