CONTACT 資源中心
web-design
網站設計與建置
hs
HubSpot 服務
marketing
數位行銷策略
資源中心
web-design
網站設計與建置
hs
HubSpot 服務
  • HubSpot 服務總覽
    • marketing
    數位行銷策略
    More than just marketing automation.
    web-design
    網站設計與建置
    web-card-1
    客製化網站設計與開發

    更聰明、更敏捷的設計與開發流程建置，致力於協助組織講述故事並擴大影響力。
    web-card-2
    模板網站建置

    更聰明、更敏捷的設計與開發流程建置，致力於協助組織講述故事並擴大影響力。
    web-card-3
    企業系統開發與 Web App 建置

    更聰明、更敏捷的設計與開發流程建置，致力於協助組織講述故事並擴大影響力。
    網站設計不只是好看，我們以 GDD 成長型驅動為基礎，聚焦在企業產品、銷售轉換與數據上，達到最高的營利效益。
    了解完整網站建置服務 成功案例分享
    hs
    HubSpot 服務

    認識 HubSpot

    產品總覽

    台灣唯一 HubSpot 鑽石級認證代理商，協助客戶透過 HubSpot 提高內部生產力與銷售機會， 創造全新品牌體驗。
    了解完整HubSpot服務 成功案例分享
    marketing
    數位行銷策略
    marketing strategy icon 數位整合行銷

    更聰明、更敏捷的設計與開發流程，致力於協助組織講述故事並擴大影響力。
    marketing automation icon 社群行銷服務

    更聰明、更敏捷的設計與開發流程，致力於協助組織講述故事並擴大影響力。
    content marketing icon SEO 與內容行銷服務

    更聰明、更敏捷的設計與開發流程，致力於協助組織講述故事並擴大影響力。
    interaction tool icon 行銷自動化服務

    更聰明、更敏捷的設計與開發流程，致力於協助組織講述故事並擴大影響力。
    我們擅長策略與數位行銷方案，交由我們為你量身策劃，拓展品牌知名度、提升購買銷售。
    了解完整數位行銷服務 成功案例分享
    Case Study
    中華民國對外貿易發展協會 TAITRA – 企劃財務處

    TAITRA 年報網站：捨棄傳統 PDF，模組化設計加速內容製作，降低維護成本

    67%

    網站停留率上升

    20%

    整體流量年增
    taitra-logo
    Introduction

    The Brand Story

    Industry
    國際貿易推廣與服務產業
    Solution
    客製化年度模組庫、年度色彩系統切換設計、編輯流程與維運效率升級
    Company size and market integration
    國際貿易推廣單位，服務數千家在地中小企業，與國內外產業生態高度連結
    Cooperation period
    2025
    HubSpot Tools Used
    Marketing Hub
    Content Hub
    Services Used
    HubSpot 中文教育訓練
    HubSpot CRM 設置 / 入門
    網站設計與建置
    SEO 技術優化
    Live Site

    作為台灣推動對外貿易的重要官方單位，TAITRA 長期透過展覽、國際合作、活動資訊等內容，協助本地中小企業拓展海外市場。然而，過往製作靜態電子報，不但耗時，也難以因應每年不同主題、不同色系的視覺需求。

    企劃財務處希望能打造一個「具彈性、可延續、可快速維護」的年度亮點資訊平台，讓每年的成果能以更現代、更多元、也更具互動性的方式呈現給全台企業。最終選擇 Hububble 作為合作夥伴，由我們負責從模組設計、架構規劃、HubSpot CMS 開發到全站導入。

    taitra-annual-report-ch-company
    background texture background texture
    Highly recommended strategic B2B partners !!
    It has been an amazing journey working with Hububble. They're not just a service provider to us; they're truly our strategic partners. Over the years, Yvonne and Hsiang have helped our team hit various marketing and business goals. Their work is always top-notch and exactly what we need. They're always there to help us solve any issues that come up, no matter how complex. Highly professional and reliable-l' d definitely recommend them to any B2B team looking for a solid partner.
    taitra-logo-white

    TAITRA｜Tiffany Chien

    testimonial-bg-2
    Paint Points

    客戶目標

    客戶需求

    • 01.

      以網站方式取代傳統電子報，呈現年度重要亮點

    • 01.

      編輯流程必須更簡單、可重複使用

    • 02.

      每年可透過色彩調整，打造獨立的年度視覺風格

    • 02.

      需要大量不同設計的模組，供年度自由挑選與重組

    • 03.

      降低人工維護量，提升內容更新效率

    • 03.

      將靜態電子報升級為線上互動型網站，提升讀者瀏覽體驗

    客戶目標

    • 01.

      以網站方式取代傳統電子報，呈現年度重要亮點

    • 02.

      每年可透過色彩調整，打造獨立的年度視覺風格

    • 03.

      降低人工維護量，提升內容更新效率

    客戶需求

    • 01.

      編輯流程必須更簡單、可重複使用

    • 02.

      需要大量不同設計的模組，供年度自由挑選與重組

    • 03.

      將靜態電子報升級為線上互動型網站，提升讀者瀏覽體驗

    Identifying the problem

    識別問題

    在導入 HubSpot 之前，TAITRA 長期仰賴其他工具製作電子報。雖然視覺精緻，但一旦內容或圖片需要修改，往往必須回頭重新輸出整份電子報，導致每一次修改都需要重新排版。製作一份完整年度電子報甚至需要 2 到 3 個月的時間，流程冗長且無法複製使用，對內部協作造成極大負擔。

    由於電子報是年度重點資訊，每一年都會有不同企劃方向，因此 TAITRA 對模組的多元性提出高度需求。他們擔心若模組數量不足，網站風格容易受限，導致不同年度的內容長得太相似，也無法符合不同主題想呈現的特色。這是過往 Adobe 格式無法做到的彈性。

    在色彩運用上，TAITRA 也提出希望「每一年都像一本全新的品牌手冊」，但又不希望重新開發整個網站。因此需要一組具彈性但又能快速替換的色彩系統，讓年度主題得以明確區隔。

    此外，電子報內容多為圖文搭配、外部連結眾多，若使用制式網頁排版，無法有效呈現資訊層次，也可能使網站互動性不足。TAITRA 希望網站能比電子報更加生動，並能透過視覺引導讓企業更快速理解當年度成果。

    case-challenge

    Scope of works

    服務概覽

    HubSpot

    HubSpot 中文導入教學

    • HubSpot CMS 入門教育、操作教學
    • 管理權限設定與資料架構規劃
    • 後台內容維護流程導入
    HubSpot

    HubSpot CRM 設置 / 入門

    • Marketing Hub 與 CMS Hub 介面整合
    • 後台資產管理框架設定（檔案、模組、主題）
    • 協作帳號與審稿流程安排
    Website Design & Development

    網站策略規劃與應用

    • 依年度網站目的重新規劃 Sitemap 與內容結構
    • 全站自適應 RWD 介面設計與前端切版
    • 開發可重複使用的 HubSpot 自訂模組
    Website Design & Development

    SEO 技術優化

    • 基礎頁面權重設定（Metadata、OG、結構化）
    • URL 與頁面階層管理
    • 圖片體積壓縮與載入優化
    Website Design & Development

    網站設計

    • 依年度主題統整網站視覺，打造一致且可延伸的品牌風格
    • 設計 RWD 響應式介面，確保桌機、平板、手機皆有最佳瀏覽體驗
    • 製作多組具互動感的視覺元件（如交疊卡片、圖文模組、分隔設計），提升可讀性與瀏覽動線
    Our Solution

    解決方案

    客製化年度模組庫

    我們為 TAITRA 設計了一套完整的年度模組庫，包含交疊卡片、分隔版面、卡片互動效果等多種圖文排版，讓團隊能依照每年不同的主題自由組合，避免內容呈現過於制式或同質化。所有模組都支援後台直接編輯，讓使用者能快速替換文字與圖片，大幅降低每年重新製作的負擔。

    年度色彩系統切換設計

    為了讓 TAITRA 能因應每年的主題變化，我們規劃了一套可快速切換的年度色系，並透過 CMS 設定全局色彩變數，使色彩管理更加直覺與有效率。每年只需更新色彩設定，就能打造截然不同的年度視覺風格，免去重新開發網站的麻煩，同時保持一致的設計基礎。

    編輯流程與維運效率升級

    我們將 TAITRA 過去需花 2–3 個月才能完成的電子報製作流程全面改造，讓內容能直接在後台快速產生，並透過模組化設計自動化繁瑣的排版與調整工作。搭配 HubSpot 的審稿機制、版本控管與模組重複利用功能，內部協作效率大幅提升，後續維運也變得更加輕鬆順暢。

    Metrics

    0

    網站停留率上升

    0

    整體流量年增

    網站重塑

    TAITRA 過去製作年度電子報，不僅耗時，也無法應付每年不同主題的視覺需求。在導入 HubSpot 與 Hububble 的客製化模組後，TAITRA 不但能透過後台快速更新內容，也能利用模組化的彈性在未來持續擴充網站。

    taitra-annual-report-ch-before-after

    總結

    兼具視覺創意與數位維運的高效率轉型

    TAITRA 過去製作年度電子報，不僅耗時，也無法應付每年不同主題的視覺需求。在導入 HubSpot 與 Hububble 的客製化模組後，TAITRA 不但能透過後台快速更新內容，也能利用模組化的彈性在未來持續擴充網站。

    模組化架構讓整體網站的維護流程更輕鬆，內部協作也變得更加順暢。透過可替換的色彩系統，TAITRA 每年都能打造獨立的年度風格，兼具設計變化與長期維運的穩定性。

    Hububble 從設計、開發到系統導入全程協助 TAITRA 優化流程，不僅解決了多年來編輯電子報的痛點，也協助他們建立更高效率、更具延展性的內容平台。

    這個專案不僅提升了 TAITRA 的對外展示品質，也為未來的年度亮點網站奠定標準化、可持續擴充的基礎。taitra-annual-report-ch-cms

    影響與未來展望

    HubSpot 系統目前已完全融入 TAITRA 的年度營運內容中，網站維護方式更快速，也更適合跨部門協作。未來 TAITRA 也預計每年更新網站色系，並依據當年度的核心重點開發更多模組，讓年度亮點網站持續擴展、更加多元。

    這樣的架構也讓 TAITRA 更具內容靈活性，不需重新開發網站，即可因應不同活動與年度主題。網站已成為他們溝通成果的重要平台，也為機構內更多數位化專案奠定基礎。

    Hububble 也將持續協助 TAITRA 在未來的年度規劃中，讓網站能保持最佳效能與延展性。

    Website Design
    taitra-annual-report-ch-1
    taitra-annual-report-ch-2
    taitra-annual-report-ch-3
    taitra-annual-report-ch-4
    taitra-annual-report-ch-5
    taitra-annual-report-ch-6

    Credit

    Project Manager /

    Chloe C. chloe-chen-illu

    Designer /

    Fish H. fish-illu

    Developer /

    Karun

    Special Thanks /

    TAITRA