Taipei, Taiwan
聯絡我
Blentity Manager 主視覺
客戶
IKV
角色
產品設計師
年份
2024
成果
群募達成率 307%

Blentity Manager — Design System

Blentity 是一款整合 FIDO 無密碼認證、加密隨身碟與檔案加密的硬體安全裝置。Blentity Manager 是其桌面管理軟體,也是該公司第一個由設計 + 前端團隊共同開發的跨平台軟體。

團隊過去以韌體與硬體工程師為主,沒有面向一般消費者的設計經驗。我作為產品設計師,自然也把產品需求分析的工作一起扛了(又一次兼任 PM)。

Blentity 產品成果

需求分析

需求分析 2
需求分析 3

使用者分析

使用者分析 1
使用者分析 2

功能規格與流程設計

流程設計
Wireframe 動態展示

Design System 建置

Design Token 定義:以 Tailwind UI 為基礎,結合公司品牌規範延伸出 Design System 與 UI 元件庫。用 Design Token 管理色彩變數,透過 Figma 外掛匯出至前端。

Design System
Design Principles

元件規範:跟前端工程師一起建立 UI 元件庫,定義每個元件的狀態(focused、disabled、hover 等)跟使用規則。

元件命名規範

UI 設計

UI — Home
UI — Settings
UI — Recipient

交付規範

統一命名跟檔案結構規則,產出 UI 頁面狀態、規格文件跟流程文件,讓工程師不用反覆來問。

文字規格
UI 規格 1
UI 規格 2
Blentity 最終成果

成果:Blentity 群募達成率 307%。在日本最大 IT 展覽(IT Week 2024)獲得超過 20 家潛在客戶詢問。為該公司建立了軟體開發的設計基礎,可沿用至未來產品。

Tudi EMR 主視覺
客戶
台灣素問科技
角色
產品設計師
年份
2022
平台
Web + iPad

Tudi EMR — Design System

在團隊開發了 4 年面向中國市場的 Tudi HIS(近 400 間診所客戶、流失率低於 1%)之後,決定進軍美國市場,開發面向矽谷中醫診所的 Tudi EMR。

Tudi EMR 包含三個子系統:Web 預約掛號系統、Web 診所管理系統、iPad 行動病歷系統。

Tudi EMR 系統概覽

研究方法

遠端診所訪視
診所平面圖
診所業務流程

需求定義

User Story Mapping
功能範圍 MVP

Design System 選型與建置

評估多個 UI Library 後,選定 Tailwind UI 作為 Design System 基礎,向前端工程師提案並獲得採用。在 Tailwind UI 之上定義客製化的設計規則,建立適合醫療系統的元件規範。

UI Flow
Design System 1
Design System 2

UI 設計

Web UI
對外頁面 UI
iPad UI

品質確保

每週 Sprint Review、共用 Notion Buglist 追蹤問題、2 輪可用性測試(1 輪內部預測試 + 1 輪遠端外部使用者測試),即時修正問題並記錄長期改善事項。

Bug List
Usability Test Plan
Usability Testing