甜點 × 藝術的線上學習空間,把每一步練習變成作品
整合「課程展示、購買、會員學習」的一站式平台。
用熱門課程與清楚分類,讓學員快速找到想學的主題。
從課程介紹 → 加入購物車 → 註冊/登入 → 進入學員控制台,路徑更直覺。
同時保留官方 LINE 聯絡入口,售前/售後問題都能快速回覆。
CLIENT
Don Don上課鐘
INDUSTRY
- 甜點製作
01
背景與挑戰
Challenge & Solution
為熱愛甜點與烘焙藝術的族群,建立可長期營運的線上課程學習與購買平台。
品牌主打「在家也能完成專業又療癒的甜點夢」,課程內容涵蓋馬林糖、翻糖、彩繪蛋糕等主題。
首頁以熱門課程作為入口,搭配學員見證建立信任,並以「立即註冊」收斂行動。
課程頁提供分類與排序,讓使用者能用主題/類別快速篩選課程或組合包。
把「內容很豐富的課程」用更短、更好懂的流程呈現,讓使用者更快完成註冊與購買。
-
課程種類與方案(單課/組合包)需要清楚分流,避免使用者找不到入口或比價成本太高。
-
需要在首頁快速建立信任:用見證/學習成果降低「線上課看不懂」的疑慮。
-
購買與學習是兩段流程:要讓「加入購物車」與「註冊/登入/學員控制台」銜接順、少卡關。
-
售前問題若沒有出口,容易流失:需要明確的客服導流(官方 LINE)。
打造一站式課程銷售 × 會員學習平台(課程展示、購買、學員入口、客服導流整合)
-
資訊架構重整:導覽列以「課程總覽 / 實體商品 / 聯絡我們 / 學員控制台」做主要分流,先把使用者最常見的任務(找課、買課、詢問、登入)放到第一層。
-
轉換流程縮短:
-
首頁直接呈現「最熱門的課程」與價格/折扣資訊,讓使用者不用再多點兩三層找推薦課程。
-
課程列表頁提供「類型(課程/組合包)」與「類別」篩選,加上排序,降低找課成本。
-
課程卡片提供清楚 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
需求訪談與規劃
視覺設計與開發
測試上線與教學
我們終於有一個能長期經營的自有平台,課程、組合包與學員入口都集中在同一站,管理更省時。」
亞芸老師
Don Don上課鐘 創辦人








