一、專案背景
FinTech Pro 是一家專注於企業級金融數據分析的 B2B 科技公司，成立於 2019 年。隨著公司從新創成長到中型企業（員工人數從 15 人成長到 60 人），原本的官網已經無法滿足業務需求。
現有網站的主要問題：
- 使用通用模板搭建，缺乏品牌識別度
- 行動裝置體驗差（未做響應式設計）
- 載入速度慢（PageSpeed 分數僅 35 分）
- 沒有清楚的價值主張和 CTA（Call to Action）
- 無法有效地收集潛在客戶名單（Lead Generation）
FinTech Pro 找到 DynamicGo 時，明確的目標是：建立一個能體現專業形象、提升線上詢問量、支援國際客戶的官網。
二、挑戰與機會
2.1 技術挑戰
- 需要支援中英文雙語（國際客戶佔比 40%）
- 產品功能複雜，需要用直覺的方式呈現
- 需要與現有的 CRM（HubSpot）整合，自動收集訪客資訊
- 要求載入時間在 2 秒以內（金融業客戶對效能敏感）
2.2 設計挑戰
- 金融科技的專業形象 vs. 現代科技的創新感
- 複雜的產品功能如何用簡潔的方式表達
- B2B 銷售週期長，需要多種內容類型（案例、白皮書、Demo 申請）支持決策
三、解決方案
3.1 技術架構
我們選擇了 Next.js + Headless CMS（Contentful）的架構：
- 前端框架：Next.js 14（App Router），支援 SSG + ISR 混合渲染
- CMS：Contentful，讓行銷團隊可以自主更新內容
- 託管：Vercel Edge Network，全球 CDN 加速
- 表單整合：HubSpot Forms API，自動建立 Lead
- 分析：GA4 + Hotjar，追蹤使用者行為
3.2 設計策略
- 首頁重新設計：清楚的價值主張（Headline + Sub-headline）、3 步驟使用流程、客戶 Logo 墙、即時 Demo 申請入口
- 產品頁面：以場景化方式呈現功能（而非功能列表），搭配截圖和動畫演示
- 案例頁面：結構化的故事框架（問題 → 方案 → 成果），搭配數據視覺化
- 信任元素：整合式安全認證展示、客戶評價輪播、即時聊天支援
四、執行過程
專案歷時 10 週，分為四個階段：
- 第 1-2 週：策略與規劃 — 利害關係人訪談、競爭對手分析、使用者旅程地圖、資訊架構設計
- 第 3-5 週：設計階段 — Wireframe → 視覺設計 → 響應式設計 → 設計審查
- 第 6-8 週：開發階段 — 前端開發 → CMS 串接 → API 整合 → 效能優化
- 第 9-10 週：測試與上線 — 跨瀏覽器測試 → SEO 檢查 → 內容遷移 → 正式上線
五、成果數據
官網重構上線後的 3 個月內，我們追蹤到以下改善：
- PageSpeed Insights 分數：從 35 分提升至 97 分
- 行動裝置跳出率：從 68% 降低至 32%（改善 53%）
- 平均停留時間：從 1 分 20 秒增加至 3 分 45 秒（改善 181%）
- 線上詢問表單提交量：增加 40%
- 白皮書下載量：每月平均 120 次 → 380 次（改善 217%）
- 搜尋自然流量：增加 85%（來自 SEO 優化 + 技術改善）
六、關鍵學習
- 從策略開始，不要從設計開始：花時間理解業務目標和使用者需求，設計才有方向。
- 效能是基本功：載入速度不是「加分項」，而是「必備項」。每多 1 秒載入時間，轉換率下降 7%。
- 信任需要累積：單一元素不夠，需要多個信任信號同時作用。
- 數據驅動迭代：上線只是起點，持續追蹤數據、進行 A/B 測試，不斷優化。
- 內容是王：再好的設計也需要好的內容支撐。投入時間撰寫高品質的案例、白皮書、教學內容。
想了解我們如何幫你達成類似的成果？，聊聊你的需求。