背景

國泰集團各部門同仁經常需查找內外部數據；而反覆查找相同數據、或於分散來源之間比對資料實在相當麻煩瑣碎，故主要在推動集團數位轉型的「數數發中心」向版塊設計詢案，打算一同建立彙整所有數據、供國泰內部使用的資料平台。

過程

Step 1. 需求對焦

客戶提出兩點核心需求：視覺白底乾淨＆功能導向；而我們根據這兩點，在規劃階段給出更明確的執行手法。
「白底乾淨」不見得僅意指使用白色作為背景色，將共識調整為「淺色」，可保留未來設計時更多發揮空間；留白多也是營造乾淨感的要素之一，且呼應網站的定位，我們預期該做法能夠提供舒適的閱讀體驗。
「功能導向」方面，該網站包含許多專有名詞，不見得是每位 TA 都熟悉的領域，故雙方都同意需至少進行基本的易用性測試，確保開發完成的平台確實能夠對國泰內部同仁產生益處。

Step 2. Sitemap / Wireframe / Reference

有了上述的共識後，接著由 PM （專案經理）進行 Sitemap、Wireframe 繪製與釐清需求和資訊配置，而設計師則同時負責查找適合的風格 Reference 給客戶參考。

（一般來說，這個階段會由主設計師與PM配合進行，但正好時程上與其他提案重疊，故當時 UX 設計師先協助處理，我直到初步設計階段才重返該案。）

Wireframe 完成後即進行第一次易用性測試，確保最基礎的 User Flow 正確無誤。
（易用性測試過程將於Step. 4 正式易用性測試介紹）

Step 3-1. 設計概念

將單一 Logo 發展為 Pattern，打造美觀與功能兼具的資料庫

客戶提供的素材只有一顆 Logo，我們觀察此圖型的幾何特徵，從其中延伸出雲狀圖形、貫穿各頁面，呼應此平台作為雲端資料庫的定位；整體選用乾淨沈穩的藍綠色調，營造不刺眼、適合長時間瀏覽的視覺。

Step 3-2. 設計思考原則

首頁

結合 Dashboard 特徵，將重要資訊並陳於首頁

我們選擇將所有頁面以及回報功能一併羅列在左側導覽列，一眼即可掌握整個網站的架構；在捲動瀏覽右側資訊時，此導覽列會懸浮在畫面上，使用者可隨時依喜好切換目的地。
首頁第一屏也提供了全站模糊搜尋的功能，對於已多次造訪該站、明確清楚自己需求的使用者而言，可省去重複點擊的功夫。

大卡片凸顯重要資訊

右側除搜尋欄外，主要分為三大區塊：原始公開資料專區、商業加值變數專區以及公告區。
前兩者作為本站最重要的資訊，我們選擇用相對面積大、帶有友善圓角特徵的卡片來包裝，加上與環境相比顯得較為濃重的色彩，吸引使用者的視線。標題右方有「專區簡介」按鈕，指引首次來訪的使用者理解該專區的用途；按鈕的擺放位置在 Z 字動線的第一道轉折處，足夠顯眼，但預想到在使用者多次造訪、已熟悉該站後，此按鈕頻率將驟降，故在樣式上選擇份量小於色塊的底線、稍微減弱其存在感。

公告區作為首頁的次要資訊，則採用較單純的文字列表，與上方兩大資料專區製造視覺區隔，暗示其性質與階級。

資料列表

在資料列表頁上，考量到篩選轉變為此頁面最重要的功能，故將除首頁外的導覽列改為一般網站的水平置頂樣式，空出左側擺放篩選器。
而兩大資料群有各自的架構邏輯，如何協助使用者快速理解是一大課題；在 Wireframe 階段梳理過基礎、好理解的流程後，接著便是設計可以發揮功能的地方。

為兩大資料群安排最適宜的表現形式

「原始公開資料專區」內含如政府資料開放平臺這類網站提供的資訊，有先後層級關係；據此邏輯，我們將此區塊包裝為一層一層進入、類似於資料夾構造的視覺。
篩選器方面，則參考 Google Maps 的規劃路線功能樣式，透過細小元素暗示各層資料夾間的路徑關係；且從第二層開始，在列表右上角提供了「返回上層」按鈕，無需特地將游標移動至瀏覽器原生的「上一頁」按鈕，讓使用上阻力更小、更加直覺。

而「商業加值變數專區」則是各筆資料在不同屬性、變數格式交叉影響下呈現的結果，可使用左側的交集篩選器來過濾資料。

Step 4. 正式易用性測試

製作完全站設計，進入第二次易用性測試。
因應成本與時間，UX 設計師建議客戶與團隊採用免費的第三方平台 useberry 作為測試工具；該工具支援 Figma，可直接導入 Prototype，並可在後台彙整量化數據，相當方便。

UX 設計師針對客戶提出的需求、設定期待受測者完成的題目，此階段我則配合設定 Prototype 與先行受測，提供反饋與debug。

這回找了數名TA（國泰內部同仁）進行測試，UX 設計師進行分析彙整後，我們再根據該結果來討論設計的可調整處；此測試也能協助客戶與上級更順利地回報成果。

Step 5. 整理元件庫，交付給第三方廠商

此專案中，我們公司工作範圍僅負責純設計，開發則是交由客戶自己找的第三方廠商（多奇數位創意）。
在跑完易用性測試、將全站設計定稿後，三方召開會議，主要由版塊向多奇說明設計稿、元件庫設定，並提供各式微動態 Demo，作為開發上的參照。會後則整理元件庫與輸出 Figma 檔案，交付予國泰和多奇，並提供簡易的 Figma 操作教學（輸入離線 fig.檔、選取物件、修改文字等），正式結案。

覆盤

過程配合順利，使客戶主動協助帶來更多案源

國泰集團原先就與版塊有多次合作，而此專案的順利配合、準時結案讓第一次接觸的數數發中心留下相當不錯的印象；據窗口分享，他們經常向其他部門大力推薦版塊設計。

全遠端協作體驗

時逢三級期間，與團隊完全以線上協作來完成該案。
視訊開會比起面對面更容易漏接現場資訊，例如聽眾的反應；偶爾也會發生諸如網路不穩或硬體出問題等狀況，處理時反應必須快，以降低與會者的焦慮或不耐感。為了讓風險降到最低，除了備好原本就該做好的功課，後來也會和內部團隊在開會前先小規模彩排，確保成員默契，讓正式會議時流程可順利推動。