上一頁
買斷式網站案例

甜點 × 藝術的線上學習空間,把每一步練習變成作品

整合「課程展示、購買、會員學習」的一站式平台。
用熱門課程與清楚分類,讓學員快速找到想學的主題。
從課程介紹 → 加入購物車 → 註冊/登入 → 進入學員控制台,路徑更直覺。
同時保留官方 LINE 聯絡入口,售前/售後問題都能快速回覆。

CLIENT

Don Don上課鐘

INDUSTRY
  • 甜點製作
客製化版型設計

01

背景與挑戰

Challenge & Solution

為熱愛甜點與烘焙藝術的族群,建立可長期營運的線上課程學習與購買平台。

品牌主打「在家也能完成專業又療癒的甜點夢」,課程內容涵蓋馬林糖、翻糖、彩繪蛋糕等主題。
首頁以熱門課程作為入口,搭配學員見證建立信任,並以「立即註冊」收斂行動。
課程頁提供分類與排序,讓使用者能用主題/類別快速篩選課程或組合包。

把「內容很豐富的課程」用更短、更好懂的流程呈現,讓使用者更快完成註冊與購買。
  • 課程種類與方案(單課/組合包)需要清楚分流,避免使用者找不到入口或比價成本太高。

  • 需要在首頁快速建立信任:用見證/學習成果降低「線上課看不懂」的疑慮。

  • 購買與學習是兩段流程:要讓「加入購物車」與「註冊/登入/學員控制台」銜接順、少卡關。

  • 售前問題若沒有出口,容易流失:需要明確的客服導流(官方 LINE)。

Solution

打造一站式課程銷售 × 會員學習平台(課程展示、購買、學員入口、客服導流整合)

  • 資訊架構重整:導覽列以「課程總覽 / 實體商品 / 聯絡我們 / 學員控制台」做主要分流,先把使用者最常見的任務(找課、買課、詢問、登入)放到第一層。

  • 轉換流程縮短

    • 首頁直接呈現「最熱門的課程」與價格/折扣資訊,讓使用者不用再多點兩三層找推薦課程。

    • 課程列表頁提供「類型(課程/組合包)」與「類別」篩選,加上排序,降低找課成本。

    • 課程卡片提供清楚 CTA「加入購物車」,搭配「立即註冊」把行動收斂。

  • 同站整合的功能

    • 課程內容頁提供「關於課程 / 你會學到什麼 / 課程內容」等結構化資訊,讓使用者快速理解課程價值。

    • 會員系統提供註冊表單與學員控制台入口,讓購買後可回到平台持續學習。

    • 客服導流集中在聯絡頁,以官方 LINE 作為主要解答通道,減少來回等待。

  • 行動裝置(RWD)優化:以「課程卡片+明確 CTA」為主的列表節奏,行動版以更短段落、可點選的篩選/排序提升易用性(依現有頁面結構呈現)。


6 WK

開發週期

100%

RWD 適配

設計系統

課程屬於「療癒系手作」且需要呈現精緻感,所以整體採用溫柔的珊瑚粉作為品牌亮點,搭配奶油淺底與深色文字,讓畫面有溫度又不失可讀性。
課程頁資訊密度高,所以用清楚的字級階層與留白,讓「課程價值」可以快速掃讀。
按鈕採「透明底+色彩 hover」的互動語言,平常不打擾閱讀、滑過才明確提示可點擊。


Typography

Aa

Playfair (Headings)

Aa

‘Work Sans’ (Body)

主要顏色

背景顏色

次要顏色

文字顏色

02

介面設計

Visual Showcase

  • 首頁節奏:先用「最熱門的課程」把選課入口放在視覺第一段,接著用「學員見證」補信任與使用情境,最後以品牌介紹與「立即註冊」收斂行動。

  • 元件語言:課程採卡片式呈現(標題、時數/學員、價格/折扣、CTA),強調可掃讀;按鈕互動以 hover 變色突顯可點(依你提供的按鈕 palette 變數:透明底、hover 變 Secondary)。

  • 行動版策略:以「列表可掃+CTA 明確」為優先;分類/排序讓使用者在小螢幕也能快速縮小選擇範圍。

  • 為什麼這樣設計:課程內容本身資訊量大,設計上先解決「找得到課」與「看懂課程價值」兩件事;再用見證與客服入口降低疑慮,讓轉換路徑更短、更順。

電腦版首頁

手機版首頁

03

合作流程

Our Workflow

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

我們終於有一個能長期經營的自有平台,課程、組合包與學員入口都集中在同一站,管理更省時。」

亞芸老師

Don Don上課鐘 創辦人

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