Muro Box App Design

Brainstorming Muro Box's App Features

Since Muro Box is the world’s first app-controlled music box, nobody had used a mobile app to control a music box before. In order to design a user-friendly app, we have researched users’ needs and habits carefully.

At the beginning, we had a weekly meeting with our User Interface (UI) designer and back-end software engineer to discuss the structure of our app. When we were not in meetings, we concentrated on designing a prototype of Muro Box and other visual aids to help us find potential customers.

programmable music box Muro Box - UI designer with the team in early stage
In 2017 Spring, we were located in a co-working space in Taipei. In the meeting room, we discussed the structure of the app with our UI designer, Shu-Hung Huang (in the right corner) and back-end software engineer, Che-Ting Kuo (in the left corner).
This is the overview of programmable music box Muro Box APP
This is the overview of our app illustrated by our UI designer, Shu-Hung Huang.

In the end, we decided to include the following functions in our  app:1) music composing, 2)music uploading, 3) playlist editing, 4)  keyword search for uploaded melodies, 5)smart alarm setting, and 6) finding a composer to order customized music box melodies. For our team, the music composing feature is the the most challenging one because most of us could not read music sheets. Only the co-founder, Dr. Tsai, can read music sheets because she has learned to play piano for two years. Therefore, we decided to hire a consultant to run the music composing classes so that we could learn from the professional directly and collect the users’ feedback during the class.

Designing the "Logo" of Muro Box App

To create a coherent style for the app, our first step was choosing a representative color for it. Because our goal was presenting a “new life” of a mechanical music box with “modern technology”, our UI designer suggested we choose a color that integrates the green color and the blue color. It was because that green is often associated with “life and nature”, while blue is often associated with “technology”.

When designing the logo of our app, we simplified the mechanical structure by presenting only the comb part, which is the key feature for people to recognize a mechanical music box. Next, our UI designer blended the comb shape with the M shape to represent the initial letter of Muro Box.

programmable music box Muro Box APP's icon
Our UI designer has created many icons for our app in the past. We choose the one being circled in red ink.

Designing More Visual Aids for Muro Box

In order to find potential customers to collect their suggestions for our app, we have run a series of music box DIY classes and digital music composing classes in 2017-2018. Shu-Hung Huang has designed the logo and T-Shirt for our company and two posters based on the look of our early prototype.Thanks to his design, we could find some people interested in Muro Box even though our early prototype was not as pretty as the final product.

In this photo, Shu-Hung is our UI designer on the left, and Willy Tsai is our music composer who taught the music composing classes.
Each photo in the large poster represented one of the classes we have run to meet potential customers. In this photo, Shu-Hung is our UI designer on the left, and Willy Tsai is our music composer who taught the music composing classes.

At that time, we thought that our potential customers were either fans of traditional music boxes or people interested in learning how to compose their own music. Eventually we realized that most of the participants in the DIY music box classes were not our target audience. If you want to know the reason, you can check out our previous story: Muro Box Prototype Designing. Only some participants in our music composing classes turned out to be our backers in the first crowdfunding campaign in Taiwan in 2018.

We received various questions from our potential customers. For example, a recurring inquiry is whether we will open our Application Programming Interface (API). We answered this question with a creative image plus a detailed explanation in our Facebook post. In this post, we explained the reason to why wont’s have an open API, but we keep this option open for the future. This picture presents the look of our previous prototype. If you are interested in learning more about how we improved the design of our prototypes, you are more than welcome to read the previous story: Muro Box Prototype Designing.

Some fans asked us whether we will open API
Some fans were software engineers and asked us whether we will open API in our Facebook page in 2018. For an app engineer, Muro Box can provide not just the freedom to listening to your own music, but also open the possibility to controlling a musical instrument with your own coding.

Observing the Users' Needs in Music Composing Classes

Before we completed the app development, we run music composing classes to observe the learners’ operation on the free composing software: LMMS and Studio One. In 2017-2018, we hired a music composer, Willy Tsai, to teach adults how to use free software to compose digital music. We were fortunate to have both advanced learners and beginners in our classes for observing their different needs before we decided the tools in our app. We designed those tools to help our users create and upload melodies swiftly.

The UI designer of programmable music box Muro Box APP
The person pointed by an arrow is our UI designer, Shu-Hung Huang.

Our UI designer attended the music composing class in the fall of 2017. He summarized the necessary steps in creating a music melody, and then he suggested we present only the necessary information on the app when considering the limited space of a mobile screen.

At the end of each class, the participants did a survey to provide further suggestions for our app design. After class, we shared our observation with our app engineer, Che-Ting Kuo, and UI designer, Shu-Hung Huang. We have revised the design of our app many times to ensure that our users can use it easily even if they have no prior knowledge in music composing. The following video is an example of how to compose a new melody by doodling on our app.

Dr.Tsai introduced Muro Box (programmable music box) app in the music composing class in 2018.
Dr.Tsai introduced Muro Box app in the music composing class in 2018.

In the music composing classes, we found that many beginners could only randomly add notes on the composing software because they cannot translate the notation of music sheets into the digital music notation. Therefore, we came up with an idea to ask our music composer, Willy Tsai, to create a new melody based on some simple patterns to represent one’s random drawing. In the end, he composed a piece of melody that includes the shape of a fish, a smiling face.and a heart in this video. Later, when we shared this video on our Facebook fan page, it accidentally helped us find a new target audience: teachers or parents who want to teach kids music with interactive games.

We noticed that experienced digital music composers would prefer editing their music on professional software rather than on our mobile app. It was because they wanted to play and record their music in the software at the same time. Thanks to their suggestions, we decided to develop the web-based application for the 40-note version of Muro Box in the future to help composers create complex melodies more efficiently and easier. Our current mobile app was designed to include only the basic composing features to match with the current 20-note Muro Box.

The following video shows how you can create or upload a new melody in our app.
The following video shows how you can create or upload a new melody in our app.

MIDI files can be played on the programmable music box Muro Box through the APP
The Muro Box app is the medium for uploading one's music creation. There are many kinds of software can export the work in midi format, and we only listed some common ones here.

In order to help users upload their music edited in a third-party software, we provided three methods in our app. The first method is to upload music from a user’s smartphone storage, which means uploading their midi files to their smartphones first. The second method is to copy a URL from the Internet and then paste it in our app. Our app will automatically download the midi file from this URL. This method can help users export midi files from their cloud storage, such as Google drive and Dropbox. The third method is to scan a QR code to download a midi file before uploading it to the Muro Box app. This method is specially tailed for presenting a special melody as a gift by printing the melody download link as a QR code on a card that can be packaged with the product.

We came up with the QR code method because we wanted to help our first user in the US prepare a meaningful wedding gift for his daughter. He wanted to play the song, “You’ll be in my heart” by Phil Collins on Muro Box, so he hoped that we put a card inside the package to teach him how to download this melody. If you are interested in reading more about how his daughter felt when receiving Muro Box, welcome to read this story.

Collect Real Users' Feedback from Facebook

We launched the beta version of our app in Taiwan in May 2019, and we also announced it in our user’s Facebook group. Thanks to many Taiwanese backers helped us find bugs, we improved our app efficiently. We launched the official app to support international users in June 2019.

programmable music box Muro Box's APP
This is a screen shot of our Muro App in the app store when it was first launched in 2019 Spring.
Debug the Muro Box (programmable music box) app with our team members in 2019
Our engineer team was testing the app on both iOS and Android phones before launching it in May 2019.

When our app was officially launched, our first kid was already 11 months old. Our baby has witnessed the development of Muro Box prototypes and its app because he always attended our engineers’ meetings on Tuesday evenings. He also has listened to the music played by the early prototypes of Muro Box since 2018. 

The following video shows one of prototypes our baby has listened to, and the melody was composed by our music composer, Willy Tsai. This melody was written based on a letter I (Dr.Tsai) wrote when expecting him to see the world in one month.

2018 was quite a year for us. It was that year that we had to care for our two babies (Muro Box and our son). Our first child was born one month after Muro Box’s 1st crowdfunding campaign in 2018. Through all the stress and late nights, we now appreciate those challenges as they have filled our lives with memorable and meaningful stories. When looking back on the pilot run product journey, there were many lessons learned worth sharing with friends and family. Now, Muro Box has become the heirloom of our family memories. We hope that when the users of Muro Box turn the key to play their own music, they will also recall many of their own precious memories as we do.

The next story, The Pilot Run Production of Muro Box, will record how we conquered various challenges in producing this smart but sophisticated music box with the collaboration of many factories in Taiwan.

Next Story: The Pilot Run Production of Muro Box

Read More