上一頁
買斷式網站案例

100% 線上華語課程平台，讓全球學員更快開始上課

  • 首頁以「探索課程」作為主 CTA，快速導入課型總覽。

  • 先用課型卡片分流（Intensive / Academic / Grammar / Children…），降低第一次選課門檻。

  • Contact 頁提供 Mandarin Global QA Form：CEFR 程度、學習年資、短長期目標一次問完，讓後續諮詢更聚焦。

  • 課型頁可直接「選老師」進入上課流程，師資背景清楚呈現。

預約免費諮詢 看看這個網站
CLIENT

Mandarin Global 環語文教有限公司

INDUSTRY
  • 1 對 1 教學
  • |
  • 語言教學
客製化版型設計

01

背景與挑戰

Challenge & Solution

品牌面向全球學員提供線上華語課程，需要把「選課 → 詢問 → 排課」整理成更順的動線。

  • 首頁主打 online Mandarin course，並清楚標示 100% online / 50 mins / Everyday / Worldwide。

  • 站內內容採中英並列敘述，符合海外學員理解情境。

  • 課程以多課型呈現，並在課型頁導向「選老師」進一步成交/排課。

讓新訪客一眼看懂「我該選哪種課」「下一步怎麼做」，並把需要的學員資訊提前收齊。

  • 課型多，需要明確分流入口（避免使用者不知道從哪開始）。

  • 海外學員在報名前常需要程度與目標對齊，若沒有預先蒐集，詢問會來回很久。

  • 跨國線上服務對「信任感」要求更高，需要把師資專業與方法論說清楚。

  • 站內有登入/註冊與購物車入口，動線要避免跳轉分散、造成流失。

Solution

打造「課型分流＋師資信任＋QA 預審」的一站式招生與報名平台

資訊架構怎麼重整：導覽列固定核心入口（Home / Courses Details / Private Classes / About Us / Contact），讓使用者不迷路、每一步都有下一站。

4WK

開發週期

100%

RWD 適配

設計系統

  • 因為受眾是全球學員、閱讀時間長，所以用「高可讀性的無襯線內文」搭配「具質感的襯線標題」，讓內容專業但不壓迫。

  • 因為要縮短決策時間，所以把 CTA 按鈕做成明顯的淺藍底、深藍 hover，讓互動回饋一致、下一步更明確。

  • 因為要維持長期耐看，所以底色用偏暖的米白（非純白），提升舒適度。

Typography

Aa

‘Bodoni Moda’ (Headings)

Aa

Roboto (Body)

主要顏色

背景顏色

次要顏色

文字顏色

02

介面設計

Visual Showcase

為什麼這樣設計：海外學員最怕「看不懂該從哪開始」，所以先用課型分流把選擇變簡單，再用 QA 表單把程度與目標一次問完，讓諮詢與排課更快進入重點。（未提供數據）

電腦版首頁

手機版首頁

03

合作流程

Our Workflow

Step 01
需求訪談與架構規劃
需求訪談與規劃
透過 60–90 分鐘線上會議釐清品牌定位、課程產品與未來擴充方向，並協助整理初步網站架構（Sitemap）。
Step 02
頁面設計與功能建置
視覺設計與開發
依照確認後的線框圖與架構，完成首頁、主題頁、課程頁與名單收集頁，並串接必要的外掛與追蹤碼。
Step 03
測試、上線與操作教學
測試上線與教學
上線前進行跨裝置測試，確認表單、追蹤與速度表現，最後安排教學，確保客戶可以自行更新內容。

「我們希望做一個全球學員都能快速上手的華語學習平台。現在從課型探索、師資介紹到 QA 表單蒐集程度與目標都整合在同一站，詢問變得更聚焦，也更容易把學員導到下一步安排課程。」

Ting Yu CHou

Mandarin Global 環語文教有限公司 創辦人

準備好升級您的品牌網站了嗎？

預約免費諮詢 查看更多案例