Muro Box 的App開發歷程

定義Muro Box App的功能

Muro Box是全球首創的智慧音樂盒,在它誕生之前,從來沒有人用手機遙控過音樂盒演奏。因此我們做過許多實驗,並且仔細觀察使用情況來修改設計,才能開發出容易上手操作的App。 

創業初期,我們固定每週開會一次,邀請團隊中的使用者介面設計師(黃書鴻)與後台工程師(郭哲庭)與我們一起討論出App需要哪些功能。開會以外的時間,我們專注在設計Muro Box樣品機以及文宣。這些文宣和樣品機一樣重要,因為它們能幫助我們吸引潛在客戶來做意見調查。

智慧音樂盒Muro Box早期團隊成員
2017年春天,我們開始發想APP功能的時候進駐在台北市的一個共同工作空間。照片中最左邊的人是後台工程師哲庭,照片中最右邊的是UI設計師書鴻。
智慧音樂盒Muro Box App介面總覽
以上是書鴻所設計的Muro Box App介面總覽

最後,我們決定讓App包含以下功能:自由編曲,音樂上傳,編輯清單,搜尋樂曲,預設演奏時間的鬧鈴功能,與找編曲師訂製專屬樂曲的服務。 對我們團隊而言,自由編曲這個功能最難做。因此,我們就決定要找專業的編曲師來協助我們規劃App,並協助我們開設數位編曲課程,藉此尋找有興趣玩編曲的民眾來協助我們設計與開發App。

設計App的代表色與標誌

在設計一整套統一風格的App視覺之前,首先要決定用哪一個顏色當作它的代表色,選色時還需要考慮是否此色有符合產品的形象。我們認為智慧音樂盒Muro Box是個跨時代的發明,它用創新科技賦予傳統音樂盒新生命。因此,我們選擇用科技感的藍色加上代表新生命的綠色來調和出一種中間色作為App的代表色。

決定好顏色之後,我們先從App在手機的目錄頁會顯示的標誌開始設計。既然智慧音樂盒的關鍵技術是我們開發的專利機芯,它可以程式化控制音梳上的每個音階被凸點敲擊的時機,我們就決定要在用音樂盒機芯的意象來設計。當時書鴻設計了好幾種簡化的機芯造型,最後我們決定用音梳片作為這個App的標誌,因為一般大眾對音樂盒最有印象的零件就是這片音梳。最後,書鴻想到Muro Box的首字母M和音梳形狀類似,就設計了這個音梳形狀的M當作App的標誌,我們也把這個特殊字體形狀運用在Muro Box的商標了。

智慧音樂盒Muro Box APP的圖示
圖中圈起來的就是最後選定的Muro Box APP標誌。

為了開發App,還設計了其他視覺作品

為了找尋潛在客戶作產品開發的相關調查,我們在2017-2018年間開設了一系列的音樂盒手作課程與數位編曲課程。書鴻也在這個時期為我們團隊設計了公司商標,團隊制服與宣傳海報。下圖的海報還印著早期設計的Muro Box造型。感謝書鴻的巧手設計,讓我們在工程樣品即使不如真實產品吸睛時,可以吸引到有興趣的客戶來協助我們作調查。

智慧音樂盒Muro Box的活動照片
照片中最左邊的是UI設計師黃書鴻,他身旁是編曲師蔡偉立。照片中的海報記錄著當時的工程樣品機造型,還有我們開過的音樂盒DIY與編曲開課活動紀錄。

當時我們會想開設手作音樂盒課程與數位編曲課程,是因為我們以為智慧音樂盒的目標受眾會是喜歡客製化音樂盒其中造型或曲目者。但是之後我們發現大多數報名手作音樂盒課程的學員都不是Muro Box的目標受眾。有興趣了解原因的朋友,可以閱讀這篇網誌:Muro Box的外型設計歷程。很感謝其中有幾位數位編曲的學員,後來在Muro Box首次群募時,還特地前來預購商品支持我們。

觀察學員編曲過程所獲得的啟示

2017~2018我們在App開發過程中,曾經開過好幾堂數位編曲課程,用市面上的免費編曲軟體 LMMS 和 Studio One教大家數位編曲技巧與工具。我們聘請編曲師來教大家基礎的編曲技巧。很幸運的是,當時的課程有吸引到初學者和懂樂理的編曲高手來報名,所以我們在課堂上可以觀察他們遇到不同的操作問題。因此我們能好好評估在APP的編曲工具應有哪些功能,才能讓使用者不論是否用過編曲軟體都能輕鬆創作與上傳音樂。

智慧音樂盒Muro Box APP的UI 設計師書鴻
照片中箭頭標示的人就是UI 設計師書鴻,他正在專心研究編曲軟體的介面該如何簡化放到手機上呈現。

我們創辦人夫妻和手機介面設計師書鴻都有一起上數位編曲課,透過親身實作整個編曲流程,從如何在線上尋找喜歡的樂譜,到如何看懂樂譜手動輸入音階與設定節奏,每一步書鴻都很仔細思考要怎樣簡化步驟,運用手機上有限的螢幕大小顯示資訊來引導使用者完成編曲。

我們在2018年成立了Muro Box贊助者的編曲社團,讓已經購買產品的客戶可以在我們的臉書社團提問與分享自己的創作。我們在此社團也分享了過去編曲師製作的講義與參考資料,希望讓沒機會上到編曲課的客戶也可以透過線上資料自學基本編曲。

在每堂編曲課的中場休息時間,我們會簡介智慧音樂盒的APP功能給大家認識,然後邀請學員填寫一份問卷告訴我們他對這個APP的設計建議,同時也附上課程滿意度調查表。課後我們會針對學員的建議檢討我們的APP功能設定,再請UI設計師書鴻與工程師哲庭一起研究要如何修改。從課程觀察到提出修改建議,這個的步驟我們進行了很多次, 才研究出讓沒有任何編曲經驗的使用者也能看懂的操作方式:即興編曲。以下影片會簡介使用者如何把自己即興設計的圖案,透過App的編曲介面轉換成音樂盒的旋律。

智慧音樂盒Muro Box創辦人之一蔡筱晨
Muro Box的共同創辦人蔡筱晨是編曲課程的負責人,她在課堂上說明App設計,同時也負責管理Muro Box的編曲社團與粉專。

我們發現許多無樂理基礎的初學者在初次操作編曲軟體時,只會隨機點按音階來試聽,因為他們無法依據樂譜提示在正確的位置點按音階。因此,我們才會請編曲師示範如何用簡易圖案設計出一段旋律,藉此來模擬使用者如果沒有依造樂譜指示輸入的話,可以怎樣即興創作出專屬的音樂盒旋律。後來,偉立老師就設計出這段由一條魚,一顆愛心和一個笑臉這三種圖形構成的有趣旋律。我們把這段影片分享到粉專上,沒想到意外吸引到新的客群:想用簡易互動方式教小朋友玩音樂的老師與家長。

我們也觀察到過去已經有編曲經驗的學員,會希望直接用筆電甚至是midi 鍵盤輸入音符來編曲,然後直接把編曲軟體輸出的Midi檔傳送給Muro Box演奏。因為筆電或Midi鍵盤比手機螢幕寬,可以更方便手動調整音階位置與節奏。

因此,目前我們官網商店販售的Muro Box N20產品有推出兩種規格,其中一種是包含MIDI input插孔的選項,這是為了有專業編曲需求者設計。MIDI input插孔與USB隨身碟,筆電和MIDI鍵盤的連接使用方式請見這篇網誌說明。

目前我們官網商城販售的另外一種不含MIDI input插孔的Muro Box N20機種是針對非音樂玩家的一般大眾設計,因為他們主要需求是找適合的音樂盒曲庫下載樂曲收藏到自己的清單,不是自己用專業軟體或樂器編曲。我們有和國外最大音樂盒社團Music Box Manaics合作,我們的App用戶可免費去該網站找歌下載到自己Muro Box 演奏,詳細操作步驟請見這篇網誌說明。

MIDI音檔可透過APP在智慧音樂盒Muro Box上播放
Muro Box需要用我們的專屬app上傳音樂,音樂檔限定用midi格式。市面上有需多種編曲軟體都能輸出midi檔,上圖只是舉例出幾個常見的編曲軟體。

目前App有設計三種把事先編輯好的音樂midi上傳方式:
第一種方式是從手機的硬體空間直接上傳,這種方式會需要使用者先把midi音檔傳送到手機的硬體空間內。

第二種方式是複製雲端空間內存有指定midi檔的網址連結到Muro Box app,手機程式會自動去雲端空間幫使用者下載該音檔。此方式可以方便已經在雲端空間儲存多首樂曲音檔的使用者快速上傳曲目。

第三種方式是用Muro Box app內的QR code掃秒器去讀取印一個已經存放音檔的網址所生成的有QR code, app就會自動下載該曲目到智慧音樂盒內。這種方式是為了方便客戶把自己編曲的音檔和Muro Box一起包裝送禮給親友。送禮前先把曲目上傳到網頁,再把網址製成QR code印在卡片上,收到這份專屬禮物的客人就能透過掃描QR code來下載專屬音樂,達到讓Muro Box演奏專屬回憶歌曲的驚喜。

第三種方便送禮者的音樂上傳方式,靈感來自於我們的首位美國客戶Eric Paul ,他為了給女兒Emily準備一個有專屬回憶的結婚禮物,特地來信拜託我們為他編曲迪士尼動畫「泰山」的主題曲:「You’ll Be in My Heart」放到智慧音樂盒演奏,因為這首歌會喚起他們父女的共同回憶。有興趣閱讀這個溫馨故事的朋友,歡迎點閱Emily寫的使用者故事

收集用戶體驗後的意見

我們在2019年五月先上傳了一個測試版的app只開放台灣地區民眾下載。這個上線開放測試的消息公告在我們的 Muro Box贊助者的編曲社團。很感謝當時有很多客戶回報他們使用後發現的小問題,我們才能很快找出問題一一修正。最後我們的正式版app在2019年的六月就開放讓全球用戶都可以免費下載了。即使沒有購買Muro Box的用戶,也能免費在app store找到我們的App來試玩編曲。

智慧音樂盒Muro Box的APP
在2019年的夏天,我們的App首次在app store開放免費下載。
正在為智慧音樂盒Muro Box的APP除錯
2019年,在App正式上線開放下載前,團隊全員固定每週二傍晚開會並測試app穩定性。當時我們的兒子還不到一歲,也跟著我們工作到晚上開會後才回家。

當我們的App終於正式上線開放全球下載時,我們的兒子(小章魚)已經11個月大了。 他見證了我們每一代的工程樣品機與App的發展,也陪著我們每週跟工程師們開會。 小章魚還在媽媽的肚子裡的時候我們就在開發Muro Box了,他常常陪我們工作到晚上12點趕最後一班捷運回家。2018年七月他出生後,已經聽過我們用Muro Box樣品機演奏好多樂曲,從還有明顯機械雜音的版本,聽到最後音色終於達標的版本已經是2019年了。

以下這段影片紀錄了小章魚正在聆聽智慧音樂盒Muro Box演奏一首我請編曲師為他製作的曲子。這首歌是編曲師蔡偉立先生根據我懷孕當時寫的一篇日記的內容所創作出的旋律。這篇日記是我在預產期前一個月所寫的,標題是:給親愛的寶貝的一封信,後來我們決定用這個標題來命名這首樂曲為「Letter for My Baby」。這首歌有公開分享到我們官方提供的免費歌單內,從Muro Box的app就可以搜尋到它,希望大家聆聽這首歌的時候可以感受到暖暖的愛與祝福。

2018對我們來說是很難忘的一年。在這一年我們歷經初為人父母的喜悅與考驗,我們好像生了雙胞胎一樣忙,兒子和Muro Box幾乎同時來報到。事實上兒子是在我們剛忙完台灣嘖嘖群募結束後一個月內就馬上出生了。這段時間因為是產品的首次量產,加上我們是產品開發的新手,過程中一直發現沒預料到的難關而延後我們的出貨進度。白天忙工作,晚上忙照顧小寶寶,讓我們夫妻每天都身心俱疲。現在回想起來這段辛苦的日子,就覺得很感謝有這些磨練才有現在的我們。因為有這些難忘的回憶,我們才有講不完的故事可以跟親友分享。

現在,智慧音樂盒已經變成我們的傳家寶了,每當我們轉動旋鈕聆聽Muro Box的演奏,一幕幕的精采回憶畫面就會不斷浮現,我們就會想起許多往事可以跟孩子分享。我們希望以後Muro Box的使用者也會跟我們一樣,在啟動音樂盒的瞬間就會喚起許多美好的回憶。

下一篇網誌:Muro Box的首次量產歷程,將分享更多我們在首次生產智慧音樂盒時所面臨的各種挑戰,以及最終我們怎樣克服了這些難關,才讓台灣製造的智慧音樂盒正式出貨,並且準備接受來自世界各地的訂單。

下一篇:Muro Box的首次量產歷程