買斷式網站案例

沐光學苑｜個案諮詢 × 課程培訓 × 身心靈成長的一站式平台

整合一對一個案諮詢、專業養成課程與日常共修。
訪客可以從首頁直接進到「個案預約／課程報名／商品」入口。
服務以分類清楚呈現，選定方案後可加入購物車完成結帳。
同時提供學員登入與會員中心，支援後續學習與管理。

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

CLIENT

沐光學苑身心靈成長中心

INDUSTRY

命理學
|
命理諮詢

客製化版型設計

背景與挑戰

Challenge & Solution

以個案諮詢與身心靈課程為核心的學苑，需要把多元服務變成清楚可購買的線上流程。

品牌由許睿光老師主導，提供占星、塔羅與多種靈性療癒相關服務。
除了一對一個案，也有不同層級的專業養成與大眾成長型課程。
內容面透過關於頁建立方法論與信任背書，輔助轉換。

服務與課程種類多、決策成本高，若沒有清楚入口與路徑，轉換容易流失。

服務項目跨度大（塔羅／占星／元辰宮／前世今生等），需要清楚分類與導購。
課程屬性多元（專業培訓／工作坊／日常共修），需要讓訪客快速理解差異並下單。
需要同時兼顧「首次訪客建立信任」與「直接行動（預約/報名）」兩種需求。
後續必須能承接學員登入與會員中心，讓購買後的使用體驗不斷裂。

Solution

打造「個案 × 課程 × 商品」三線並行的轉換型學苑平台

資訊架構重整：主選單以「課程總覽／個案預約／光選精品／關於我們／常見問題／部落格」分流，讓訪客依目的快速進入對應入口。
縮短轉換流程（CTA/購買）：首頁直接放兩個核心 CTA（諮詢一對一個案、諮詢課程資訊），並在下方用三大區塊把路徑固定成「個案預約／課程報名／商品」。
功能整合到同一站：
- 個案以商品分類頁呈現（可直接加入購物車），把「預約」需求商品化。
- 課程總覽把課程切成三大方向，並以清單＋價格＋加入購物車承接交易。
- 會員/學員登入入口同站存在，支援後續學習與帳號管理。
行動裝置（RWD）策略：採用「大按鈕 CTA＋卡片式區塊＋清楚標題層級」的結構，在手機上仍能用掃讀方式快速做決策。

6 WK

開發週期

100%

RWD 適配

設計系統

為了讓「身心靈服務」看起來更可信、好親近，同時又能承接電商式結帳流程，因此採用淺色大留白作為底、搭配高明度藍色系重點色做導引；字體以系統系無襯線為主，降低閱讀負擔，讓訪客可以更快掃到 CTA 與方案分類。

Typography

Helvetica (Headings)

Helvetica (Body)

主要顏色

背景顏色

次要顏色

文字顏色

介面設計

Visual Showcase

首頁節奏：以「老師/學苑介紹＋雙 CTA」開場，接著用區塊把三大行動入口固定（個案預約／課程報名／光選商品），再補最新消息與聯絡方式，最後用完整 footer 提供會員中心與學員入口。
元件語言：大量圖片/活動實績視覺做背書，搭配卡片式內容區塊、清楚的分段標題（例如〖個案預約〗、〖課程報名〗），並在課程/商品列表使用「價格＋加入購物車」的電商元件承接交易。
行動版策略：以「短標題＋條列分類＋明顯按鈕」讓手機用掃讀也能決策；而購物車與帳號入口常駐於頁首/頁尾導覽，降低回找成本。
為什麼這樣設計：身心靈服務的決策高度依賴信任，因此先用師資與實績建立可信度，再用固定入口與商品化結帳把行動收斂，兼顧「看懂」與「買得到」。

電腦版首頁

手機版首頁

合作流程

Our Workflow

Step 01

需求訪談與架構規劃

需求訪談與規劃

透過 60–90 分鐘線上會議釐清品牌定位、課程產品與未來擴充方向，並協助整理初步網站架構（Sitemap）。

Step 02

頁面設計與功能建置

視覺設計與開發

依照確認後的線框圖與架構，完成首頁、主題頁、課程頁與名單收集頁，並串接必要的外掛與追蹤碼。

Step 03

測試、上線與操作教學

測試上線與教學

上線前進行跨裝置測試，確認表單、追蹤與速度表現，最後安排教學，確保客戶可以自行更新內容。

「原本我們的服務跟課程種類很多，客人常常不知道要從哪裡開始看。這次把『個案預約／課程／商品』整理成很清楚的入口後，詢問變得更聚焦，客人也更容易直接下單。後台管理也順很多，對助教來說省了不少來回說明的時間。」