塔羅占卜 × 古典占星｜用內容建立信任，用服務與課程完成轉換
-
以大量教學文章做長期引流，降低新訪客進站門檻
-
服務（占卜/占星解析）與課程（實體/線上）在同站承接高意圖轉換
-
提供免費命理分析工具，讓使用者「先試用、再信任、再購買」
-
內建會員中心、訂單資訊與購物車/結帳動線，方便回訪與續購
CLIENT
波德神秘學事務所
INDUSTRY
- 命理學
- |
- 命理諮詢
01
背景與挑戰
Challenge & Solution
建立一個可長期營運的神秘學知識平台：同時提供命理服務、課程教學與內容分享。
-
主訴求是「提供塔羅占卜、古典占星以及神秘學相關資訊及服務」
-
內容面以「最新文章 / 精選文章 / 單牌占卜 / 三牌占卜」等分類做長期更新
-
商業面同時具備「命理服務」與「塔羅課程（實體/線上）」兩條產品線
-
另提供「免費命理分析工具」（含塔羅工具、六爻工具、占星工具等）作為導流與體驗入口
在資訊量很大的情況下，仍要讓新手快速分流、回訪者快速找到下一步，並把轉換留在同一站完成。
-
受眾意圖多元：有人要「算」、有人要「學」、有人只想「看文章/用工具」——需要清楚分流
-
內容龐大：文章分類多，若沒有導覽與分層，很容易迷路或只看一篇就離開
-
轉換鏈要閉環：從內容→服務/課程→購物車/結帳→會員中心，需要一致且順的動線
-
需要建立信任：命理服務屬高信任交易，必須透過自我介紹、經驗敘事與作品/案例/內容累積說服力
用「內容中樞＋四大入口」打造可持續變現的命理品牌平台
-
資訊架構怎麼重整：主選單以「命理服務 / 塔羅課程 / 古典占星課程 / 免費命理分析工具 / 免費學習資源區 / 我的線上課程」做清楚分層，讓不同意圖的使用者一進站就能選路徑
-
轉換流程怎麼縮短：首頁直接放 CTA（例如：占星占卜解析服務、線上課程入口），避免使用者需要先翻很多頁才找到可付費項目
-
哪些功能被整合到同一站：
-
內容：最新文章、分類文章、Podcast/影音內容承接信任
-
服務：服務總覽與細項服務（本命星盤、年度流年、一事一問、塔羅占卜）
-
課程：實體課、線上師資課、古典占星系列課
-
工具：免費塔羅、年運、六爻、占星分析工具
-
商務：購物車/結帳、會員中心、訂單資訊
-
-
行動裝置（RWD）怎麼優化：以「卡片式文章列表＋清楚的主選單分流」降低手機掃讀成本。
8WK
開發週期
100%
RWD 適配
設計系統
-
主題是命理與神秘學，但又希望「理性、可讀、專業」，所以整體以乾淨留白為底，搭配高辨識度的紅色作為主 CTA 與重點色。
-
內容量大（文章、課程、工具、服務），所以字體選擇偏現代、可讀性高的無襯線，讓長文閱讀更舒服。
-
轉換點分散在多種入口（服務/課程/工具），所以用一致的按鈕色與 hover 色維持操作一致性。
Typography
Aa
‘Work Sans’, (Headings)
Aa
‘Work Sans’ (Body)
主要顏色
背景顏色
次要顏色
文字顏色
02
介面設計
Visual Showcase
-
首頁節奏：Hero（品牌一句話＋服務/課程 CTA）→ 最新文章列表（內容引流）→ 主打線上課程區塊（含課程亮點與引導按鈕）→ 自我介紹/專業背景（建立信任）→ 課程總覽/商品專區/會員中心（回訪入口）→ 聯絡表單（承接詢問）。
-
元件語言：文章以卡片列表呈現、CTA 以主色紅系按鈕統一；導覽含多層下拉，適合內容量大、分類多的知識站結構。
-
行動版策略：以「分類導覽＋文章卡片」讓手機使用者能快速滑動掃讀；聯絡表單直接放在頁面下方，降低找聯絡方式的摩擦（未提供數據）。
-
為什麼這樣設計：命理服務的成交通常需要信任累積，因此先用文章與自介建立專業感，再用清楚分流的選單把高意圖使用者導到服務/課程/工具，最後用表單與購物流程完成轉換。
電腦版首頁
手機版首頁
03
合作流程
Our Workflow
需求訪談與規劃
視覺設計與開發
測試上線與教學
「文章、課程、服務與工具入口整理成一套清楚的架構後，新訪客更快找到想要的內容，詢問也更聚焦。」
波德
波德神秘學事務所 創辦人