因應使用族群改變，重新改版網站並加入新功能，展示更直覺的防災資訊應用範例
我負責優化前台，包括網站架構重整、資料視覺化以及前端切版，交付給工程師串接程式
水利署自 2018 年建置「水資源物聯網雲端數據中心」，透過智慧監測設施蒐集數據至雲端運算。即時掌握水位、流量等資訊，以降低水災風險及達到防洪預警，減少人民生命財產之威脅。作為 SaaS 端的前台，不僅是揭露物聯網資訊的平台，更是申請 API的重要端口
此次專案需求以「開放資料服務 API 」為主軸，提供「產學研界與民眾」進行創新研發水利應用服務。因應使用族群的拓展，專案的主要任務在於「API 資料視覺化」，規劃 API 可視化智慧主題展示，透過視覺化及互動式效果，展示更直覺的防災資訊應用範例
前台自上線後未進行過優化，且存在一些導致操作體驗不佳的重大問題：如選單架構混亂、選單用字不符合通用性、視覺元素的干擾或誤導…等。透過改版達到新、舊功能整合，全面改善使用者的操作與視覺體驗
整理目前的需求與訪談紀錄，我們預計在以下 3 個大方向進行優化：
Before
After
自原站的工程師蒐集來的痛點：原站未定義視覺指引，導致頁面中的元素、大小有不一致的情況，後續修改時需要每頁個別修改元素。由於專案時程緊迫，後續還有更困難的功能需要處理，我在專案前期制定視覺指引並將設計系統融入於網頁語法中，後續只要調整 SCSS 變數就能連動頁面中所有相同的元素，解決過去繁瑣的重工問題
除了選單的文字調整外，頁面中的文字說明也校正過語意。原本藏身於子選單中的「計畫說明」文字，改成一段迎賓簡介移至首頁，我們希望能在一開始做好自我介紹，讓使用者感到好奇進而探索網站服務。藉由重新梳理文字敘述、選用關聯性高的形象 Banner、敘述的右側放置快速連結至核心功能的 Icon …等，讓首頁變得更友善
Before
After
上線數個月後，使用者反饋 Banner 未有更新的可能。首頁的迭代後不僅刪除了 Banner 也優化了快速連結的布局，將後台數據中常被使用到的 API 類別以APP 未讀通知的方式展現，右上的紅標數字對應此類別中的子項目數量，使得新手與熟練的使用者都能快速連結至相應畫面
Current
專案需求在於呈現監測站與示警資訊的視覺化，「選用什麼主題資料視覺化？」成為前期規劃的重心，團隊從早期的水情、災情、地下水、潮汐等提案，漸漸淬煉成以都市、農業為導向的主題。至於「如何做到視覺化？」則是專案中花費最多心力的部分，首先以客戶期望的疊加圖資的地圖打造 MVP，經工程師測試後存在技術困難—無法疊加 Z 軸圖資，最後決定以地標 + 資訊圖卡的方式呈現
MVP - 疊加圖資
Current - 地標 + 資訊圖卡
展示監測站與示警資訊的 google 地圖已承載非常多的訊息，考量到地圖讀取效能問題，因此將主題拆分為獨立頁面分散資訊量，也有助於日後新主題的維護。另外將「縣市/流域」獨立出來，個別建構了一個可互動的 SVG 地圖，作為示警資訊前的引導，並劃分出懸停與點擊互動的區塊
水資源的災害不僅是水太多、還有水太少的問題，在淹水感測器、河川水位站上線後數個月後，團隊開始進行專案後續的擴充項目。「水庫情資」收錄了全台各地水庫的感測資料，欄位根據每個水庫的感測器數據動態更新每日水位、蓄水率與相關數值，為方便檢視水位的變化，提供調整日期與時間的功能。隔年 2021 年恰逢百年乾旱，中南部地方機關也能更直覺的檢視數據變化，開始著手限水規劃
解決淹水問題耗時從 5 小時縮減至 2 小時
累積至 2024 年， API 使用次數已達 180 萬+
陸續有開發者將 APP 上架，提升民眾防災意識
