UI/UX DESIGN / VISUAL DESIGN

Visual Design・UX Optimization・UI Design・RWD

土地銀行｜
數位存款線上開戶系統UI/UX設計｜2021

針對土地銀行既有數位存款線上開戶系統進行整體介面優化，從文字、色彩、視覺風格、版面與 UI/UX 重新規劃，重新思考傳統金融系統的數位介面呈現方式。在延續銀行品牌識別的基礎上，跳脫既有系統較為制式的視覺風格，重新建立更具現代感與數位感的首頁視覺與介面語言，並將此風格延伸至完整線上開戶流程。

Visual Design UX Optimization UI Design Service Flow State Design RWD

UX OPTIMIZATION

UI VISUAL DESIGN

RWD RESPONSIVE DESIGN

01 OVERVIEW

PROJECT OVERVIEW

跳脫傳統金融系統，
重新定義數位開戶體驗。

針對土地銀行既有數位存款線上開戶系統進行整體介面優化，從文字、色彩、視覺風格、版面與 UI/UX 重新規劃，重新思考傳統金融系統的數位介面呈現方式。

在延續銀行品牌識別的基礎上，跳脫土地銀行既有系統較為制式的視覺風格，重新建立更具現代感與數位感的首頁視覺與介面語言，並將此風格延伸至完整線上開戶流程。

從首頁開始建立新的設計方向，再延伸至線上開戶、身分驗證、OTP、證件補傳、開戶查詢與金融卡啟用等服務流程，形成完整且一致的數位服務體驗。

PROJECT TYPE｜ UI/UX Design

DESIGN STAGE｜ Visual Design・UX Optimization・UI Design・RWD

PROJECT YEAR｜ 2021

EXECUTION｜使用者體驗研究與介面優化・UX Flow・UI Design・Interface Planning

02 CHALLENGE

DESIGN CHALLENGE

在銀行品牌規範與視覺創新之間，
重新探索數位服務體驗。

金融服務介面需要具備可信賴、清楚與穩定的特性，但既有銀行系統往往具有較為制式的視覺呈現。

本案的挑戰並非單純調整視覺，而是在銀行品牌識別與既有服務架構之下，重新探索更符合現代數位使用情境的設計方向。

同時需要將多階段開戶流程、身分驗證、OTP、證件上傳與檢核等複雜操作，轉化為清楚且容易理解的服務體驗。

01 VISUAL DIRECTION

在維持銀行專業與可信賴感的前提下，跳脫原有制式介面風格。

02 COMPLEX FLOW

將多階段開戶流程轉化為清楚且容易理解的操作體驗。

03 VISUAL & FUNCTION

首頁需要兼顧視覺吸引力與服務資訊的清楚呈現。

04 RESPONSIVE

重新規劃 Desktop、Tablet、Mobile 不同裝置的版型與操作體驗。

05 SERVICE CONSISTENCY

從開戶到補件、查詢及金融卡啟用，維持一致的服務介面語言。

03 SOLUTION

DESIGN SOLUTION

以視覺突破為起點，
延伸至完整服務流程。

從數位存款整體視覺方向重新定義開始，延伸至首頁、線上開戶、身分驗證、補件、開戶查詢與金融卡啟用等服務流程，建立完整且一致的數位服務體驗。

VISUAL DIRECTION

重新定義視覺方向

從色彩、文字、版面與主視覺建立新的介面語言，在維持金融品牌專業度的同時，降低傳統金融系統的制式感。

HOMEPAGE

首頁視覺與版型

以新的視覺風格重新規劃首頁主視覺、功能資訊層級與版面架構，並兼顧 Desktop、Tablet、Mobile 情境。

ACCOUNT OPENING

線上開戶流程

將基本資料、戶數檢核、身分驗證、OTP、證件上傳、資料檢核至開戶成功等流程重新整理。

VERIFICATION

身分驗證設計

規劃晶片金融卡、一代／二代讀卡機、自然人憑證、個人網路銀行及 OTP 等不同驗證情境與狀態。

EXTENDED SERVICES

延伸金融服務

延伸規劃證件補傳、線上開戶查詢與金融卡啟用等服務，維持一致的操作邏輯與視覺體驗。

04 RESULT

DESIGN RESULT

從「銀行系統」走向「數位服務」，
建立新的金融服務視覺方向。

本案最具代表性的設計價值，在於重新思考土地銀行數位服務的視覺表現方式，不以傳統金融系統常見的制式介面作為唯一框架，而是從數位使用者的視角重新建立視覺與互動體驗。

VISUAL DESIGN｜視覺設計

建立新的色彩、文字、版面與主視覺方向，重新定義數位存款的整體視覺風格。

UX OPTIMIZATION｜體驗優化

重新檢視既有開戶流程，整理資訊層級與操作步驟，建立清楚的服務流程。

INTERACTION｜互動設計

針對驗證、錯誤、檢核、補件與完成等狀態建立清楚的操作回饋。

RESPONSIVE｜響應式設計

依照 Desktop、Tablet、Mobile 不同情境重新規劃版型。

DESIGN RECOGNITION｜設計肯定

新的視覺方向獲得土地銀行長官高度肯定，成為本案重要的設計成果之一。

SERVICE EXPERIENCE｜服務體驗

從線上開戶延伸至補件、查詢與金融卡啟用，建立一致的數位服務體驗。

05 SERVICES

PROJECT SERVICES

從視覺設計、UX 優化
到完整金融服務流程規劃。

Visual Design｜數位存款整體視覺風格與主視覺設計 UX Optimization｜既有系統操作流程與使用體驗優化 UI Design｜首頁及完整開戶服務介面設計 Service Flow｜開戶、補件、查詢、金融卡啟用流程規劃 State Design｜驗證、錯誤、檢核、成功等多元狀態設計 Responsive Design｜Desktop・Tablet・Mobile RWD 規劃 Design Direction｜突破既有金融系統風格，建立新的數位服務視覺方向

PROJECT ROLE

亞米負責整體視覺規劃、UI/UX 規劃、介面設計規範、Template、元件庫、框架設計、UI 切版，透過完整的 Design Specification 與 Component Library，協助開發團隊將設計成果落實於實際系統。

← BACK TO PROJECTS

品牌素材說明｜**本案 LOGO、吉祥物及品牌識別素材由客戶提供，本案負責網站視覺、UI/UX 規劃與數位應用呈現；相關智慧財產權歸原權利人所有。 UI/UX DESIGN / VISUAL DESIGN

土地銀行｜ 數位存款線上開戶系統UI/UX設計 ｜2021

跳脫傳統金融系統， 重新定義數位開戶體驗。

在銀行品牌規範與視覺創新之間， 重新探索數位服務體驗。

以視覺突破為起點， 延伸至完整服務流程。