Screen Shot 2015-10-25 at 9.15.24 PM.png
 

Music Box

Tangible ui design empowering users to play music in a fun & Easy way

Collateral:

New Musical Interface - Tangible UI


Role:

UX/UI Designer, UX Researcher


Involvement:

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


Tools:

Arduino, Puredata, Logic Pro, Laser Cutting, Woodworking

 

Overview

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

Hoping to remove the barrier to learn music, our team decided to introduce a design intervention makes music instrument 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. 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 introduce a new instrument shaped in the form of a music box, but unlike traditional ones it has 4 rows of customizable area.

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

 

iii. 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.


4. Takeaways

Be as curious as a 5-year-old

This is my first time trying to conduct some semi-structured interviews to understand users needs. It was a bit challenging to come up with questions at first, yet the process also taught me a lot. I learned that it is important to have a curiosity of a kid who never stops asking whys and hows, and these questions will guide you further to designing great products.

Think broader about user groups

When we first initiated the project, we focused on how to make playing instrument more accessible for beginners. Yet as we interviewed with experts to gain insights about how they master instruments, we also learned that they are interested in exploring more possibilities in musical expression. Therefore we made the decision to include experts as our secondary users. It was my first time trying to introduce a design that is not limited one group of users only and it was a valuable lesson for me to consider multiple needs in one design.

Coordinate collaboration and task division

I collaborated with Angson Chow to accomplish the project. Angson and I shared a lot of skills in common as the courses we have taken and the interests we shared are similar. To maximize the efficiency of collaboration instead duplicating what we do with our similar skills set, we spent sometime sitting down to discuss about what each of us want to focus on. This discussion helped us to figure out our individual focuses and made it a better collaboration.


 

Other Selected Work

A mobile app transforming home automation experience Jan - Apr 2017 

A mobile app transforming home automation experience

Jan - Apr 2017 

SMART HOME

UX Design & Research

A service design project reimagining shopping at Walmart Jan-Apr 2017

A service design project reimagining shopping at Walmart

Jan-Apr 2017

WALMART INSIGHT

Service Design & Research

A wearable app that helps you to recycle better Sep - Dec 2016

A wearable app that helps you to recycle better

Sep - Dec 2016

RECO

UX Design & Research

A website designed for more engaging learning experience Jul-Sep 2015

A website designed for more engaging learning experience

Jul-Sep 2015

AWALLPROJECT

UX Design & Research

Tangible UI design empowering users to play music in a fun and easy way Dec 2014 - Jan 2015 

Tangible UI design empowering users to play music in a fun and easy way

Dec 2014 - Jan 2015 

MUSIC BOX

UX Design & Research

 

Introducing an under-appreciated architecture in mixed reality Feb-Apr 2015

Introducing an under-appreciated architecture in mixed reality

Feb-Apr 2015

THEATRE OF MADNESS

Mixed Reality Design