挑戰

舊系統介面過時且不易使用,許多人又是在小尺寸的手機螢幕上操作,使用過程相當挫折。我們的目標,是將這個複雜的平台改造成所有人都能清楚理解、容易使用的系統。

改版前後比較:舊版 e 化服務登入畫面與改版後的 dashboard

設計方法

身為團隊的 lead designer,我負責平台的 information architecture 與視覺設計。

Information architecture 與易用性

我們先分析超過 200 項既有申辦項目與功能,再重新梳理整體 information hierarchy,讓首次使用者與長期使用系統的政府人員都能理解。我在設計中使用清楚的 navigation bar、breadcrumbs 與明確的 CTA 等熟悉元件,引導使用者完成操作。

完成分析與重新整理的服務及功能
200+

改版後平台 layout system 的 UI 設計與規格

為所有使用者設計 responsive 體驗

許多使用者會用手機開啟平台,因此系統必須在小螢幕上也能順利操作。我定義了 desktop、tablet 與 phone 的 breakpoints 和設計規範,同時也讓工程團隊更容易進行開發。

desktop、tablet 與 phone 的 responsive breakpoints

建立可擴充的 design system

為了讓大量功能維持一致,我建立並持續調整平台的 design system。它讓每個畫面共用同一套元件,加快設計工作,也讓與工程團隊的合作更順暢。

平台共用元件的 design library

成果

我在 2019 年參與這次改版。經過後續開發與實作,新系統於 2024 年上線,現在透過單一平台服務數百萬名台灣雇主與勞工。

edesk.bli.gov.tw

改版後的勞保局 e 化服務系統 desktop 與 phone 畫面

題外話: 這個專案是我職涯中的轉捩點。它是我第一個大型 UI 專案,沒有同事 Steven、Weiwei、Sarah、Ash、Bright、Jude、Carol 與 Evan 的指導,我不可能完成這項工作。他們一路上的協助與帶領,幫助我面對每個挑戰。

返回所有作品