2020
音樂社群APP DESIGN By 謝佩霖
чЫощМД
ф╝Н
ч╡РшкЮ
шВЖ
шиншиИшжПчпДх▒Хчд║
хПГ
хЙ╡ф╜ЬшиншиИшккцШО
ш▓о
шиншиИчЩ╝х▒ХчнЦчХе
шиншиИц║Рш╡╖
хг╣
CATALOG
хг╣
шиншиИц║Рш╡╖
背景
BACKGOUND
在生活中找不到人一起去音樂祭嗎? 獨立創作音樂作品時找不到發表管道嗎? 聽膩平時的音樂需要不同音樂類型推薦嗎? 又或是否因為欣賞的音樂類型較為小眾 而在生活周遭找不到有音樂共鳴的夥伴呢?
01
目的
GOAL
● 推廣音樂交流 ● 透過音樂活動增進人與人之間的互動 ● 歌單分享與推薦 發掘在地好聲音
02
人物誌
Alison 旅外留學生 女
人物統計特徵
人物情境
行為
需求與目的
03
PERSONA
Sam 大學生 男
James 上班族 男
二十四歲 澳洲 富裕 語言能力佳
十九歲 住台北市 家境小康
三十三歲 高雄 單身無經濟負擔
Alison是一名在澳洲留學的研究生
Sam是一名喜歡追蹤流行音樂及
James是一位在科技業上班的上班族
在課餘時間也做著Mixtape混音作品
EDM文化的大學生
無奈職場工作領域的關係無法接觸到異性大學
除了在Soundcloud分享自己的創作
嚮往國外的音樂祭熱情奔放的文化
加入過吉他社 有特定喜愛的音樂類型
也喜歡分享自己的音樂觀點
想要揪有著共同興趣的夥伴一起前往
與朋友參加過相關的大型音樂活動
專攻音樂應用學 獨立音樂創作者
搜集國內外電音派對的資訊
平時有使用交友軟體的習慣
晚上在夜店兼職當DJ
參加過國內舉辦的電音派對
拓展價值觀相似的交友圈
喜歡分享音樂資訊及參與活動
喜廣結朋友
每隔周六與學長學弟們團練
>推廣音樂普及
>了解最新音樂潮流
>希望能有共同音樂品味的另一半
>創作分享平台
>第一時間得知音樂祭消息
>瞭解時下音樂元素
>交流音樂理念
>提升音樂品味
>能呼朋引伴參加音樂祭
人物情境
SCENARIO
SAM是一名喜愛流行文化及電子音樂大學生。 偶然間在追蹤的社群粉絲專頁上看到即將舉辦的大型電子派對 躍躍欲試的他分享給朋友希望引起友人的興趣一起前往 朋友們雖然說好，但感覺興趣不大。 果不其然，在臨近日的前兩個禮拜紛紛表示無法前往 獨自前往音樂祭的他，在當天活動上認識了幾名有共同音樂喜好的朋友。 雖然過程幾經波折，但幸好得到了好的結果。 未來他還想挑戰嘗試參加國外的音樂節，希望也能跟志同道合的朋友前往。
04
同理心地圖 聽到 朋友臨時爽約 找不到同伴前往怎麼辦? 小眾音樂發展空間受到限制 溝通不順差點沒辦法 到達目的地
05
EMPATHY MAP
想法 一個人去音樂祭好無聊 歌曲的品味跟周遭朋友不同 類似曲風推薦
痛點 去國外音樂祭怕語文能力不足會造成溝通上的問題 身邊的朋友無法在音樂喜好上獲得共鳴 獨立音樂創作者有沒有更多的發表管道
獲得 音樂類型愈趨多樣化 消息反覆變動 演出名單消息不明確 對於音樂製作素材有疑問
看到
各方尋找相關資訊 遊說朋友一起參加感受氣氛 時不時推薦音樂給朋友 希望獲得好的反響
說與做
取向音樂類型的推薦 獨立音樂作品的分享媒介 完整音樂祭的地點與內容資訊的提供與核實 揪團社群的建立事宜
使用者旅程圖 階段
注意
行為
察覺
接觸點
上網瀏覽
瀏覽
準備
出發前
爬文
轉發分享
交通安排
篩選訊息
揪友參加
制定行程
點進活動 內容網頁
06
USER JOURNEY MAP
上網透過 第三方平台訂票
利用地圖APP 及其他通訊軟體
活動後 分享心得
其他社群網站
問題點
活動資訊延遲 或不明確
不確定 參加與否
身旁友人 興趣不大
約定好的朋友 臨時失約
想要獲得共鳴與反饋
用戶目標
有即時且 確定的消息
確定前 先將資訊保存
揪有共同喜好 的人一起參加
讓票
心得分享及 結識有共同音樂 喜好的朋友
音樂祭活動資訊推撥
活動資訊的收藏
揪團群組建立
在群組裡將票轉賣
活動心得的分享及反饋
情緒
解決方案
需求分析
07
REQUIREMENT ANALYSIS
問題狀況
期望目標
解決方法
找不到同伴 前往音樂祭
揪團
可組織建立 社群圈
同一首歌聽膩了
取向音樂類型推薦 及歌單分享
文章投稿 歌單推廣 互動平台
資訊延遲或有誤
第一時間獲得 音樂祭的確切資訊
近期及過往活動 資訊查找功能
è²³
è¨è¨ˆç™¼å±•ç–ç•¥
競品分析
01
COMPETITIVE ANALYSIS
StreetVoice 街聲
Bump-獨立音樂社群
Navigation Bar
Navigation Bar Search Bar
Search Bar Banner
Tab Bar
Tab Bar
風格
沉穩帶點活潑感
風格
鮮明而野性
版面配置
滾動式BANNER版面較大 其他區塊多為圓角矩形
版面配置
點選區塊皆以圖片式展示 簡單易上手
色彩搭配
暗色背景搭配亮色系圖標 以色塊作為主題區分
色彩搭配
主體為暗色背景 搭配紅色圖標
操作
主頁面滑動區塊多 整體操作流暢
操作
以圖片作為點選區塊讓人稍顯疑惑
整體
功能完善 版面多變化
整體
功能簡單 畫面單一
SWOT分析
02
SWOT ANALYSIS
優勢 有換、讓票分享平台 歌單分享平台 聚眾參加的組團模式
機會 小眾音樂漸崛起 未來音樂類型的多樣化的轉變 年輕一代為音樂類型注入新的活水
劣勢 知名度不高 受眾度寡
威脅 影音串流平台眾多 音樂類型流行度低
市場區隔
03
SEGMENTATION
1.人口變數 性別不拘 年齡18~40 收入 中產階級 小康 性別認同
2.地理 人口密度高 都市化程度高 氣候濕熱 區域分布 台灣地區為主
3.行為變數 產品使用率:不定期 價格高價位
4.心理 性格開放活潑 愛好自由 喜歡流行音樂文化 喜歡分享理念 接收 傳播訊息
目標客群
TARGET
台灣地區
18~40歲
學生
性別認同
愛好音樂
流行文化
交友圈廣
熱情活潑
勇於挑戰新鮮事物
上班族
經濟尚可
設計原則
04
DESIGN PRINCIPLES
資訊 INFORMATION 。活動資訊的推撥、查詢
指引 FACILITATOR 。揪團功能的指引及整合
分享 SHARE 。音樂類型及歌單分享
團體感 GROUPNESS 。群組的建立及個別聊天功能
хПГ
хЙ╡ф╜ЬшиншиИшккцШО
產品介紹
01
PRODUCT INTRODUCTION
音樂社群，開啟新的音樂生活圈 啾樂APP 用音樂交流創造新生活態度 透過線下活動交流及歌單分享功能 促進音樂交流與發展 讓音樂融入生活之中
ĺ“ ç‰Œĺ˝˘čąĄ
02
BRAND IMAGE
洝潑
Cheerful
ć˜ŽäşŽ
ćƒ…ć„&#x;
Bright
Emotion
資訊架構
03
IA
歌單
揪團
推薦
活動分享
資訊&查詢
訂選我的最愛
匿名性互動
好音樂推薦
活動經歷分享
音樂祭及相關資訊
音樂串流平台連結
發起揪團活動
推薦歌曲、曲風
聚會分享
音樂祭日期及時間
音樂分享
建立興趣群組
音樂推薦與分享
(電子樂、爵士樂等)
想知道別人的推薦
場次查詢
流程圖
04
FLOW CHARTS 起始頁
登入畫面流程圖 登入頁面
已是會員?
否
註冊頁面 輸入英數八碼 或電子信箱
是 輸入密碼 輸入手機號碼
輸入帳號密碼
利用Facebook帳號 或Google帳號登入
登入成功
簡訊發送臨時密碼
忘記密碼
輸入手機號碼 註冊成功 簡訊發送驗證碼
輸入密碼 取得個人資料授權
輸入驗證碼 登入成功
進入主頁
伍
設計規範展示
商標設計
01
LOGO DESIGN
LOGO
Raver
9:41 AM
58 %
標準字 將字體簡化去作設計 在『樂』字的部分加上了音符的表象
圖像 啾樂
鳥 對話框
32分音符 32分音符代表眾 將音符簡化後加入速度感 代表能即時推撥活動消息
有著代表鳥鳴聲的啾，同時有揪團的意味 又同時有對話框意象的社群聊天功能
色彩 #ED796F
#FFE323
#EF90B9
#FFF56E
色彩設計
02
COLOR DESIGN
主要選用暖色調作為主色調
輔助色選用較為柔軟而明亮的顏色
主色調
#E7615B
互補色
#FF6962
#FF7670
#FFFBFB
#E6847F
#E00BBCF
圖標/部分底色
輔助色
#E57BAC
部分區塊選用互補色來搭配
#FFEAE9
#FFF155
#CCCBCB
ĺ—ĺž‹č¨č¨ˆ č˜‹ć–šéŤ” Aa 123
ĺ—鍔éĄ?色
Pingfang
Font color
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890,!?&@$|/\<>
ĺ&#x2014;é&#x2021;?
Thin / Light / Medium / Regular / Bold
ĺ&#x2014;ç´&#x161;
20pt
#E57BAC
Weight
Font size
03
TYPEFACE
Segoe UI
16pt 14pt
12pt 11pt 10pt
é&#x192;¨ĺ&#x2C6;&#x2020;ĺą&#x2022;示
#FFEAE9
#FFF155
Display
/é&#x192;¨ĺ&#x2C6;&#x2020;č&#x2039;ąć&#x2013;&#x2021;ĺ&#x2014;éŤ&#x201D;
20pt Bold
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
14pt Regular
11pt Light
ĺ&#x2014;é&#x2021;?
Regular / Semibold
ĺ&#x2014;ç´&#x161;
24pt
Weight
Font size
16pt
11pt 10pt
16pt Regular
9pt 11pt Bold
11pt
Regular
圖標元件 個人頁面圖標
04
UI KIT 撥放器圖標
Personal page Icon
Player Icon
36pt 20pt 36pt
20pt
收藏
提筆
登入頁面圖標
歌單
Login page Icon
32pt
32pt
28pt
通知
標籤列 Tab bar 未點選 24pt
28pt
48pt
24pt
啾聽
其他功能圖標 24pt
啾樂
啾查
啾聊
我
Function Icon 已點選
24pt
5pt
34pt
34pt 20pt
啾聽
20pt
8pt
12pt 12pt
啾樂
啾查
啾聊
我
ๆ ็นช่ ๅ
SKETCH
05
功能頁面 五大功能頁面展示 個人設定 社群網路服務 活動主頁 搜尋頁面 音樂分享平臺
FUNCTION
07
引導頁
08
ONBOARDING PAGES
用插圖搭配功能說明文字 來做為引導頁的設計主軸
個人設定
09
PROFILE
個人設定 個人主頁包含功能設定選項 訊息通知、個人自選歌單、活動收藏...等等。 另有夜間護眼模式可以切換版面色彩。
社群網路服務
10
SNS
啾聊
!
社團功能可集結興趣小夥伴 還有活動揪團社群功能 及個人私聊窗口功能。
活動主頁
11
EVENT PAGE
啾樂 音樂祭最新活動訊息的推撥 亦可瀏覽過往活動的消息 點選有興趣的活動主頁可揪團 或取得已揪團的驗證碼加入。 另有此圖示代表是戶外露營式的音樂節
搜尋頁面
12
SEARCH PAGE
啾查 歌曲、專輯、音樂人、活動消息的查詢 會有推薦的熱門關鍵字及保留過往搜索詞。
音樂分享平臺
13
MUSIC PLATFORM
啾聽 推薦曲目及新曲推薦 可撰寫文章投稿至專欄 亦會將自選歌單推薦至主頁。
14
æ¨&#x2122;註è&#x2C6;&#x2021;å&#x2C6;&#x2021;å&#x153;&#x2013; 18pt 18pt
168pt 375pt
375pt
20pt
18pt 269pt ED796F- FFE323
94pt
è&#x2DC;&#x2039;æ&#x2013;¹é«&#x201D; 20pt FFFFFF Segoe UI 11pt FFFFFF
50pt
63pt
EF90B9- FFF56E
45pt
36pt
è&#x2DC;&#x2039;æ&#x2013;¹é«&#x201D; 10pt 10pt 10pt
EF90B9- FFF56E
14pt
16pt
80pt 20pt
CCCBCB
80pt
14pt
83pt
31pt
707070
64pt
12pt
9pt
FF7670
50pt
è&#x2DC;&#x2039;æ&#x2013;¹é«&#x201D; 12pt 64pt
256pt
E57BAC
è&#x2DC;&#x2039;æ&#x2013;¹é«&#x201D; 16pt 000000
8pt
è&#x2DC;&#x2039;æ&#x2013;¹é«&#x201D; 14pt
19pt
000000
7pt
222pt
22pt
34pt
28pt
180pt
188pt
8pt
23pt
8pt
20pt
19pt
707070
100pt
20pt
è&#x2DC;&#x2039;æ&#x2013;¹é«&#x201D; 11pt CCCBCB
36pt
12pt 12pt
16pt
è&#x2DC;&#x2039;æ&#x2013;¹é«&#x201D; 10pt 000000
è&#x2DC;&#x2039;æ&#x2013;¹é«&#x201D; 11pt
16pt
è&#x2DC;&#x2039;æ&#x2013;¹é«&#x201D; 11pt FFFFFF
è&#x2DC;&#x2039;æ&#x2013;¹é«&#x201D; 10pt 707070
FF7670
CCCBCB
å&#x2039;&#x2022;ç&#x2022;«å&#x17D;&#x;å&#x17E;&#x2039;å±&#x2022;示
PROTOTYPE
15
快來加入我們 一起享受音樂帶來的美好吧!