Twister 飛碟球研究院：用可複製的方法，建立你的穩定好球
-
以「三階段課程」為主軸（RISE / CONTROL / STRIKE），讓新手到進階都有清楚路徑
-
首頁直接提供線上課程商品卡與 CTA，縮短「了解 → 選課 → 購買」流程
-
同站整合 1v1 客製方案與周邊商品，讓學習與裝備一次到位
-
內建會員登入/學員控制台，購買後可回到專屬學習區持續訓練
CLIENT
Twister Inst
INDUSTRY
- 運動教學
01
背景與挑戰
Challenge & Solution
以「台灣發明的飛碟球」為核心，建立運動教育與品牌平台，讓訓練方法可被複製、可持續學習。
-
平台定位是「Twister Institute for Spinner Bowling（飛碟球研究院）」
-
主敘事是科學化、可複製的三階段課程，協助學員建立正確動作與擊球思路
-
產品型態多元：線上課程（可直接購買）、飛碟球周邊、以及可視訊的 1v1 客製方案
-
需要同時滿足「第一次接觸的新手」與「想追求穩定提升的進階者」的資訊分流
把「高專業的教學方法」變成訪客一看就懂、且能快速完成購買與持續學習的轉換流程。
-
內容專業但受眾廣：要同時讓零基礎也敢買、又能說服想進階的人
-
產品線複合：課程＋周邊＋1v1 方案，需要清楚分流避免選擇疲勞
-
轉換要閉環：不只看文章或介紹，還要能「登入/註冊 → 購買 → 回到學員區」
-
疑慮處理：需要 FAQ 回答「是否預錄、能否重複觀看、能否提問、零基礎是否適合」來降低退縮
用「三階段學習路徑＋商品化課程卡」打造可持續營運的運動教學平台
-
資訊架構重整：主選單聚焦「首頁 / 關於我 / 線上課程 / 商品 / 聯絡我」，用最少層級完成分流，避免運動新手迷路
-
轉換流程縮短：首頁直接放課程卡（含價格/時長/了解更多），訪客不用先讀完長篇才找到購買入口
-
同站整合功能：
-
線上課程：商品化銷售＋學員控制台
-
電商：購物車與結帳流程，周邊可直接販售
-
服務：1v1 方案以「方案卡」方式呈現（單堂/學期/衝刺），讓使用者能快速選擇
-
4WK
開發週期
100%
RWD 適配
設計系統
-
品牌想傳達「專業研究院感」與「擊倒的力量」，所以整體以深色背景搭配金色系主色，建立強烈對比與舞台燈光感。
-
內容同時有中文教學與品牌敘事，所以字體用偏「書卷/沉穩」的 serif 組合，讓品牌更有權威與質感。
-
核心目標是轉換，所以大量使用卡片與明確 CTA，把課程、周邊、1v1 方案在同一頁就能被理解與選購。
Typography
Aa
‘Bona Nova SC’ (Headings)
Aa
‘Noto Serif TC’ (Body)
主要顏色
背景顏色
次要顏色
文字顏色
02
介面設計
Visual Showcase
-
首頁節奏：Hero（品牌標語＋主 CTA「探索線上課程」）→ 研究院定位與方法論 → 三階段路徑（RISE/CONTROL/STRIKE）→ 課程商品卡 → 周邊商品入口 → 1v1 方案卡 → 教學分享（內容經營）→ FAQ（消除疑慮）→ CTA（寄信聯絡）。
-
元件語言：卡片式商品/方案呈現（標題、摘要、價格、按鈕），搭配深底＋金色系重點色；按鈕/CTA 的層級清楚，主 CTA 先帶課程轉換。
-
行動版策略：以「短段落＋小標題＋卡片模組」維持可讀性；FAQ 直接在頁面中段呈現，避免手機使用者跳頁找答案。
-
為什麼這樣設計：運動教學的購買阻力通常在「我適不適合/會不會浪費錢」。所以先用方法論建立信任，再用課程卡縮短行動路徑，最後用 FAQ 把疑慮收掉，讓轉換更順。
電腦版首頁
手機版首頁
03
合作流程
Our Workflow
需求訪談與規劃
視覺設計與開發
測試上線與教學
「我們最在意的是能長期賣課與維運，現在有內容、商品、會員入口，整體結構更像一個真正能營運的平台。」
童先生
Twister Inst 創辦人