Hahow 是台灣的線上學習平台，其正逐漸從自產內容線上學習平台往
平台化發展，團隊希望透過結合生成式 AI 來改進使用者學習過程中所遇到的問題，像是購課前的不確定性、自己看課所造成的孤獨感與對所學的不確定所造成的學習中斷。
產品策略
介面設計
體驗設計
2023/06 - 2024/12
專案概覽
合作客戶
專案時間
角色
generative AI
learning assistant,
improve online
learning experience
The Story
Hahow 正逐漸從自產內容轉向平台化發展，期望透過多元的內容提供者來豐富課程的多樣性、提升客戶單價以及消費者與品牌之間的連結。這個策略雖然豐富了平台的內容，卻也增加了消費者在選擇課程的難度。「當有越多的選擇出現，使用者作出抉擇的時間就會越長」 — Hick’s Law。
2023 年被稱為生成式 AI 元年，生成式 AI 不僅衝擊許多職業，也對提供內容為主的線上教育產業產生影響，然而，與其思考如何與其對抗，我們不如思考如何透過生成式 AI 來解決目前使用者的線上學習體驗，於是我們提出將 AI 導入 Hahow 平台，希望在使用者購課前、學習中等不同階段都能解決使用者對於線上課程的疑慮。
the Challenge
1
導入生成式 AI 實際上想解決什麼問題？
許多功能都已經有既有的解決方案，例如我們可以透過使用者的瀏覽紀錄、購物車內課程、加入最愛的課程用其他算法來推薦合適的課程，又或者我們既有的客戶服務就已經能解決部分使用者購課上的疑慮，那我們導入生成式 AI 實際來說是希望達成什麼效果？
於是我們先回頭看了一下使用者學習決策的流程：
資訊瀏覽
資訊摸索
建立
知識樣貌
選擇符合
目的切入點
建立
知識脈絡
取得
階段性成果
Awareness
看見更多透過 Hahow 帶來的實際改變，促使使用者進一步的行動
目的形成
無法從
外在行為觀察
Education+Engagement
建構學習可能性的切入點提供使用者學習方向
Conversion + Revenue + Recurrence
打造快速切入學習軌道的機會，並有效檢核學習成果提供與使用者既有知識體系最接近的學習切入點
A
資訊探索階段：減少購課前對於課程內容的不確定性
線上課程雖然有提供課綱和試看影片，但由於購買後無法退款的條款，根據研究有 70%-80% 的消費者者在購買前傾向於查看「購課前問答」和「課程評價」，了解是否有與自己情境和程度相同的人的購課經驗。他們也會上社群平台或網路上搜尋相關課程的分享文章，以避免購買已知內容或網路上可免費獲取的內容。
過多課程難以作出抉擇
此外，Hahow 平台上同一課程領域可能有數堂到數十堂課程，使用者在眾多選擇中的成本相當高，拉長了購課決策的時間。此時若有一個「學習顧問」協助分析使用者背景和學習目標，能強化使用者的購課信心。
學習、轉換階段：減少學生學習中流失的可能性
當使用者購課並觀看課程影片後，我們視其為「活躍學習學生」。學生應該在平台上觀看影片並與老師互動（例如提出課程問答、繳交作業），此時若能得到講師良好的回饋與互動，學生能保持活躍學習的狀態。若學生遇到老師「不回應、不批改作業或回答內容不滿意」，可能會轉向平台反映並由平台介入處理，當學生對平台處理方式不滿意時，可能會申請退費或不再使用平台，成為「流失的學生」。
而學習過程的體驗，很大部分仰賴於講師或是平台人力的參與，這就成為 Hahow 一直以來體驗上的隱憂。
因而，我們在思考： AI 如何「避免學習時的孤獨感」？ 如何能提供「延伸的」知識？
B
2
如何將生成式 AI 整合進現有產品？
在我們設計的第一版 MVP 後發現實際的使用率並不如預期，除了模型上尚有需要修正的地方外，我也在內部做了一些訪談，許多人提到「已經有 ChatGPT 了，為什麼還需要另外一個 Hahowise？」
我們最初的想法，是將現有的 Intercom 整合進生成式 AI 助教，讓 AI 助教成為使用者在 Hahow 上唯一的助手，你可以查詢課程資訊也可以切換到現有的客服服務系統。然而，在做完前期探索與工程實作探索後發現可行性較低。最後我們決定這麼做，主要原因有：
使用頻率：目前使用者對 AI 助教仍然很陌生，冒然的改動現有的客服流程可能帶來的問題會比效益來的多。
MVP 發佈後的使用數據：根據數據，Hahowise 目前的流量僅佔全站月流量的 0.12%，且從使用者的回饋中觀察到普遍還是沒有明確目的的「試玩」，或是「點擊我們的推薦問題」，我們認為在沒有明確的對應使用場景的情況下，並無法真的提升使用率，更難以解決預期內外解決的問題
雖然我們預期用生成式 AI 解決的問題有很多，但由於整個團隊甚至於公司對為什麼要做 AI 並不是很清楚。
根據台灣網路資訊中心的數據，「在 2023 年 7 月時民眾在過去 3 個月內使用 ChatGPT 的比例為 25.7%，而這 25% 中表示『經常』和『總是』使用的比例僅佔 4.6%」。在這樣的背景下，團隊對於投入資源在 AI 上變得更為保守。
經過多次討論，我們決定先從以下目標開始：
專注於「購課前探索」：透過 Hahowise 推薦課程，減少使用者對於購課前的不確定性
Naming and Visual Role
AI 助理的視覺角色與命名
初期團隊探索過很多名詞，希望能沿用 Hahow（取自台語的「學校」 ha'k-hāu）這樣的諧音，也考量過感覺比較有智慧、科技感的名詞，但最後我們認為「Hahowise」更能連結品牌，易讀且易記。
Hahow 品牌在 2023 Rebrand 時已經定義了既有的人物與整套相關的插畫元素，以「探索未知星球、來傳達這些知識存在於許多未知的領域」為主題。在這個背景下，我設立了一些視覺定義：
沒有具象造型：有別於品牌角色小蛙、其他人物虛擬角色，希望是一種隨時在身邊的虛擬助理。
中性說話方式：不會偏向可愛或正式，但可視後續定調的角色個性調整定位。
動態效果：希望在 Hahowise 與用戶溝通時，會有一些動態效果。
未來取代 Intercom 位置：希望是一個圓潤的造型，在既有介面上讓使用者感到熟悉。
我們也參考了既有語音助理的視覺模式，找了一些可能有助於效果的視覺範例。最後視覺設計師提出了 5 款候選方案，最終選定的樣式主要考量該樣式在 Hahow 平台上的可用性，並能延續品牌故事（星球）。
Siri
Apple
Copilot
Microsoft
Alexa
Amazon
Assistant
參考資料
我們參考多個現有的 AI 助理產品如何設計語音助理形象，
再從既有 Hahow 的插圖元素中去找出 Hahowise 可能的形象。
Hahow 現有品牌插圖系統，結合小蛙、人物、星球等
元素來打造多元、豐富且未知學習世界。
Hahowise
Light Mode
Hahowise
Dark Mode
最後團隊選定的 Hahowise 樣式，延續品牌星球故事，又能融入現有 Hahow 產品，有一定具象但不是特定角色
Minimum Viable Product
MVP 版本設計的目的是快速測試市場反應與收集使用者反饋，於是 我們首先推出了課程推薦功能。由於團隊希望小步快跑並
盡可能的蒐集到數據來調整模型，最初我們希望使用 Sendbird 或 Intercom 串接 Miso AI + ChatGPT 來推薦課程，但發現目前 Sendbird/Intercom 的客製化卡片存在限制。因此，我們決定使用團隊內部開發的模型，並以單獨全頁式獨立於 Hahow 網站之外
進行試驗。 考量到許多使用者對於 ChatGPT 的介面仍不熟悉，初期設計更貼近常見的聊天機器人，如 Facebook Messenger 和 Line@，以降低使用者的學習曲線。
chatroom design 1.
提供建議問題
打開生成式 AI 空白對話時，可以想像你有各種無限的選項—你可以問 AI 任何問題，而這樣沒有邊際的開放式提問可能會讓沒有明確目的的使用者卻步。
經過競品分析，我們發現現有多數生成式 AI 產品如 ChatGPT、Microsoft Copilot 都有設置「建議問題」以便
使用者開始對話。這些建議問題不僅降低了使用者的學習門檻，還能引導使用者更有效地利用 AI 的功能。
chatroom design 2.
課程推薦
將課程介紹頁的「哪些人適合這堂課？」、「你可以學到什麼？」加進模型優化，提供
使用者更具參考的推薦內容。
在訊息中顯示課程商品卡片，
引導用戶快速到課程介紹頁。
收集用戶回饋
由於我們初期訓練的模型不時會出現幻覺，這個階段最重要的就是透過用戶參與讓工程師有更多數據可以調整模型。
參考相關生成式聊天產品，直接在訊息旁提供 Like/Unlike 按鈕，使用者點擊後可以再進一步輸入回饋。這個做法可以降低使用者回饋的成本，更大量的蒐集到使用者對於 AI 回覆內容的評價。
使用者觸發後就會自動將以下訊息回傳到 Slack Channel： 用戶回饋、Hahowise 回應內容、User ID/時間。
顯示該則訊息 AI 回應，讓團隊參考回答內容是否有幻覺。
留存使用者相關資訊，如有需要聯繫使用者會轉移客服。
使用 emoji 幫助團隊快速辨識哪則用戶回饋需要關注。
數據觀測
2023 年 9 月時，搭配 AI 學習相關課程及行銷活動，初期成功將用戶數據提升至 2000 多人，短期內的推廣是有效的，也因此有蒐集到一些模型的回饋。 但在後續三個月內，使用人數逐步在下降中，尤其是回訪率大幅降低。根據數據顯示，大約在第一天使用後，幾乎沒有再回訪。這可能是因為以下幾個原因：
入口問題：我們將 Hahowise 的入口藏在 Intercom 裡面，希望培養使用者從 Intercom 開啟，但因此使用者很難找到入口。
體驗：無論是模型或設計體驗仍然都在 MVP 階段，若初次使用體驗無法滿足用戶預期，後續要再讓用戶回訪的難度就會提高。
除了持續依據使用者回饋來調整模型，我們也在思考：
怎麼樣的入口可以更好的結合 Hahow 現有平台？
哪些情境能更好的展現生成式 AI 在課程探索的價值？
從數據中可以看到，在 2023/09 上線後用戶量上升至 2000 多人，隨後逐月下降
從數據可以觀測到 Day 1 後的回訪率已經明顯下降
Optimization
我們最初的構想是希望以 Slide-out Panel 的形式在 Hahow 網站上顯示 Hahowise，因而這會是這次版本優化的主要工作。
除此之外，依據 MVP 階段所觀測 Hahowise 回應的內容，我也發現聊天泡泡式 UI 並不適合使用在生成式 AI，因為他可能一次會回應相當多的資訊，甚至會因為使用者的需求而產出縮排文字、表格的內容。
經過 MVP 的數據觀測，我們也在思考：是否將 Hahowise 放在 Hahow 產品中就能被使用者廣泛使用？ 或是有其他場景能提升
使用意願？也希望在這個階段做出一些相關的調整。
optimization 1
依照使用情境顯示 Hahowise
除了思考 Hahowise 的入口如何融入既有產品，我們也思考了使用者常用的探索課程的情境。這過程中我們參考了 Microsoft 365 和 Notion 使用 AI 的情境，發現 AI 更適合在使用者有明確目的的情況下出現，而非常駐的聊天室。
使用者在 Hahow 網站上探索課程的途徑可能包括以下幾種：
首頁的 Top Banner、最新募資、精選課程
透過 Miso AI 機制算出的課程推薦
課程領域頁瀏覽該類型底下的所有課程
透過搜尋列找到特定主題或科目名稱
不同類型的使用者會有不同的找課路徑。在目前的情境中，我們認為使用者在搜尋課程時，對於課程探索的動機更明確。
因此我們假設：
將 Hahowise 作為搜尋的選項之一，能增加 Hahowise 的使用率，並提升課程銷售的轉化率
當使用者輸入搜尋關鍵字以後，第一個顯示的項目會是 Hahowise，鼓勵使用者透過 Hahowise 查找課程。
在沒有搜尋字串時點擊會開啟最後一則對話，有搜尋字串時則會帶入字串開新對話。
Copilot 主要場景是對話式機器人（生成式 AI），但在 Microsoft 365 的產品線中，尤其在 Word，
他們將 Copilot 整合到寫作過程中。這樣的整合讓生成式 AI 的使用場景能跳脫既有的框架，提供更靈活和多樣化的使用方式。
optimization 2
強化聊天體驗
這次優化的另一個重要目標，就是將 Hahowise 的聊天視窗整合進既有的產品，而我們最初的想法就是使用 Slide-out Panel，這個做法讓使用者可以在瀏覽 Hahow 網站的同時也能與 Hahowise 對話。我先針對既有產品使用 Side Panel 的方式做了一些探索：
Slide-out Panel : 可與主畫面同時操作
為主畫面操作的輔助畫面
Slide-out Panel : 不可與主畫面同時操作
作為一種從側邊彈出的 Popup Modal，操作時需要使用者將注意力
放在 Panel 內容。
另外也有將頁面切割為兩欄，在 Side Panel 出現時原始內容會被縮小。
例如： Asana、Microsoft Teams 使用 Copilot 時
我們考慮到現階段的目標是輔助使用者在購課前探索更多資訊，使用者可能會隨時與 Hahowise 對話來確認課程內容。因此，我們最終選擇了可與主畫面同時操作的版本，不切割頁面，讓聊天室浮在畫面上，這樣既不打擾主畫面的操作，又能提供即時的輔助。
透過 Slide-out Panel 的設計，使用者可以一邊瀏覽課程一邊詢問 AI 有關相關課程的資訊
聊天室樣式
我們對對話模式進行了大幅調整，考量 Panel 對於主畫面而言更像是一個附加畫面，內文的呈現不應搶走主畫面的注意力。因此，我將原本有氣泡聊天室設計的模式調整為純文字，使用不同程度的灰階來表現主客關係。
前一版設計
沿用原始設計時，發現 Panel 內容視覺層次與下方頁面互相爭奪注意力，在瀏覽時會不知道應該要把注意力放在哪。
經過縮小畫面元件大小、字級大小、改變顏色層級、簡化聊天室按鈕後，當 Panel 同時與下方主任務並存時，也能看出任務的主次。
除此之外，在 MVP 時期，我們參考了初期 ChatGPT 的版本，將「重新、停止生成」按鈕放在輸入框上方，但發現這個位置擾亂了使用者閱讀訊息內容。因此，在改版後我們將停止生成的按鈕整合進訊息輸入框中，使整體介面更簡潔、更易於使用。
前一版設計
重新生成卡在回應訊息中間，瀏覽時會影響閱讀動線。
將重新生成整合進訊息，停止生成放進 Textfield。
數據觀測
自從 2024/2/26 上線至 4/29，兩個月內在 Hahowise 中點擊課程卡片的有 32.31%，而 透過 Hahowise 達成的課程轉化率則有 32.23%。令人意外的是自 2023/09 開放使用以來，這兩個月的課程轉化貢獻了一半以上。
回訪率
但在回訪率上只有些微的提升，可能是因為 Hahowise 本身是作為解決特定問題的工具，而這個階段使用者通常用來做課程探索，因此回訪率會因使用者的動機的變化而有所影響。
自從 2024/02/26 上線觀察至 4/29，從 Hahowise 推薦的課程商品卡片到最後的轉化有 32.23%
用戶回訪率相較於 MVP 僅有些微成長
Future
在 AIGC 趨勢下，教育平台導入生成式 AI 的目標不僅限於建立課程探索的客服機器人，最終目的是減少學生在學習過程中的流失。未來的發展方向包括：
即時課程助教
在課程教室內依據課程內容訓練另一套助教模型，讓學生能夠針對課程進度即時提問並得到答覆，AI 助教還可以提供延伸學習的相關資訊，我們期待讓學生透過一堂課程發展他對該領域的好奇心，而非只是學完該堂課的課綱內容。
在看課的同時，使用教室的側邊欄叫出配有課程知識的 Hahowise 模型，即時討論課堂中想進一步瞭解的問題。
依據用戶錯題重新設計測驗
Hahow 預計在 2024 年 7 月上線課程測驗功能。講師可以通過 prompt 快速生成不同題型的測驗。學生端會顯示測驗結果。我們可以透過 Hahowise 整理學生的錯題方向，並自動生成相關題目進行加強訓練。
使用者可以選擇「依據錯題重新測驗」，讓 Hahowise 根據本次測驗錯題方向重新設計一套題組，這個做法可以幫助學生
是根據觀念來加強複習，而非透過同樣的題目做數次來加強印象，達到更好的學習效果。
其他像是
課程進度摘要：透過 Hahowise 在使用者返回課堂時提供過往進度摘要，幫助使用者快速恢復學習狀態
學習進度安排：透過 Hahowise 將課程內容拆分成更小的段落，以幫助使用者在通勤或是午休等碎片的時間快速學習
也是團隊過往討論過的方向。
Projects
中文
