Muro Box 的App開發歷程

Muro Box的機械外表之下,很多人沒有注意到我們在 app 上所做出的努力。在此分享我們如何從零開始設計世界唯一的機械式音樂盒的專屬 app。

App:最重要與最不重要的存在

Muro Box 從最初的發想開始,就是物聯網音樂盒搭配專屬的 app,但 app 同時也是被無數創業前輩/顧問建議最先移除的功能。

怎麼說呢?因為 app 的開發成本相當的高,開發時間長。工程師的薪水高不說,手機 iOS 與 Android 的差異,讓每一件事情我們都需要付出雙倍的人力。加上手機不停更新,就算功能開發完了,無時不刻還要支出維護系統的人事與設備成本,妥妥的就是一個錢坑。

保守的說,如果沒有 app,Muro Box就只是一個能換歌的音樂盒,但這也是顧客第一眼注意到我們的功能。也就是雖然 app 提供了附加價值,但卻不是音樂盒的核心價值。如果目的是要以最低的成本做出最實惠的音樂盒,正如顧問的建議,app 是必須要捨棄的。

也許是我(馮振祥)作為軟體工程師的出發點不同,更因為我不是傳統音樂盒的業者,所以我眼中看到的價值,是用 app 我還能創造多少過去沒有的新功能。我希望能夠用社群的方式,在  app 世界中與其他音樂盒愛好者分享音樂盒的感動。

也許是這一份浪漫,讓我們扛下了所有開發的辛苦,自始至終沒有捨棄 app 的開發。但我們連模仿的對象都沒有,如何從零開始開發這個世界上從未有過的音樂盒 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 的標誌,因為一般大眾對音樂盒最有印象的零件就是這片音梳。最後,書鴻想到 Muro Box 的首字母 M 和音梳形狀類似,就設計了這個音梳形狀的 M 當作 App 的標誌,我們也把這個特殊字體形狀運用在 Muro Box 的商標了。

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

為了尋找潛在客戶,我們所做的事情

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

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

想像中的顧客是與現實不同的

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

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

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

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

觀察與修正的過程

在每堂編曲課的中場休息時間,我們會簡介智慧音樂盒的 app 功能給大家認識,然後邀請學員填寫一份問卷告訴我們他對這個 app 的設計建議,同時也附上課程滿意度調查表。課後我們會針對學員的建議檢討我們的 app 功能設定,再請 UI 設計師書鴻與工程師哲庭一起研究要如何修改。

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

從觀察中發現新客群

我們發現許多無樂理基礎的初學者在初次操作編曲軟體時,只會隨機點按音階來試聽,因為他們無法依據樂譜提示在正確的位置點按音階。因此,我們才會請編曲師示範如何用簡易圖案設計出一段旋律,藉此來模擬使用者如果沒有依造樂譜指示輸入的話,可以怎樣即興創作出專屬的音樂盒旋律。

後來,編曲師偉立就設計出這段由一條魚,一顆愛心和一個笑臉這三種圖形構成的有趣旋律。我們把這段影片分享到粉專上,沒想到意外吸引到新的客群:想用簡易互動方式教小朋友玩音樂的老師與家長。

編曲客群要的不是App

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

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

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

聽歌客群要的是海量曲庫

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

雲端曲庫有設計熱門歌曲,最新歌曲排行榜,還有曲風分類,也可以用歌曲名,歌手名,電影/電玩名稱等當關鍵字,直接查詢是否有其他客戶公開分享相關歌曲,以便不會編曲只想找到好音樂的客戶加入自己的歌單收藏。我們的APP目前支援以下語言:繁體/簡體中文,英文,日文,德文和韓文,目前用英文或繁體中文來輸入關鍵字,可找到較多曲目因為這兩個語言的客戶最多。

依照反饋開發 App 新功能

目前 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除錯 (Debug)
2019年,在 app 正式上線開放下載前,團隊全員固定每週二傍晚開會並測試 app 穩定性。當時我們的兒子還不到一歲,也跟著我們工作到晚上開會後才回家。

APP 開發是持久且耗時的

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

如果重來一次,Muro Box還會有 App 嗎?

自從 Muro Box App上線後,許多人告訴我他們也有創業的靈感,想要做成 app,來詢問我的意見。我聽到後都是一律勸說三思而後行,總會有辦法不用 app 也能達到一樣的目的。

怎麼說呢?因為 app 只是一個工具,本身不能帶來營收,卻要消耗最多的成本,所以不是一個理性的投資。應該要找更低成本的工具快速驗證市場。

以 Muro Box 為例,經由編曲課後的顧客訪談,我們發現編曲的核心顧客要的是電腦專業編曲軟體,這不是手機上小螢幕可以完成的。而單純被 app 吸引的客群,例如參加手作音樂盒的顧客,他們要的是免費的數位模擬音樂盒功能,不一定願意付高價購實買體音樂盒。甚至是我們年紀偏大的顧客群,也對 app 複雜的操作功能排斥,希望只要一個按鈕可以啟動音樂盒換歌到下一首或上一首即可,他們希望有很大的硬體空間在音樂盒內,或者像隨身碟一樣簡單插上去就自動讀取其中的音檔了。針對不喜歡用APP連線控制換歌的客戶,我們目前的旋鈕即可控制自訂歌單離線狀態下換歌演奏,加上MIDI Input 插孔可外接隨身碟。如有興趣了解怎樣設定離線歌單,請見這篇教學網誌

難道APP真的一文不值?不是。例如Muro Box的 app 帶來了換歌的巨大便利性。留言與按讚功能帶來了全新音樂盒的社群經營模式。用 app 取代複雜的實體操作面板,讓音樂盒外觀設計更簡潔,沒有螢幕與按鈕的設計,甚至讓人有種不是電子產品的錯覺。

當然可以做得更好的方式,是延後 app 開發的時程,讓一開始仍然在克服音樂機構難關的我們,能夠更集中資源與心力在產出第一個單純可以換歌的音樂盒。並在穩定量產後,再開啟 app 的研發。

無論如何,我們扛下了所有開發的辛苦,自始至終沒有捨棄 app 的開發。如果重來一次,Muro Box還是會有 app。

音樂盒是我們的共同回憶

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

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

常有客戶告訴我們現在家裡已經不能沒有音樂盒當鬧鈴定時演奏的陪伴,我們覺得很榮幸客戶跟我們一樣愛用智慧音樂盒,習慣每天聽到它演奏一首首自訂曲目讓平凡生活多了些樂趣。如果您有興趣了解怎樣讓音樂盒定時演奏自訂的歌單,請見這篇教學網誌

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

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