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的首次量产历程