關於 Web:AI
Web:AI 是一款程式教育 low-code 平台，主要是面向國中小學生資訊科技課程，以視覺化程式積木的方式編輯程式。
老師能夠透過 Web:AI 程式積木平台教導學生程式邏輯，將程式部署至 Web:AI 開發板中，做出 AI 自動車、人臉辨識、語音聲控等等專題應用。致力於讓學生以低門檻的方式學習 AIoT。
專案背景
Web:AI 上市後銷售量逐漸降低，原有的操作模式不符合市場受眾，導致活躍使用者流失。我接手擔任 Product Designer，及兼任 Product Owner，針對產品操作模式進行研究，並重新設計。
團隊
我的職責
Product Designer & Product Owner
產品策略規劃
使用者研究 / 易用性測試
產品 UI UX 設計
建立 Blockly 設計流程
產品管理，共 12 位人員
成員
Product Designer & PO ( Me )
BD x 4
RD x 5
MD x 2
主要成果
問題
活躍使用者流失，導致銷售量在上市後逐漸下降。
產品操作難度和使用者領域知識無法達成平衡。
Web:AI Blockly 設計過程複雜，各設計師間缺乏統一。
挑戰 & 限制
問題抽象：Low-Code 產品服務的操作模式抽象，缺乏可依循的規範，也沒有相關競品能夠參考，仰賴設計師對於產品與市場的理解。
技術限制：產品牽涉到硬體控制，受到韌體底層邏輯的技術限制，必須在避開限制的情況下達成使用者的需求。
設計流程系統化：面對團隊沒有處理過的設計問題，將解決方法系統化，讓團隊未來能有一致的方法能夠執行。
研究 & 策略
01 收斂商業問題
根據商業部門主管提供的銷售報表，得知產品在上市後銷量逐月下降。與商業部門溝通後，發覺主要問題為「產品訴求與使用者需求不符」。
使用者面：原有的產品設計包含過多使用者難以理解的選項，雖然彈性高、功能強大，卻也導致無法負荷產品難度。
團隊面：向使用者傳遞功能獨佔性及技術力，卻忽略了市場根本需求。而 Low-Code 平台操作流程複雜，雖然經過競品分析，但競品過於簡易不符合台灣教學模式，無法參考應用在 Web:AI 上。
02 使用者研究
收集整理過往使用者回饋。
將使用者進行垂直分群。
建立使用者之間互動關係。
針對不同使用者採取適合的研究策略。
明星教師 ( KOL )：深度訪談
一般教師：問卷、游擊訪談
學生：問卷
我們發現到明星教師 ( KOL ) 有明顯的特徵，包含極大的商業價值、領域中的專家，知道一般老師和學生在教學場域會碰到什麼樣的問題，因此選擇將時間著重在此族群，並納入參與設計的環節中。
03 定義成功
定義目標為「產品達到 Interface and Business Expertise Curve」，並且以基準點為起點，拓展市場客群。並設定成果指摽：
操作時間 < 10min
滿意度 > 80 分
正向質性回饋
將研究結果收斂，定義出 3 項設計關鍵字，作為本次專案及未來產品設計的評斷指標。
設計流程系統化
01 篩選情境
透過使用者情境篩選問題，取捨可行性及優先度，作為產品主要開發功能項。
游擊訪談、問卷
統整排序
評估工程難度 / 市場價值
排定功能開發優先度
02 分解問題
將情境逐步拆解，直到剩餘不可拆解的最小設計元件，並且符合教育型產品「每一步驟都需具備意義」的原則。如最小單元的情境字詞，屬於程式教育中的字串、數值、邏輯等等。
統整情境字詞的相似性及意義，並且分類。
03 Blockly 設計
分類後的情境字詞重組成詞句，再將詞句依照邏輯規範，進行程式積木設計。
04 建立設計開發文件
將 Blockly 設計元件之使用規範、設計規格、範例情境建立開發文件，提供給工程師實作。文件化提升 30% 協作效率。
關於 Web:AI
Web:AI 是一款程式教育 low-code 平台，主要是面向國中小學生資訊科技課程，以視覺化程式積木的方式編輯程式。
老師能夠透過 Web:AI 程式積木平台教導學生程式邏輯，將程式部署至 Web:AI 開發板中，做出 AI 自動車、人臉辨識、語音聲控等等專題應用。致力於讓學生以低門檻的方式學習 AIoT。
專案背景
Web:AI 上市後銷售量逐漸降低，原有的操作模式不符合市場受眾，導致活躍使用者流失。我接手擔任 Product Designer，及兼任 Product Owner，針對產品操作模式進行研究，並重新設計。
團隊
我的職責
Product Designer & Product Owner
產品策略規劃
使用者研究 / 易用性測試
產品 UI UX 設計
建立 Blockly 設計流程
產品管理，共 12 位人員
成員
Product Designer & PO ( Me )
BD x 4
RD x 5
MD x 2
主要成果
問題
活躍使用者流失，導致銷售量在上市後逐漸下降。
產品操作難度和使用者領域知識無法達成平衡。
Web:AI Blockly 設計過程複雜，各設計師間缺乏統一。
挑戰 & 限制
問題抽象：Low-Code 產品服務的操作模式抽象，缺乏可依循的規範，也沒有相關競品能夠參考，仰賴設計師對於產品與市場的理解。
技術限制：產品牽涉到硬體控制，受到韌體底層邏輯的技術限制，必須在避開限制的情況下達成使用者的需求。
設計流程系統化：面對團隊沒有處理過的設計問題，將解決方法系統化，讓團隊未來能有一致的方法能夠執行。
研究 & 策略
01 收斂商業問題
根據商業部門主管提供的銷售報表，得知產品在上市後銷量逐月下降。與商業部門溝通後，發覺主要問題為「產品訴求與使用者需求不符」。
使用者面：原有的產品設計包含過多使用者難以理解的選項，雖然彈性高、功能強大，卻也導致無法負荷產品難度。
團隊面：向使用者傳遞功能獨佔性及技術力，卻忽略了市場根本需求。而 Low-Code 平台操作流程複雜，雖然經過競品分析，但競品過於簡易不符合台灣教學模式，無法參考應用在 Web:AI 上。
02 使用者研究
收集整理過往使用者回饋。
將使用者進行垂直分群。
建立使用者之間互動關係。
針對不同使用者採取適合的研究策略。
明星教師 ( KOL )：深度訪談
一般教師：問卷、游擊訪談
學生：問卷
我們發現到明星教師 ( KOL ) 有明顯的特徵，包含極大的商業價值、領域中的專家，知道一般老師和學生在教學場域會碰到什麼樣的問題，因此選擇將時間著重在此族群，並納入參與設計的環節中。
03 定義成功
定義目標為「產品達到 Interface and Business Expertise Curve」，並且以基準點為起點，拓展市場客群。並設定成果指摽：
操作時間 < 10min
滿意度 > 80 分
正向質性回饋
將研究結果收斂，定義出 3 項設計關鍵字，作為本次專案及未來產品設計的評斷指標。
設計流程系統化
01 篩選情境
透過使用者情境篩選問題，取捨可行性及優先度，作為產品主要開發功能項。
游擊訪談、問卷
統整排序
評估工程難度 / 市場價值
排定功能開發優先度
02 分解問題
將情境逐步拆解，直到剩餘不可拆解的最小設計元件，並且符合教育型產品「每一步驟都需具備意義」的原則。如最小單元的情境字詞，屬於程式教育中的字串、數值、邏輯等等。
統整情境字詞的相似性及意義，並且分類。
03 Blockly 設計
分類後的情境字詞重組成詞句，再將詞句依照邏輯規範，進行程式積木設計。
04 建立設計開發文件
將 Blockly 設計元件之使用規範、設計規格、範例情境建立開發文件，提供給工程師實作。文件化提升 30% 協作效率。
關於 Web:AI
Web:AI 是一款程式教育 low-code 平台，主要是面向國中小學生資訊科技課程，以視覺化程式積木的方式編輯程式。
老師能夠透過 Web:AI 程式積木平台教導學生程式邏輯，將程式部署至 Web:AI 開發板中，做出 AI 自動車、人臉辨識、語音聲控等等專題應用。致力於讓學生以低門檻的方式學習 AIoT。
專案背景
Web:AI 上市後銷售量逐漸降低，原有的操作模式不符合市場受眾，導致活躍使用者流失。我接手擔任 Product Designer，及兼任 Product Owner，針對產品操作模式進行研究，並重新設計。
團隊
我的職責
Product Designer & Product Owner
產品策略規劃
使用者研究 / 易用性測試
產品 UI UX 設計
建立 Blockly 設計流程
產品管理，共 12 位人員
成員
Product Designer & PO ( Me )
BD x 4
RD x 5
MD x 2
主要成果
問題
活躍使用者流失，導致銷售量在上市後逐漸下降。
產品操作難度和使用者領域知識無法達成平衡。
Web:AI Blockly 設計過程複雜，各設計師間缺乏統一。
挑戰 & 限制
問題抽象：Low-Code 產品服務的操作模式抽象，缺乏可依循的規範，也沒有相關競品能夠參考，仰賴設計師對於產品與市場的理解。
技術限制：產品牽涉到硬體控制，受到韌體底層邏輯的技術限制，必須在避開限制的情況下達成使用者的需求。
設計流程系統化：面對團隊沒有處理過的設計問題，將解決方法系統化，讓團隊未來能有一致的方法能夠執行。
研究 & 策略
01 收斂商業問題
根據商業部門主管提供的銷售報表，得知產品在上市後銷量逐月下降。與商業部門溝通後，發覺主要問題為「產品訴求與使用者需求不符」。
使用者面：原有的產品設計包含過多使用者難以理解的選項，雖然彈性高、功能強大，卻也導致無法負荷產品難度。
團隊面：向使用者傳遞功能獨佔性及技術力，卻忽略了市場根本需求。而 Low-Code 平台操作流程複雜，雖然經過競品分析，但競品過於簡易不符合台灣教學模式，無法參考應用在 Web:AI 上。
02 使用者研究
收集整理過往使用者回饋。
將使用者進行垂直分群。
建立使用者之間互動關係。
針對不同使用者採取適合的研究策略。
明星教師 ( KOL )：深度訪談
一般教師：問卷、游擊訪談
學生：問卷
我們發現到明星教師 ( KOL ) 有明顯的特徵，包含極大的商業價值、領域中的專家，知道一般老師和學生在教學場域會碰到什麼樣的問題，因此選擇將時間著重在此族群，並納入參與設計的環節中。
03 定義成功
定義目標為「產品達到 Interface and Business Expertise Curve」，並且以基準點為起點，拓展市場客群。並設定成果指摽：
操作時間 < 10min
滿意度 > 80 分
正向質性回饋
將研究結果收斂，定義出 3 項設計關鍵字，作為本次專案及未來產品設計的評斷指標。
設計流程系統化
01 篩選情境
透過使用者情境篩選問題，取捨可行性及優先度，作為產品主要開發功能項。
游擊訪談、問卷
統整排序
評估工程難度 / 市場價值
排定功能開發優先度
02 分解問題
將情境逐步拆解，直到剩餘不可拆解的最小設計元件，並且符合教育型產品「每一步驟都需具備意義」的原則。如最小單元的情境字詞，屬於程式教育中的字串、數值、邏輯等等。
統整情境字詞的相似性及意義，並且分類。
03 Blockly 設計
分類後的情境字詞重組成詞句，再將詞句依照邏輯規範，進行程式積木設計。
04 建立設計開發文件
將 Blockly 設計元件之使用規範、設計規格、範例情境建立開發文件，提供給工程師實作。文件化提升 30% 協作效率。
設計迭代
問題 1：學習遷移門檻
測試中發現，雖然 A 方案的操作時間較短、元件數量少，但考量到使用者的學習成本，以及整體產品使用路徑，B 方案能讓使用者以較低的學習遷移門檻進行操作。
因此採用和測試結果不同的 B 方案，讓使用者能夠逐步學習，以舊的知識為基礎，學習新的原理。
問題 2：進階使用者操作彈性
針對進階客群，調整產品使用彈性，增加 LINE Notify、LINE 機器人 、Google 試算表等擴充功能。
透過更多應用情境，增加 KOL 留存，促進受眾社群間自然推薦效果。
問題 3：使用者對產品陌生與不確定性
使用者初次使用編輯器型產品時，容易感到陌生，不了解如何開始進行操作。
解決方案：
提供技術文件 ( 教學手冊 )，引導使用者操作。
提供官方範例，自動生成程式，讓使用者參考範例。
設計流程系統化
01 Blockly 設計系統
建立 Blockly 設計系統，保持設計一致性及提升設計速度。依據功能性質設計相對應積木樣式，包含功能邏輯、樣式、文字、顏色等等規範。
02 產業領域規範
除了設計，也會注重社會責任。我常推薦團隊觀看教育部編寫的 AI 教材系列《 和 AI 做朋友 》，不只是單純設計產品，更重要的是能夠符合產業領域的規範。
03 產品設計 & 行銷
與 BD 團隊合作行銷策略，YouTube 影片 / 教案 / 電子報 / 線上直播活動 / 科技展……
設計迭代
問題 1：學習遷移門檻
測試中發現，雖然 A 方案的操作時間較短、元件數量少，但考量到使用者的學習成本，以及整體產品使用路徑，B 方案能讓使用者以較低的學習遷移門檻進行操作。
因此採用和測試結果不同的 B 方案，讓使用者能夠逐步學習，以舊的知識為基礎，學習新的原理。
問題 2：進階使用者操作彈性
針對進階客群，調整產品使用彈性，增加 LINE Notify、LINE 機器人 、Google 試算表等擴充功能。
透過更多應用情境，增加 KOL 留存，促進受眾社群間自然推薦效果。
問題 3：使用者對產品陌生與不確定性
使用者初次使用編輯器型產品時，容易感到陌生，不了解如何開始進行操作。
解決方案：
提供技術文件 ( 教學手冊 )，引導使用者操作。
提供官方範例，自動生成程式，讓使用者參考範例。
設計流程系統化
01 Blockly 設計系統
建立 Blockly 設計系統，保持設計一致性及提升設計速度。依據功能性質設計相對應積木樣式，包含功能邏輯、樣式、文字、顏色等等規範。
02 產業領域規範
除了設計，也會注重社會責任。我常推薦團隊觀看教育部編寫的 AI 教材系列《 和 AI 做朋友 》，不只是單純設計產品，更重要的是能夠符合產業領域的規範。
03 產品設計 & 行銷
與 BD 團隊合作行銷策略，YouTube 影片 / 教案 / 電子報 / 線上直播活動 / 科技展……
設計迭代
問題 1：學習遷移門檻
測試中發現，雖然 A 方案的操作時間較短、元件數量少，但考量到使用者的學習成本，以及整體產品使用路徑，B 方案能讓使用者以較低的學習遷移門檻進行操作。
因此採用和測試結果不同的 B 方案，讓使用者能夠逐步學習，以舊的知識為基礎，學習新的原理。
問題 2：進階使用者操作彈性
針對進階客群，調整產品使用彈性，增加 LINE Notify、LINE 機器人 、Google 試算表等擴充功能。
透過更多應用情境，增加 KOL 留存，促進受眾社群間自然推薦效果。
問題 3：使用者對產品陌生與不確定性
使用者初次使用編輯器型產品時，容易感到陌生，不了解如何開始進行操作。
解決方案：
提供技術文件 ( 教學手冊 )，引導使用者操作。
提供官方範例，自動生成程式，讓使用者參考範例。
設計流程系統化
01 Blockly 設計系統
建立 Blockly 設計系統，保持設計一致性及提升設計速度。依據功能性質設計相對應積木樣式，包含功能邏輯、樣式、文字、顏色等等規範。
02 產業領域規範
除了設計，也會注重社會責任。我常推薦團隊觀看教育部編寫的 AI 教材系列《 和 AI 做朋友 》，不只是單純設計產品，更重要的是能夠符合產業領域的規範。
03 產品設計 & 行銷
與 BD 團隊合作行銷策略，YouTube 影片 / 教案 / 電子報 / 線上直播活動 / 科技展……
成果 & 影響
這次的改動，對使用者有大幅度的正向改善，在商業目標上也有顯著的提升，不少使用者反應新的設計更符合他們的教學過程，也更願意選擇 Web:AI 這項產品。
不過仔細探究會發現，以 Web:AI 的商業模式很難將全部的銷量成長歸因於這次的改動，仍有其它環境變因影響，因此商業分析「產品改動與商業價值的關係」是團隊未來能夠改善的方向。
心得 & 反思
在設計層面的成功，可以將這套模式套用在往後的開發上，已經研究過的使用者行為流程、操作模式，都可以直接沿用，減少團隊在開發、溝通上的時間成本。
我在 Web:AI 這項產品總共負責了 1 年半的時間，身為 Prodcut Designer 兼 Product Owner，每次的迭代都經過大量跨部門溝通與商業策略考量，最困難的還是處理利害關係人的願景，雖然有許多設計方案無法順利執行，但所有決策都是取捨下的最佳解，還滿有成就感的。
我帶給團隊的...
將使用者研究的結果收斂，解決抽象問題。
選擇適合的研究方法，快速的找到產品設計方向。
觀察使用者旅程中的各環節，發覺產品機會點
觀察使用者旅程中的各環節，發覺產品機會點。
對產業深度了解，並分享給團隊共同成長
對產業深度了解，並分享給團隊共同成長。
5 個月後...
在這次改動 5 個月後，團隊收到意想不到的消息！Google 主動找上我們，要和 Web:AI MoonCar 這項產品合作，舉辦一次課程營隊。象徵著這段時間的付出與迭代受到外界的欣賞，相當有成就感！
( 右圖：我在現場協助教學 )
