New Musical Interface - Tangible UI


UX/UI Designer, UX Researcher


Interviews, Persona Development, Ideation, Prototyping, UX Design, Video Documentation


Arduino, Puredata, Logic Pro, Laser Cutting, Woodworking



Music box is a tangible UI that enables users of all range of musical knowledge and training to play music full of variety in an easy and fun way. Users will be able to play music on their own by simply arranging blocks on a plate and sliding it through the music box with pre-installed sensors. With the design, users with limited any musical training can easily play music without any frustrations. On the other hand, users with advanced musical understanding will be able to enjoy the fun of playing rich sounding music in an innovative way as well. It is hoped that users will become more interested in learning and playing music as they interact with music box.

This project is accomplished with another peer at City University of Hong Kong. We utilized human centered design approach in the process to empathize with our users and come up with ideas, then we developed the design with my rapid prototyping skills.

1. Discovery

i. Problem Scope

Music has always been a great common language for people all over the world. Yet this language has its very own barrier - playing it requires understanding of theories and certain dexterity. With this barrier it has stopped a number of people from continuing learning how to play music, hence lose a great way of expressing themselves and communicating with others creatively. We believe that this barrier should be removed with a design intervention which introduces a new instrument that is easy to play and learn. With such focus in mind, our team moved on to conducting some preliminary interviews to understand our users.

ii. User Research

We conducted semi-structured interviews with 5 potential users. 3 of which tried to learn and failed to master an instrument, and 2 who are experts with solid musical understanding. The semi-structured interviews helped us to identify our user group as the following:

Primary User - Novices: users that have absolutely no musical training at all or failed to master an instrument because musical theory is too complicated
Secondary User - Experts: users that have musical understanding & knowledge. They want to explore new possibilities in musical playing.

iii. Findings

With the user groups identified, we combined our findings from the interview and translated them into personas for us to empathize with in the designing phase.

Novice persona

Expert persona

Expert persona

2. Design

i.Diverging phase

In our research phase, we identified key user needs as the following:


Based on these user needs, we began brainstorming a number of ideas. At the end of the sprint, we reached 10 ideas and we mapped them according to feasibility and creativity. The mapping results lead to our top 3 picks of ideas


ii. Top 3 ideas

a. Synthesizer-like instrument

We proposed a synthesizer-like instrument, where users can play tunes simply by switching knobs to generate tunes they like

b. Flexible pipe instrument

Our idea was to introduce a pipe in a flexible form. By changing its form one at a time you can easily play tunes simulating different instrument

c. Music Box-like instrument

We introduce a new instrument shaped in the form of a music box, but unlike traditional ones it has 4 rows of customizable area.


iii. Decision

After we came up with the top 3 ideas, we referred to our user needs and personas again to reach our final decision. Ultimately we decided to pick the music box-like instrument as our final idea, as it requires a low level of dexterity (i.e. frustration free), easy to learn hence stimulates users interest in music and most importantly it produces a music full of variety all at once. We then named our project as "the music box".

3. Development

I. How does it work

The music box simulates a design of a traditional music box, yet unlike any traditional ones it’s fully customizable. A plate with four empty rows resembles the sealed cylinder of a traditional music box, and blocks of different heights represents the note-triggering pins. The four empty rows on the plate represent percussion, bass, mids and treble. As the user place a block on the respective row, it will generate a sound representing the tone of the row. The sound will also depend on the height of the incoming block, the higher it is, the higher the frequency of the sound will be. Users can simply play a tune of their own by arranging the blocks on the plate and sliding the plate through the music box.

It also provides an additional feature for advanced users to configure the tunes freely. The music box can be connected to any DAW(Digital audio workstations) easily. Once connected, users can adjust the tunes generated by each row on the DAW so that they can achieve the sound full of true variety as they wanted.


II. Considerations

The major objective for designing the music box is enabling users to play music full of variety easily. Therefore we kept the following design considerations in mind to achieve our objective:

  1. Match between system & real world - the music box design resembles the traditional music box design so it is easy to understand. Furthermore the plate design with 4 rows (percussion, bass, mids, trebles) fits most users' real world concept & basic understanding of music well
  2. User control & freedom - user can easily customize the tunes by arranging blocks on the plate as they wish. Moreover they can retract the plate to rearrange the blocks at any time.
  3. Aesthetic & minimalist design - the design is simple as the user only needs to keep the concept of rows and blocks height in mind. Moreover the tangible UI is designed with minimal look of wood only.


III. Final Build

Design sketch

Design sketch

Prototyping with puredata

Prototyping with puredata

Prototyping with arduino, laser-cutting, woodworking

Prototyping with arduino, laser-cutting, woodworking

We first structured our design with a simple sketch and considerations of sensors. We identified Arduino& ultrasonic sensors will be the best fit to detect the height of the incoming block, and therefore introduced it in the system. I then moved on to prototyping using 3d modeling & laser-cutting to produce our music box & plate, then installed and configured the Arduino with sensors on the music box as my project partner focused on translating the incoming signals from Arduino into tunes in puredata. 


Finally, we deliver the music box.