top of page
img_banner_entie.png

InfoPower Corp

安泰銀行數位金融服務平台

提供更方便快捷之數位金融服務

Duration
3 Months
Rule
UI/UX Designer,Interaction Designer
Scope
資訊架構規劃、功能討論、設計完稿、工程交付
Team
Infopower
┃Backgroud

安泰商業銀行為提升服務品質與加強市場競爭力，提供客戶更多元數位化服務，將銀行官網和網路銀行整合，規劃使用者介面的更新及部分功能新增調整。

┃Challenges and Objectives

  • 需思考網路銀行的交易流程及各種不同交易結果和操作反饋，做介面的歸納整理。

  • 使用者介面設計須注意 RWD 及中英介面切換的 UI調整。

  • 每一頁面皆可在三個點擊內到達，讓使用者容易回到首頁及連結各網頁。

開始規劃設計前瀏覽近 50 家純網銀及實體銀行的網站，蒐集分析設計元素風格、動態互動設計、網站動線規劃等，整理出共通性及特別處。

┃Banking Website Design Trends
img_entie_trends.png
┃Survey Results Analysis

由行銷部門規劃之問卷調查 (回收份數共計54人) ，針對實體銀行官網及網路銀行的線上操作習慣 、使用動機等分析結果排序。以下擷取六張主要作為介面設計參考依據之問卷調查結果分析圖表。

1. 您網路銀行通常使用的裝置是 ?

2. 您使用網路銀行的主要因素是什麼？（請選擇3項因素）

img_entie_chart1.png

  1. 手機 

  2. 桌上電腦

  3. 平板

  4. 筆電 

img_entie_chart2.png

  1. 能即時查詢帳戶餘額

  2. 能即時轉/入帳

  3. 能即時得知信用卡消費明細及未繳款項

  4. 結合支付功能的應用 

  5. 能自行到線上辦理所需業務（如申辦信用卡、購買基金、申請掛失）

3. 您最常使用的網路銀行功能有以下哪些？（至多選5項）

img_entie_chart4.png

  1. 轉帳

  2. 繳費 + 信用卡繳費

  3. 帳戶查詢

  4. 交易明細查詢 

  5. 提款

4. 您在銀行官方網站最常瀏覽以下哪些資訊？（至多選5項）

img_entie_chart3.png

  1. 轉帳 

  2. 繳費 + 信用卡繳費

  3. 匯率查詢 

  4. 存款 

  5. 獲知銀行最新訊息與優惠

5. 您每次瀏覽銀行官方網站的時間多長？

img_entie_chart5.png

  1.  5-15分鐘

  2.  3-5分鐘

  3.  1-3分鐘

  4.  15-30分鐘

  5.  30分鐘-1小時

6. 您期待您往來的銀行之網銀服務應增加？（請選擇3項因素）

img_entie_chart6.png

  1. 快速登入 

  2. 整合行動支付

  3. 提供交易分析圖表(當期與歷史交易分析）

  4. 帳單支付排程 

  5. 投資停利/停損/到價自動通知

分析結果 : 

  1. 大部分使用者的操作介面為手機 → 介面的設計和流程需特別考量，以適合利用手機(小螢幕)瀏覽和操作的方式呈現。

  2. 最常瀏覽官網資訊和最常使用的網路銀行功能，相關重複率高 (前5名中重複3項，包含轉帳、信用卡相關、存款帳務相關) → 整合官網及網銀，讓使用者方便在查詢資料及功能操作間切換。

  3. 8成使用者單次使用網站時間為15分鐘以內 → 透過設計讓使用者在願意花費的短暫時間內，快速找到資訊頁面或功能操作項目，有效率地達成目標。

img_entie_devide1.png
┃Competitive Comparison

以問卷調查結果中網路銀行最常使用的功能為基礎，比較國內多家網路銀行相關功能之介面呈現及操作方式。

國內銀行網站比較-網銀頁面

img_entie_com1@2x.png
┃UI Flow 

整理網路銀行所有功能流程頁面列表，以理解整體功能架構。統整功能操作相似的畫面，在設計介面時方便作版面樣式的管理搭配。

img_entie_uiflow.png
┃Wireflow

將網路銀行最常使用的功能歸納分為三大主要流程，分別在繪製 Wireframe 的階段搭配 Flow Chart 確認頁面規劃有符合到各種使用情境，同時也來回交叉調整 UI Flow 是否有遺漏，確保流程順暢且功能介面完整。

Web 版(點擊放大)

Phone 版(點擊放大)

一、 轉帳

Web 版(點擊放大)

Phone 版(點擊放大)

img_wireflow_transfer web.png
img_wireflow_transfer phone.png
img_wireflow_statement web.png
img_wireflow_statement phone.png
img_wireflow_pay phone.png
img_wireflow_pay web.png

Web 版(點擊放大)

Phone 版(點擊放大)

二、 信用卡

三、 帳務查詢 / 交易明細查詢 

┃Low-fidelity Prototype 

為測試手機版介面使用流程，利用 Wireframe 製作可操作低保真原型

帳務查詢

轉帳

┃High-fidelity Prototype 

一、 轉帳

  • 在畫面上方列出轉帳流程並標示出進度，讓使用者明確知道目前的操作步驟，增加確定感及信任感。

img_entie_mp1.1.png
img_entie_mp1.3.png
img_entie_mp1.2.png

  • 開啟 Pop up 視窗的按鈕，除了一般常見的文字超連結外，加上 icon 圖示讓畫面不過於單調，也擴大點擊範圍讓按鈕更容易被看見及方便點擊。

  • 資訊欄位以隔行換色方式呈現，且拉大空間，降底使用者大腦認知負荷，處理資訊更容易。

Before

img_entie_mp1.4.png

二、 信用卡

  • 帳單查詢及繳費頁面有信用卡選擇的區塊，設計以卡片圖樣為主的選單形式，因為相較卡片末4碼和卡別名稱，卡片圖樣是使用者更容易記得的資訊。讓使用者要查詢某一張卡片的消費明細或繳費時，可更輕易快速選擇正確的選項。

  • 規劃帳單金額計算式的區塊，清楚列出當期帳單金額的組成，降低因為資訊落差而造成誤會或疑慮的機會。

  • 查詢帳單資訊和繳費常是連續的功能操作，所以在相關頁面 (消費明細 / 未列帳消費明細及費用明細 / 參考可用餘額及最近繳款查詢 / 信用卡繳費) 間加入橫向連結，利用按鈕更快速的切換功能頁面。

img_entie_mp2.1.png
img_entie_mp2.3.png
img_entie_mp2.2.png

Before

img_entie_mp2.4.png

三、 5.1.1 帳務查詢 / 5.1.1.2 交易明細查詢 

  • 將帳戶總覽改為一欄滿版式版面，避免因為每分類子項目數量不一致而雜亂。並利用抽屜式開合讓使用者方便同時查看多個分類的詳細內容。也加上 icon 按鈕連結下層功能頁面。

  • 在查詢帳戶資料時，都會有查詢區間的限制。在送出查詢前要小心計算不能超出規定期間，或是輸入錯誤就全部清空重來，對使用者都是很不友善的操作體驗。所以加上期間快選按鈕，點選就直接帶入對應的期間日期，降低輸入錯誤的機率讓資料搜尋流程更順利。

  • 在帳戶交易資料的呈現上有許多多欄位的表格，用凍結窗格的方式，讓使用者更便利的來回查看對照不同欄位的資料。把針對資料做編輯的功能按鈕整合，讓資訊的呈現更俐落便於使用者操作。

img_entie_mp3.1.png
img_entie_mp3.2.png
img_entie_mp3.3.png

Before

img_entie_mp3.4.png
┃UI Kit

  • 以企業色藍紅為重點主色，搭配兩個低彩度背景主色襯托，讓畫面色彩協調。

  • 以主色藍延伸出三個藍色系加上一個咖啡色為輔色，主要使用於按鈕。

  • 左側快捷功能區以 icon 搭配功能標題，加上 hover 動畫增加畫面豐富度及互動的愉悅感。

  • 依據不同資料量和呈現方式，定義出表格的樣式版型。

img_entie_mockup1.png
img_entie_mockup2.png
img_entie_devide 2.png
┃Competitive Comparison

分析整理銀行網站整體設計趨勢後，比較國內外多家網站之介面呈現及功能操作方式。

國外銀行網站比較-設計面

img_entie_com2@2x.png

國內銀行網站比較-設計面

img_entie_com4@2x.png

國外銀行網站比較-分類面 & 功能面

img_entie_com3@2x.png

國內銀行網站比較-分類面 & 功能面

img_entie_com5@2x.png
┃Site Map

原官網有瀏覽動線複雜、頁面層級混亂、單一頁面同一功能按鈕重複出現等資訊架構上的問題。把網站頁面列出來後，整理資訊的分組，模擬瀏覽動線做層級調整，規劃頁面之間的橫向連結。

img_entie_sitemap.png
┃Landing Page Design Program

依照問卷調查結果及競品分析比較後，定出官網首頁要呈現的資訊內容和功能。在提案階段發展三個版本，從保守的版面配置到較創新的設計呈現。

提案階段 : 

img_entie_landing2.png
img_entie_landing3.png
img_entie_landing1.png

  • Mockup V3 將滿版情境式圖片作為設計主軸，展現企業形象，功能統整於單一大區塊，切換操作創造較多留白空間，簡化區塊數量降低複雜度。

img_entie_landing5.png
img_entie_landing4.png

  • 初版 Wireframe

  • 由初版 Wireframe 發展 Mockup V1 為較保守的版型，以卡片式設計為主。將常用功能整合為側邊欄，常駐於畫面右方，可及時點擊操作。

  • Mockup V2 參考設計趨勢大區塊分類，將卡片式設計調整為滿版區塊，每一區塊間有比例變化，和多元的微動畫互動方式。

Final Version : 

  • 依客戶選擇 Mockup V3 再進一步做調整。將常用功能整合為側邊欄，大區塊呈現重要資訊讓操作更直覺簡易，也讓使用者在短時間瀏覽下可獲取較多資訊。

img_entie_landing7.png
img_entie_landing8.png
img_entie_landing9.png
┃Ｗireframe

把400多頁的官網內頁依照資訊內容所需且合適的呈現方式 (純文字、表格、條例式、卡片式、輸入框等) ，依照元素設計版型的分類再個別繪製 Wiewframe。

img_entie_wireframe.png
┃UI Kit

  • 以企業色藍紅為重點主色，搭配兩個低彩度背景主色襯托，讓畫面色彩協調。

  • 以主色藍延伸出輔色，主要使用於按鈕、sidebar。

  • 多利用 icon 搭配文字標題，幫助使用者更容易聯想以理解文字內容，也降低文字過多的無趣和生硬感。

Ui kit 2.png
┃Mockup
img_entie_mockup3.png
img_entie_mockup4.png
┃Reflection

  1. 面對金融產業的專案，在設計前期做了更多資料蒐集、案例分析。也嘗試拆解自己平常使用的金融數位介面流程，將過去習慣的操作都進一步思考，分析比較。專案過程中也因此學習一些金融相關 know how。

  2. ​官方網站包含的操作介面數量很多，所以用元素模組化搭配版型分類的方式來規劃設計頁面，可以節省設計上重複繪製的時間，但需要和工程師更密切溝通才能避免對於畫面設計認知上的誤差。

  3. 在專案中我主要負責網銀的介面設計，比起官網著重在版型和畫面元素的統整。更重視的是頁面之間流程的串接，和同一頁面不同狀態的呈現 (例如空白狀態、極限狀態、錯誤狀態等)。基於客戶的需求在流程上不會有太大變動，但也嘗試加入一些小巧思，創造更好的使用者體驗。

bottom of page