孩子教養路上不再孤單的賦能學習平台
領域專家直播講座，快速掌握重點與方法。
影音課程可反覆觀看，建立可持續的學習節奏。
精選文章與主題分類，讓你更快找到需要的資源。
需要更深入協助時，提供一對一課程與遠距心理諮商入口。
CLIENT
心保Empower（心身健康賦能平台）
INDUSTRY
- 心理健康
- |
- 醫療科技
01
背景與挑戰
Challenge & Solution
將親子教養與心理健康知識，整合成「可學、可用、可持續」的數位賦能平台。
平台聚焦家長與照顧者的教養需求，內容涵蓋 ADHD、睡眠管理、霸凌、ASD 等主題。
以直播講座與影音課程提供系統化學習，並以精選文章補足日常知識更新。
除內容學習外，也整合量表評測入口與一對一服務，形成完整支持網。
平台屬於 MentalWe 相關服務體系的一部分（舊平台升級至新平台的脈絡在 FAQ 有明確說明）。
內容量大且服務多元，需要同時做到「好找、好買、好上課、好求助」。
-
需要把直播、影音、文章、組合優惠做清楚分流，避免使用者找不到入口。
-
轉換流程要短：從瀏覽到加入購物車、結帳、登入/註冊都要直覺。
-
新舊平台切換時，必須清楚交代帳號是否共用、課程是否轉移與客服管道。
-
合作方案/兌換券類的購買情境，要能在結帳流程順利完成兌換。
打造「內容分流清楚＋購物車結帳＋學習與服務入口整合」的賦能平台
-
資訊架構怎麼重整：用主選單把服務切成四大塊——課程與文章（直播/影音/文章/組合）、一對一服務、量表評測、公益專區，再加商城與企業專區，讓使用者一眼知道該往哪走。
-
轉換流程怎麼縮短：全站提供「加入購物車」與「帳號登入/註冊」的明確入口，讓使用者在想買/想上課的當下能立刻完成下一步。
-
哪些功能被整合到同一站：
-
內容學習：直播講座、影音課程、精選文章、組合優惠
-
服務延伸：一對一課程、遠距心理諮商、督導/顧問
-
工具入口：量表評測（連到 apps/sleep 子網域）
-
電商：商城商品列表與價格呈現（營養品/睡眠記錄儀等）
-
兌換機制：課程頁明確引導在結帳頁輸入兌換券號碼
-
-
行動裝置（RWD）怎麼優化：以「卡片式課程列表＋短段落標題層級＋醒目的 CTA」降低手機閱讀負擔。
6 WK
開發週期
100%
RWD 適配
設計系統
因為目標族群是家長與照顧者，閱讀情境常在碎片時間，所以整體視覺以「乾淨、穩定、好讀」為優先：大行高＋清楚字級，降低理解成本。
平台同時承載內容與服務轉換，所以用明確的藍色系主色做導引，搭配淺灰底提升留白與舒適度，讓 CTA 不需要用太重的裝飾也能被看見。
Typography
Aa
Helvetica (Headings)
Aa
Helvetica (Body)
主要顏色
背景顏色
次要顏色
文字顏色
02
介面設計
Visual Showcase
-
首頁節奏：Hero/捷徑入口（心動全台灣、離島早療、直播、影音、文章）→ 直播講座列表 → 影音課程列表 → 組合優惠 → 精選文章 → 公益計畫區塊 → 其他服務（1v1/遠距諮商/督導顧問/工作坊），以「先找內容、再選方案、最後延伸服務」的節奏引導。
-
元件語言：大量使用卡片式內容模組（課程卡/文章卡），每張卡片包含主題標籤、標題、講者與時長/價格等關鍵資訊，讓使用者掃一眼就能決定要不要點進去。
-
按鈕與互動：以「更多⇀」「加入購物車」「登入/註冊」「忘記密碼」等明確動作文字降低猶豫成本；兌換券流程也用條列步驟寫在課程頁，避免使用者卡在結帳。
-
行動版策略：透過較大的字級與行高確保手機閱讀舒適；導覽以可展開子選單承載大量分類，避免一次塞滿。
-
為什麼這樣設計：心理健康/教養議題的內容「信任與可讀性」優先於花俏視覺；因此用穩定藍色系建立專業感，用清楚分類與短 CTA 讓使用者更快走到「報名/購買/預約」。
電腦版首頁
手機版首頁
03
合作流程
Our Workflow
需求訪談與規劃
視覺設計與開發
測試上線與教學
「我們想把直播、影音課程、文章跟一對一服務都整合在同一個入口，讓家長不用到處找資源；現在從註冊、選課到結帳都更方便，遇到問題也能快速找到 FAQ 和客服。」
心保
心保Empower（心身健康賦能平台） 創辦人