UI/UX DESIGN / SYSTEM DESIGN 14 / 15

← BACK TO PROJECTS

UI/UX Design / System Design / CASE STUDY

金融業｜商店自動化進件平台｜2023

商店自動化進件平台為企業商店申請流程所設計的數位進件系統，從驗證、案件狀態、營業類別選擇、申請需求、資料填寫，到簽約文件下載與上傳，完整規劃使用者操作流程與介面體驗。

UI/UX Design System Design Template Component Library RWD UI Coding

UX SERVICE PLANNING

UI SYSTEM DESIGN

RWD RESPONSIVE INTERFACE

01 OVERVIEW

PROJECT OVERVIEW

重新整理商店進件流程，
建立一致且清晰的系統體驗。

本案以商店進件流程為核心，重新整理系統資訊架構與操作流程，建立一致性的視覺與 UI/UX 設計規範，讓複雜的申請流程更容易理解與操作。

執行內容涵蓋整體視覺規劃、UI/UX 規劃、介面設計規範、Template、元件庫、框架設計與 UI 切版，建立可延伸至不同功能頁面的系統化設計基礎。

Project Type｜UI/UX Design · System Design

Design Stage｜系統規範建立・UI/UX 優化

Project Year｜2023

02 CHALLENGE

DESIGN CHALLENGE

面對多步驟進件流程，
如何讓操作更清楚、更容易完成？

商店進件流程包含多個步驟與大量資料填寫，並涉及 OTP 驗證、條款確認、文件下載／上傳及案件狀態等不同情境。

不同操作階段具有不同的資訊需求與操作任務，如果缺乏一致的介面規則，使用者容易在填寫、確認或文件處理過程中產生理解負擔。

因此，本案的核心挑戰，是將複雜的進件流程重新拆解，建立清楚的資訊層級與操作邏輯，同時透過一致性的 UI 規範，降低使用者在整個申請流程中的理解成本與錯誤率。

01 Multi-Step Process

進件流程包含多個階段，需要建立清楚的流程與資訊層級。

02 Complex Information

涉及商店資料、申請需求、條款及文件等大量資訊。

03 OTP Verification

需要處理動態密碼驗證、重新取得及驗證失敗等情境。

04 Document Management

涉及簽約文件下載、上傳及相關操作狀態。

05 Consistent UI

建立一致的元件、互動與視覺規範，提升整體系統體驗。

03 SOLUTION

DESIGN SOLUTION

從流程與介面架構出發，
建立完整的系統 UI/UX 規範。

以商店進件流程為核心，從使用者流程、資訊架構與操作情境出發，重新整理系統介面與功能層級。透過一致的 Layout、色彩、圖示、表單、按鈕與互動狀態規範，建立可延伸的 Template 與元件庫，讓不同功能頁面維持一致的操作邏輯與視覺體驗。

SYSTEM PLANNING

建立系統介面架構

整理整體 Layout、選單、資訊層級、色彩與圖示規範，建立一致性的系統視覺基礎。

UX FLOW

規劃商店進件 UI/UX

以商店進件流程為核心，重新整理系統資訊架構與操作流程，建立一致性的視覺與 UI/UX 設計規範，讓複雜的申請流程更容易理解與操作。

UI SYSTEM

建立元件與介面規範

建立 Template、共用元件、框架與互動狀態，並完成各頁面 UI 切版，提供系統開發團隊進行整合。

04 KEY FEATURES

DESIGN SPECIFICATION

從進件流程到介面規範，
建立完整且一致的系統體驗。

透過 UI/UX 規劃、系統設計、Template、元件庫與 RWD 響應式設計，將複雜的商店申請流程轉化為清楚、具邏輯性的數位操作體驗。

DESIGN COVERAGE

SYSTEM ARCHITECTURE → UX FLOW → INFORMATION ARCHITECTURE → UI DESIGN → TEMPLATE → COMPONENT LIBRARY → INTERACTION STATE → RWD → UI CODING

2023｜商店自動化進件平台

整體視覺規劃、UI/UX 規劃、介面設計規範、Template、元件庫、框架設計、UI 切版。

以商店進件流程為核心，規劃 OTP 驗證、案件狀態、營業類別、申請需求、資料填寫、條款確認與簽約文件等主要操作情境。

OTP VERIFICATION｜OTP 驗證

規劃簡訊動態密碼驗證、重新取得驗證碼及驗證失敗等操作情境。

APPLICATION FLOW｜申請流程設計

將商店進件拆解為清楚的階段式流程，降低一次呈現大量資訊造成的操作負擔。

DATA INPUT｜資料填寫與確認

規劃商店資料、申請需求、特約條款及確認頁面，提升資料填寫與確認的清晰度。

DOCUMENT MANAGEMENT｜文件管理

設計簽約文件下載、文件上傳及相關操作狀態，建立清楚的文件處理流程。

SYSTEM STATUS｜系統狀態設計

完整規劃系統訊息、錯誤訊息、401 無檢附、Loading 等情境，建立一致的操作回饋。

UI FRAMEWORK｜介面框架設計

建立共用頁面框架與版型規範，統一不同功能頁面的資訊呈現與操作邏輯。

COMPONENT LIBRARY｜元件庫

建立 Button、Input、Dropdown、Radio、Checkbox、Date Picker、File Upload 等共用元件。

INTERACTION STATE｜互動狀態

規劃按鈕、表單、彈窗、訊息、錯誤、Loading 等不同操作狀態，建立一致的互動規則。

RWD｜響應式設計

依不同裝置調整版面、資訊層級與操作方式，確保不同螢幕尺寸下的使用體驗。

UI CODING｜前端 UI 製作

完成各頁面介面切版與視覺呈現，提供系統開發團隊進行後續整合。

05 OUTCOME

PROJECT OUTCOME

建立一致的進件體驗，
讓複雜流程變得更清楚、更容易操作。

Clear Application Flow｜將複雜的商店進件流程拆解為清楚的階段式操作 Consistent UI System｜建立一致性的 Layout、色彩、圖示與介面規範 Component Library｜建立共用元件與互動狀態，提升介面一致性 Responsive Design｜透過 RWD 支援不同裝置與螢幕尺寸 Template Design｜建立可延伸的頁面 Template 與介面框架 UX Optimization｜重新整理資訊架構與操作流程，降低使用理解成本 UI Design｜完成商店進件平台整體介面與視覺設計 UI Coding｜完成前端介面切版，供系統開發團隊進行整合

PROJECT ROLE

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

← BACK TO PROJECTS

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

金融業｜商店自動化進件平台｜2023

重新整理商店進件流程， 建立一致且清晰的系統體驗。

面對多步驟進件流程， 如何讓操作更清楚、更容易完成？

從流程與介面架構出發， 建立完整的系統 UI/UX 規範。