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键盘比手机屏幕宽,可以更方便手动调整音阶位置与节奏。

因为发现这个专业编曲者的需求,我们决定未来开发40音版的Muro Box的时候,会针对有编曲经验的使用者设计,让他们可以直接把在计算机或Midi键盘乐器编辑中的Midi档,直接输出到Muro Box试听演奏效果,这样可以他们根据试听结果马上调整编曲会更有效率。

目前我们的第一代20音版的Muro Box只有针对非音乐玩家的一般大众设计,所以我们的手机App只有包含基本编曲操作功能键。以下这个影片会简介我们目前的App包含了哪几种音乐编曲上传方式。

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」放到智慧八音盒演奏,因为这首歌会唤起他们父女的共同回忆。有兴趣阅读这个温馨故事的朋友,欢迎点阅我们的使用者故事。

收集用户体验后的意见

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