國泰公文平台

整合多事業體使用情境
賦予國泰公文全新直覺操作體驗

專案角色

UI 設計師

執行時間

2019.12 —— 2020.05（ 6 個月）

平台

Web（含 RWD 設計）

專案背景

國泰集團的不同事業體（人壽 / 產險 / 金控 / 銀行）先前各有獨立的公文審批系統，因程式未互相串連而經常導致同仁重工，國泰期望整合各部門系統和需求，建置「一站式公文平台」，同仁只需要學習單一介面就能完成審批流程。此外也加入響應式網頁設計，在平板和手機上也能查詢及創建公文，獲得更加有彈性的使用情境。

設計策略

初步瞭解國泰舊有的公文系統介面、流程、相關專有名詞後，我們歸納出三個對使用者體驗影響重大的問題，並制定此次專案的設計策略，設計俐落直覺的表單填寫及文件查詢等流程，提升同仁們的工作效率：

使用者故事地圖

為了釐清不同角色與事業體對於功能權重的認知，我們針對「首頁、創建公文、公文處理、權限設定」等主要流程進行三場使用者需求訪談（瞭解各事業體功能使用情境差異）和四場工作坊（盤點各功能權重）。工作坊參與人員使用點數貼紙將功能的優先次級劃分為：Must Have、Nice to Have，並提出未被列出的新需求，最後將需求一併歸納整理至 User Story Map。

* 以下以公文處理列表和公文處理為例

易用性測試

進入到 Wireframe 設計的階段，我們會依據重點功能頁面設計測試任務，前往國泰執行易用性測試，測試者涵蓋創建公文頻率一週三次以上的各事業體同仁和主管，運用放聲思考法瞭解操作時的疑惑和想法，作為動線和視覺優化的依據。

* 測試腳本與紀錄文件截圖經模糊處理

視覺原則

由於產品的本質為「工作操作系統」，視覺設計在此次專案扮演「幫助使用者快速找到目標功能」的角色，並提取國泰綠色為基底帶入品牌意象，形塑乾淨清爽的空間氛圍，減少處理公文時產生的繁雜感。

公文處理列表

登入國泰公文平台後，同仁們可以直接看到公文列表並處理公文，點選右上方個人選單，即能在每個頁面都隨時查看目前代理角色和待辦件數等資訊。在列表上，透過切換不同的 Tab 和帶有顏色的標籤，能夠篩選特定的處理狀態，方便同仁作業。整體視覺則採用帶有較大圓角的邊框做為系統基本架構，避免過度生硬的感受。

創建公文

我們依據不同公文內容性質將欄位分群為四類模組——基本資料欄位、涉及採購的交易模組、各事業體客製化項目、對內或對外發文。進入到創建公文時，使用者就會看到預設的基本模組，並以卡片式設計幫助同仁清楚辨別不同模組，另外也在模組標題前方加入帶有底色的 icon 引導同仁瀏覽視線。

針對各類型模組，我們給予不同顏色主題，在編輯公文時即能辨別是否為特殊欄位。即使每個模組的欄位內容各異，也能透過相似的操作元件降低學習成本！

公文處理

公文順利被發布後，同仁們可以在公文處理頁面瀏覽公文、對公文進行編輯和下載等操作，我們也設計了「下滑到公文處理區」按鈕，方便同仁快速執行該角色可以進行的動作。除了將易混淆的文案統一並優化（例：不易理解的『審評』改為『搜集部門內部意見』），更簡化了部分繁複流程（例：原先『退文』需要層層往前退回，改為『退回任一流程』後可以直接將公文退回到特定同仁，重新開始流程）。

由於公文有多種處理狀態（待處理 / 已處理 / 知後會⋯⋯等），以及多種執行動作（簽核 / 提供意見 / 承辦⋯⋯等），我們以不同的狀態列顏色做區分，讓同仁進入到畫面的第一眼，即先對公文目前狀態有初步概念。

紙本公文同步更新

經過國泰核心團隊多次討論與回饋後，我們順利取得董事長的同意！成功將舊有的紙本公文格式與改版的電子化公文統一規範，讓線上與線下的公文處理體驗趨近一致。

響應式網頁

為了讓同仁們使用平板和手機時，也能獲得和電腦同樣舒適的閱讀體驗，我們選擇將部份次要的表格欄位隱藏，讓畫面留下最關鍵的資訊，而原本在電腦上展開的功能列、或需要透過 Hover 觸發的行為，則轉化為點擊後展開的多功能選單。

下一個作品

OWI 長者照護平台