聯絡我們

中國信託｜官網首頁改版設計

YEAR

2024

SERVICES

金融應用
企業形象網站

果思設計協助中國信託銀行改善官網首頁過去資訊堆疊、跨產品部門版位難以協調、品牌體驗與營運規範不足等問題。透過競品分析、需求訪談、首頁 Story Line、UIUX 設計、前端切版、通用行銷版型與上稿規範，果思整合 8 大產品部門需求，建立可延伸至全平台的 Design System，並將 RWD、SEO 與無障礙 A 級規範納入首頁改版基礎。

PROJECT OVERVIEW

專案背景

讓金融官網首頁，從資訊入口升級為品牌數位觸點

中國信託希望讓官網首頁從資訊堆疊的入口，升級為承載品牌、產品營運與多裝置體驗的核心數位觸點。首頁需同時回應「Banking my way」品牌精神、8 大產品部門的活動曝光需求，以及 RWD、SEO 與無障礙 A 級規範。因此本案重新梳理首頁資訊架構、行銷模組與前端切版基礎，支援長期營運。

果思的角色

UX 研究
UIUX 設計
產品策略
前端切版
規範制定
AEM 整合

ACHIEVEMENT

專案成果

統整品牌、產品與導引，打造可營運的金融官網首頁

果思以「品牌 × 產品 × 功能導引」三層價值重新規劃中國信託官網首頁。上層承接「Banking my way」品牌精神，強化首頁第一眼的金融服務形象；中層規劃可供 8 大產品部門共用的行銷版型與活動模組，讓不同產品線能在同一套架構下協調露出；下層則聚焦功能入口、服務導引與資訊搜尋，協助使用者更快找到需要的金融服務。技術落地上，果思完成 UIUX 設計與前端切版，並在規格中納入 RWD、SEO 友善欄位、無障礙 A 級規範與 AEM 內容管理系統框架，讓首頁不只完成改版，也具備後續維護與擴充基礎。

部門整合
大
產品部門

CHALLENGE

挑戰

如何整合 8 大產品部門需求，讓首頁成為可長期營運的版位系統？

中信官網首頁同時承載信用卡、存款、貸款、投資、保險等產品部門的行銷需求，各單位都有自己的活動節奏與曝光期待。果思透過需求訪談與彙整，將不同部門的內容需求轉化為通用行銷版型、產品卡片與上稿規則，讓首頁不再依賴一次性客製，而能以同一套架構協調版位資源並支援長期營運。

如何在品牌視覺、產品曝光與使用者導引之間取得平衡？

首頁既要傳達「Banking my way」的品牌精神，也要提供活動曝光與金融服務入口，若版位過多，容易再次變成資訊堆疊。果思將首頁拆解為品牌形象、行銷模組與功能導引三層結構，透過 Story Line 與資訊層級規劃，讓品牌溝通、產品轉換與使用者找服務的需求能在同一頁中取得平衡。

如何讓設計成果能對應 AEM 後台、SEO 與無障礙規範？

中信官網沿用 AEM 作為內容管理系統，因此首頁設計不能只考慮視覺表現，也要符合既有元件架構、欄位設定與營運人員上稿邏輯。果思在 UX/UI 與前端切版階段即與技術團隊對齊 AEM 框架，並將 RWD、SEO 標籤與無障礙 A 級檢核納入規格，降低後續整合與維運成本。

BRAND STRATEGY

視覺策略-品牌導入

以 Banking my way 延伸首頁品牌體驗

中國信託希望官網首頁不只是產品與活動列表，而能承接「Banking my way」所強調的自主、直覺與有溫度的金融服務體驗。果思透過首頁 Story Line、視覺層級與導覽結構設計，讓品牌精神能在第一眼形象、服務入口與金融產品導引中被具體感受。

以 Design System 統一跨部門視覺與上稿規範

面對 8 大產品部門共同使用首頁版位的情境，若缺乏設計規範，容易造成視覺風格與內容呈現不一致。果思建立可延伸至全平台的 Design System，並規劃通用行銷版型與上稿規則，協助中信內部在不同產品與活動露出時仍維持一致的品牌辨識。

以合規與技術框架支撐品牌長期營運

金融官網需同時考量 SEO、RWD、無障礙與內容管理系統整合。果思在設計與前端切版階段即將 AEM 框架、SEO 友善欄位與無障礙 A 級規範納入交付基礎，讓品牌體驗不只停留在視覺表現，也能被後續營運、維護與擴充持續支撐。

了解更多作品

VIEW ALL

中國信託｜官網首頁改版設計

PROJECT OVERVIEW

專案背景

讓金融官網首頁，從資訊入口升級為品牌數位觸點

果思的角色

UX 研究

UIUX 設計

產品策略

前端切版

規範制定

AEM 整合