UX DESIGN

 
kkkidscover01.png

KKBOX Kids
RE-Design & Case Study

Backdground & motivation

Duration

Device

Founded in 2005, KKBOX is the largest music media in Asia. In the past, he was also one of their product enthusiasts. With the rise of many streaming platforms in recent years, we found that KKBOX's status is not as good as before. Then KKBOX discovered the hidden power in the children's music and audiobook market, and KKBOX kids was born, hoping to retain old customers and attract new customers, just in the face of the impact of the epidemic, many parents spend more time with their children, it seems that It was a good time, it gave me the urge to explore this market, so I started working on this project!

5 weeks

My Main Role

iphone 13 ( 390X844 )

Tool

Industry Research

User Interview

Prototype

Usability Testing

Sketch, Mirror, Principle, Premiere

於2005年成立,為亞洲最大音樂媒體的KKBOX ,在以前自己也是他們的產品愛好者之一,隨著近年來眾多串流平台的興起,KKBOX 的地位已不如從前。
而後KKBOX Kids誕生了 ,希望能夠留住舊客,吸引新客,面對疫情的衝擊,許多家長陪伴孩子的時間增長,看似是一個好時機,開始探究這片市場隱藏其中的機會點。

 

Original Features

​現階段 app 介面分析觀察

歌曲紀錄過於簡陋​,無法創建個人化清單​

IMG_3585.PNG

welcome screen

​歡迎畫面

The screen is stiff Although it has an IP, it has no IP awareness

IMG_3706.jpg
IMG_3707.jpg

music page

​聽音樂主頁

story page

​聽故事主頁

Brand tone is too lacking ​The presence of the brand is not felt on the homepage

The content arrangement of the homepage presents a high similarity ​Unable to clearly know the current page content

畫面呈現僵硬

雖設有IP,但沒有IP意識

​品牌調性過於匱乏

​主頁中未能感受到品牌的呈現

主頁內容排列呈現相似性高

​無法較明確的知道當前頁面內容

IMG_3791.PNG
IMG_4365.jpg
IMG_4958.PNG

album page

play page

專輯列表主頁

​播放主頁

my function list

我的 - 功能列表

The screen presentation is relatively clean and neat

Simple and clean but lacks relevant information

Song record is too crude​ to create a personalized list​

畫面呈現相較之下較乾凈利落

簡單乾凈 但缺乏相關資訊

🧐

若只是單就原本的APP進行頁面的美化,還是無法理解用戶真實的需求,求知慾的的驅使下,所以我決定進行更深入的使用者研究來找尋隱藏其中的insign。

 

Design process

工作區域 56 複本_3x.png

Empathize

Define

Ideation

Test

Iteration

  • Music industry research

  • User interview

  • Competitive analysis

  • How Might We

  • Personas & Journey Maps

  • Paper Sketches

  • Initial Wireframe

  • Prototype

  • Usability Testing

  • Finalized Task Flow

  • Updated Design & UI
    Style Guide

 

Music streaming Industry Research

Collect enterprise-related information and streaming platforms to understand the current situation analysis of the product industry and the problems faced by the main product groups.

搜集企業相關資訊與串流平台產業現況分析,以了解產品與產品主要族群面臨的問題。

best-music-streaming-service-770x433.jpeg

Understanding The Music streaming platform industry

Nowadays, with a hundred schools of thought competing in the music streaming platform market, major digital music platforms have snatched this market pie, and to stand out, they must distinguish from other platforms.

 

KKBOX launched KKBOX kids in 2019 to attack the children's music market. As far as the easy music function playback in the current market is concerned, I am afraid that it cannot meet the needs of existing residents and potential user groups.

KKBOX於2019年推出KKBOX kids 搶攻兒童音樂市場,雖然擁有全台最完整兒童專屬音樂資料庫的優勢,但在使用上與體驗仍然不足以吸引用戶長期使用。    

如以目前市場定位單純的音樂播放功能,恐怕無法滿足現有會員與潛在用戶群的需求。

helping-kids-benefit-from-their-love-of-music-hero.jpeg

Understanding People

Under the influence of Covid-19, many parents are going home to work from home. Parents and children spend extended time together, which leads to work and bondage. Parents will use mobile phone caregivers to attract their children's attention to affect their children's peace. Users are looking for ways to get along with children in a new society.

在這次Covid-19的影響下,許多父母必須在家上班。親子相處時間拉長,導致工作與家庭生活綁在一起,父母為了得到片刻的安寧 ,會用手機應用程式來吸引孩子的注意力,但他們依賴於應用程序帶來的好處,卻產生無法有效陪伴孩子的內疚感。用戶正在找尋一種符合新型態社會與孩子的相處模式。

Based on the music industry research, the critical insight was :

Make the time spent at home with children more interesting and meaningful During This Challenging Time.

在這個充滿挑戰的時期,如何讓父家長與孩子一起在家渡過的時光,變的更有趣、更有意義。

工作區域 66 複本 2_3x.png

Lift Up
The Mood

People need their happiness and relief.

人們需要獲得幸福和解脫感。

工作區域 66 複本_3x.png

Quality Company

More cherish the time with their family.

​更珍惜和家人在一起的時光

工作區域 66_3x.png

Engage New  Activities with children

People need more fun
things to do.

人們需要做更多的有趣的事情。

 

User Questionnaire survey&Interview

In order to get a more realistic understanding of the user's associations, I asked 26 friends to conduct interviews. The main group is children who have used music streaming platforms and have children aged 1-8 at home.

為了更真實了解使用者的想法,我要邀約了26位朋友進行問卷調查其中4位進行用戶訪談,主要族群為曾經使用過兒童音樂串流平台且家中有 1~8歲孩子的家長。

Some questions I asked during the interview were:

  • How much time do you spend on average each day with your style?

請問您平均每天花多久時間與小孩相處?

  • How long would you like your child to be exposed to the music app in a day?

請問您會願意讓孩子一天接觸音樂APP多久時間?

  • What is the most crucial factor in choosing a music streaming for children's apps, and why?

 會影響你選擇兒童音樂app最關鍵的因素是什麼,為什麼?

  • While using kkboxkids or another streaming app, which part/feature do you usually use the most and why?

您最常在使用音樂app上的哪些功能?為什麼?

  • How did you choose the music type for the first time?

請問您在使用初期都是如何挑選適合孩子的音樂類型?

  • How do you choose songs after using them?

請問您在使用一段時間後會是經由什麼途徑選擇歌曲?

  • While using kkboxkids or another streaming app, which part/feature do you usually use the most and why?

您對kkbox kids 或其他音樂流媒體應用的整體滿意度是為何,為什麼?

工作區域 70_3x.png

Children's 

streaming app  

users

​共使用過兒童音樂app

Female parents

with children aged 1Y~8Y. 

家中有1-8Y 孩童的女性家長

Male parents

with children

aged 1Y~8Y. 

家中有1-8Y 孩童的 男性家長

4 selected Conduct in-depth interviews

從中篩選4位

​進行深度訪談

Based on the user interviews, the key insight was:

​根據訪談,我的得到的洞見是

Parents want to find another way
better to understand and accompany their children.

現代父母都在在尋找符合現今社會狀態, 一個更好理解和陪伴孩子的方式。

工作區域 72_3x.png

"I don't know what the child's age is suitable for."

- Ms Chen / 30Y / 2kids

" 我不知道這些內容適不適合我

的孩子年紀 "

Strengthen Existing Personalization Features

加強個人化設置功能

工作區域 72_3x.png

"Sometimes I rely too much on app because I can have my own time."

- Mr Pong / 36Y / 2kids

" 有時候我真的太依賴app 了,我想不到其他方式可以擁有自己的時間"

To increase the
sense of participation

​增加父母的參與感

工作區域 72_3x.png

"I'm not sure if using app can effectively shorten the distance between me and my children."

- Ms Wang / 36Y / 2kids

" 我不確定使用app 到底能不能增進我跟孩子之間的距離"

More intuitive and effective way to enhance feelings

​更直接有效的產生親子連結

Male parents

with children

aged 1Y~8Y. 

All things considered, this was what I had to move forward:

 綜合以上,確定繼續前進的方向

Music streaming platform industry Insight

User Interview Insight

工作區域 73_3x.png

Make the time spent at home with children more interesting and meaningful During This Challenging Time.

Parents want to find another way better to understand and accompany their children.

工作區域 73 複本_3x.png

在這個衝充滿挑戰的時刻,讓陪伴孩子變得更有質量且有意義

家長們正在尋找一種新型態的陪伴模式,幫助他們了解孩子

Shared Goal

​共同目標

We need to provide users with experience that money can't buy, help users understand their children better, promote the growth of parent-child relationship and more accurate and reliable recommendation content.

我們需要為用戶提供金錢買不到的體驗,幫助用戶更好地了解自己的孩子,促進親子關係的成長和推薦更精準可靠的內容。

我選擇使用HMW設計框架來幫助我釐清想做的Challenge是什麼。

How might we let parents and children achieve a goal together and establish common memories and topics. So that children will look forward to using it with their parents.

HMW讓父母和孩子一起達成目標,建立共同的記憶和話題。這樣孩子們就會期待與父母一起使用它。

 

Competitive

Observe the products on the market and find out the unmet needs of users.

觀察市場上的相關產品,找出用戶未滿足的需求

工作區域 1_6_3x.png
 

Affinity Map

工作區域 1_9_3x.png

Discover the structure and relationship in the problem.

  先將用戶訪談得到的資料使用親合圖整理脈絡,找出共通點

Personas & Empathy Map 

 

I created  personas and Empathy Map to effectively grasp users’ perspectives on music streaming apps.

製作了人物誌與同理心地圖 幫助聚焦目標族群 更 深入了解目標族群的想法

搭配同理心地圖掌握使用者音樂流程上的體驗

工作區域 1_4_3x.png

我不想只是用手機放音樂的方式陪伴小孩,我希望可以有更理想的方式與孩子有些許互動幫助我更理解孩子。

工作區域 1_8_3x.png

User Journey Map

User Journey Map to effectively grasp users’ experience on music streaming apps.

工作區域 1_5_3x.png

​經過描繪用戶旅程,更有效掌握使用者過程體驗

 

 Design Sprint Method

 

I used Crazy8 to get one or a few ideas that can be transformed into prototypes

綜合以上,進行brain stornming -手繪Crazy 8 獲得三個可以轉化成原型的想法

C2.JPG
C1.JPG
 

 Initial Sketches

I sketched out some functions to focus on and named the feature “collaboration” to give a more exciting impression.

​進行手繪了一些重點任務需要關注的功能

flow.JPG
flow02.JPG
flow03.JPG
 

User Flow

I draw the overall process for users from the beginning of registration to the end of experience, so as to judge the required conditions.

繪製使用者流程地圖,幫助我判斷從註冊開始到體驗結束的整個流程,片段所需條件與畫面

工作區域 1_10_3x.png

Information  Architecture

 

Disassemble all pages and functions and sort out the architecture logic of the whole app.

工作區域 1 複本_3x.png

​分解所有需要的頁面和功能,幫助我整理程序的架構邏輯

 

Main User Flow 

I draw the overall process for users from the beginning of registration to the end of experience, so as to judge the required conditions.

繪製使用者從註冊開始到體驗結束的整體流程,來標示核心內容與畫面。

工作區域 1 複本 20_3x.png

Initial Wireframe

I created medium fidelity wireframe after gathering ideas from sketches and prepared for testing.

開始著手繪製了框線稿

工作區域 1 複本 26_3x.png

01 . Onboarding

02 . Creat Account

03 . Registration

04 .Mobile
Registration

05 .Parental
identification

07 . Child information input

06 . Arithmetic test

08 . Choose KK Baby

09 . Explore Page

 10 . Album List

 11 . Song  List

 12 . Play Page

 13 . Singing Page

 13 . Reward message

 
 

Usability Testing

I conducted usability testing with a wireframe to find out if people are able to complete the given tasks without any issues and find out where there was room for improvement.

進行第一次的易用性測試,幫助我了解使用者是否能夠順利的完成給定的任務,中間遇到的困難點,並找出改進的空間。

Some directions used during the testing were:

  • Think-aloud Strategy

To understand what users actually think when navigating through the  feature’s structure.

了解用戶在瀏覽功能時候的實際想法。

  • Screen Recording

This noted how users acted and shared, and the results were shared with me to ensure we were on the same page.

記錄下使用者的行為旅程和遲疑的部分,分享使用畫面。

Task assigned

任務目標

From registering a new member to finding a song you are interested in, using the follow-up mode with children to complete the task.

從註冊新會員到找到與孩子感興趣的歌曲,跟孩子一起使用對唱模式以完成任務。

WhatIdiscovered during the testing was:

52%

The button indication is clearer.

按鈕指示清晰

46%

They feel perfect based on the songs recommended by the child.

​可以根據孩子的年齡狀態推薦歌曲,讓他們覺得很貼心

76%

They are very interested in the singing mode and help them have more interaction with their children.

他們對唱歌模式非常感興趣,並幫助他們與孩子有更多的互動。

Main Features

K00.gif

Animation

Login and registration animation display, so that users can feel the feedback of the product.

登錄和註冊動畫展示,讓用戶感受到產品的反饋。

K03.gif

Personalization

Personalize the recommended content settings according to the user's age to quickly reach the destination.

根據用戶年齡個性化推薦內容設置,讓用戶更快速抵達目的地。

K07.gif

Interactivity

The parent-child duet function can record and share to have more feelings for the app and increase adhesion.

親子對唱功能幫助記錄和分享,增近親子互動,使用戶產生黏著度。

 
 

High-fidelity prototype

Start working on high-fidelity detailing.

著手進行高保真互動原型

工作區域 81_3x.png
工作區域 84_3x.png
工作區域 83_3x.png

Detail adjustment makes the whole more refined.

些微調整icon細節,讓整體更加細緻

K00.gif
White-3拷貝.png

Welcome

工作區域 80_3x.png

The opening effect of animation allows users to feel the details and intimate interaction.

動畫的開場效果,讓用戶感受細節互動帶來的驚喜。

In addition to the original main color: orange, add gray to make the overall picture softer.

除了原有的主色:橙色外,加入灰色讓整體畫面更加柔和。(考慮用戶族群)

#F3F3F3

K02.gif
White-3拷貝.png

Registration

工作區域 1 複本 9_3x.png

Wizard UI Design above, to achieve the success probability of the task .

利用上方嚮導式UI步驟設計,達成任務成功機率

工作區域 89_3x.png
工作區域 88_3x.png
K02.gif
White-3拷貝.png

Parental certification

Prevent children from using apps without their parents' knowledge,It can also be used as background data.

工作區域 1 複本 9_3x.png

防止孩子在父母不知情的情況下使用,也可用於後台。

工作區域 85_3x.png
工作區域 86_3x.png
K03.gif
White-3拷貝.png

According to the content description suitable for the child's age, let parents know how to interact with the child.

Personalized settings

工作區域 90_3x.png

Guide users to enter personalized information to facilitate accurate screening of content.

工作區域 92_3x.png
工作區域 91_3x.png

引導用戶輸入個人化資訊,方便內容進行精準篩選。

根據適合孩子年齡的內容描述,提醒家長如何與孩子使用app互動。

工作區域 93_3x.png

Discover

Recommend appropriate content according to the child's age and gender.

根據孩子的年齡和性別推薦合適的內容。

工作區域 1 複本 12_3x.png

The data calculate cartoon characters recognized by children at the age of 1 year.

Push different content according to different login time.

Discover page is divided into three items, and the index design makes it easier for users to find.

In addition to serving as a reference, it also gives users  a sense of companionship.

The content of the song allows users to explore suitable ones for themselves.

Select the appropriate content according to different needs.

階層設計-將Discover頁面分為三個項目並放置於最容易被使用者發現的地方,讓用戶更容易找到最重要的資訊。(降低認知負擔)

階層設計 - 根據使用者最需要立刻得到的資訊,還有資訊的類型,做了不一樣的安排。

​顯示線上用戶在正在使用的狀態,除了參考,還給使用者一種陪伴感。

歌曲難度分級,讓用戶自行評估合適的內容,進行探索。

根據不同音樂類型情境的需要選擇合適的內容。

針對用戶資訊, 通送1歲兒童會喜歡的卡通人物。

Select the appropriate content according to different needs.

每日排行榜,除了作為用戶選歌參考,更重要讓用戶感受到品牌持續運作更新內容的重視感。​

工作區域 40_3x.png

Iit more convenient and fast for users to reach their destination.

Look at what online users listen to.

Look at what online users listen to.

查看用戶正在聽取的內容。

​依照音樂類型分類

歌曲難度星號分級,讓用戶更容易挑選適合孩子的歌曲

28

人性化的白天與夜晚模式,配合人體作息

夜晚模式,背景為深色設計,睡前使用可以有效減少光線影響睡眠(場景)

工作區域 1 複本 16_3x.png
工作區域 95_3x.png
工作區域 96_3x.png

The two theme types have day and night modes, respectively, and different contents are recommended according to the current envoy.

The overall tone is closer to the night environment to reduce eye irritation.

兩種螢幕模式,白天與夜晚

根據自然真實狀態自動切換

整體色調更接近夜間環境,

減少對眼睛的刺激。

White-3拷貝.png
K08.gif
White-3拷貝.png
K07.gif

Sing

工作區域 105_3x.png

Parent-child singing function

4

親子對唱功能,擁有共同目標促進親子關係

工作區域 1 複本 15_3x.png
工作區域 98_3x.png

2

You can see the current number of people listening here on the album page.

您可以在專輯頁面上查看當前收聽的人數。

工作區域 98_3x.png

3

New lyrics viewing function is added on the playback page to assist parents to guide the use. 

播放頁面新增歌詞查看功能,協助家長指導使用。

工作區域 98_3x.png

1

The album list is presented concisely and clearly to help users find their goals quickly.

專輯列表方形展示,簡潔明了幫助用戶快速找到目標。

工作區域 111_3x.png
工作區域 98_3x.png

Add the following singing function to increase the interaction between children and their parentsy.

添加以下唱歌功能,增加孩子與家長的互動樂趣,孩子將會每天期待跟爸媽一起使用。

工作區域 98_3x.png

6

工作區域 98_3x.png

5

At the end of the song, the treasure chest bouncing animation needs experience value.(Modal)

Modal 視窗 - 歌曲結尾,寶箱彈跳動畫增加經驗值。

Dynamic lyrics effect, the reward bar on the right will give feedback according to the singing completion.

動態歌詞效果,右側獎勵欄會根據演唱完成情況給予反饋。

工作區域 101_3x.png

Library

Saving and creating custom song lists based on personal preferences

工作區域 1 複本 8_3x.png

Personalized playlist recording function.

Search for songs according to the child's humming melody.

Search for songs according to the lyrics.

工作區域 102_3x.png

Search

根據個人喜好保存和創建自定義歌曲列表

個人化播放列表製作功能。

可根據孩子哼唱的旋律搜索歌曲。

輸入你知道的歌詞查找

工作區域 1 複本 14_3x.png
工作區域 112_3x.png

Baby

The child profile card not only records the basic information of the child, but also displays the member status. Show remaining days to remind users .

The child's good friend kkbabay status display, Every time you use kkbaby, you will gain growth value.

After each use experience, record the child's use status and analyze it into five categories of key learning ability, so that parents can understand what needs to be strengthened.

You can receive rewards if you execute the task every day until the fifth day.

孩子資料卡不僅記錄了孩子的基本出生資料,還顯示了會員剩餘天數以提醒用戶。

孩子的好朋友kkbabay狀態展示,每次跟kkbaby互動都會獲得成長值。

每次使用後,都會記錄孩子的使用狀態,分析成五類重點學習能力,讓家長了解需要加強的地方。

每日執行任務直到第五天,您可以獲得獎勵。

Record the usage of the day and the total hours used, so that users can view themselves.

記錄當天的使用情況和使用的總小時數,用戶自我控制。

Artboard.png
 

What I Learned & Challenges

  • Find the target group 找尋目標族群遇到的困難

When looking for the target group, I found that there are too few samples of friends who meet the needs, so I started to use various methods to contact the moderators who have written recommendation articles on the Internet, or go to the PO articles of major clubs to solicit people who have used children's music apps. , also discussed with my mentor Yvon, using different aspects to cut in, and finally completed the user interview and questionnaire.

在找尋目標族群時候發現身邊符合需求的朋友樣本數太少,所以開始用盡各種方式連絡在網路寫過推薦文的版主,或是去各大社團PO文徵求用過兒童音樂APP的群眾,也與我的mentor Yvon討論,運用不同面向切入,最終才完成用戶訪談與問卷。

  • Interview skills 訪談技巧

Skills in designing questions and avoiding suggestive questions can maximize the effectiveness of the interview.

設計問題的技巧,避開暗示性的問法,才能最大化訪談的效益。

  •  Continuous optimization 持續優化

I still continue to teach myself to optimize my UI design skills and knowledge. Some details that I didn’t notice during the design have been updated on this website one after another. I hope that the product will be presented in the most perfect form in the future. and used by others.

我仍然持續學習去優化自己的 UI 設計版面技巧與UX知識,與將來若交付給工程師,得切版方式,有些當初設計時候未注意到的細節,都陸續的更新在這個網站上,

期望產品在未來他能更以最完善的樣貌,呈現出來並被他人使用。

Mockup02.png

Thanks for reading