Patentcloud Design System
一套具備擴展性的設計系統，整合跨產品體驗，提升全球專利數據平台的協作效率與品牌一致性
角色
Product Designer
時程
Mar. 2019
Project Overview
Patentcloud 是專注於專利領域的SaaS服務，共有六大產品。由於產品發展時間不一且經手的設計師與工程師不同，導致不同產品間框架存在版本差異，影響了整體用戶體驗。本專案目標是建立統一的設計系統，提升產品體驗一致性
問題現況
產品間用戶使用情境差異大，體驗不一致
前端框架版本分歧，維護成本高
設計規範不同步，開發效率低
核心挑戰
" 如何在確保各產品開發進程的前提下，建立並推動設計系統的導入？ "
我的角色
與貢獻
作為 Design System Owner 與 UIUX Designer，我主導了整個設計系統的規劃與實施：
制定設計系統策略與藍圖
分析各產品定位與使用者需求
建立跨產品設計規範與治理機制
推動跨部門協作與共識建立
解決方案
1. 分階段導入策略
Color System : 建立品牌基礎
挑戰：
專案初期團隊對品牌風格與設計系統重視不足，常選用不符產品定位的元件或色彩 。我的解決方案：
主動進行品牌研究，提出完整的顏色系統提案，並透過實際修改 Hex code 示意，成功說服團隊導入並落實設計系統概念 。成果：
建立 95% 中性色與 5% 產品色系的原則，並導入 Font Awesome 進行圖標集中管理
Basic System : 統一常用元件
我透過採用 Atomic Design 方法，將元件拆解並建立起 Atoms、Molecules、Organisms 等層級的元件庫，大幅提升了設計與開發的一致性。
建立 Design Token 架構，實現對顏色、字體等設計細節屬性的統一管理，確保跨產品共用與快速更新的效率 。
導入 BEM 命名法，建立了結構清晰的元件庫，顯著減少了設計與前端的溝通成本及重複製作 。
2. Design System Governance : 建立設計系統架構
從產品策略層面出發，建立了雙層次的設計系統架構：
Platform Level（平台層）
審視各產品共同需求，建立統一基礎：
設計語言與品牌識別
基礎元件庫（按鈕、表單等）
共用互動模式
Product Level（產品層）
根據產品特性，制定差異化策略：
專業功能模組客製化
特定產品互動流程
資料呈現方式調整
應用案例：專利清單改版
問題
作為核心功能的專利清單，雖共用數據源，卻因設計與操作不一致，影響整體用戶體驗
我的方法
盤點與組織： 盤點所有產品的專利清單，歸納不同瀏覽目的與資料呈現需求
研究與基準： 分析競品與框架如何解決清單顯示問題，並諮詢前端可行性
定義規則： 制定標準欄位寬度與呈現規範，提供團隊統一且靈活的設計基準
文件化： 撰寫詳細設計文件，確保未來產品或數據源擴展時仍能保持一致的顯示體驗
成果
統一了專利清單的顯示體驗，提高了用戶在不同產品間瀏覽數據的效率與舒適度
專案成效
量化成果
元件重複使用率提升 60%
開發時間縮短 40%
設計一致性提升 45%
質化效益
建立跨部門設計協作文化
提升產品設計效率與一致性
為未來產品擴展奠定基礎
協作與倡議 (Collaboration & Advocacy)
我在專案中積極推動與協作，確保設計系統的成功落地
