概要
VORTEX 因長期堆疊功能，導致產品面對體驗破碎化與銷售瓶頸等嚴重問題。
本專案透過系統化重構，打造對標 Tier 1 競品的消費級安防體驗。作為產品設計師，與 PM 及工程團隊緊密協作，將視覺語言轉化為可擴展的工程邏輯，成功平衡了美學與開發成本。除了確保產品改版能如期於 ISC West 展覽 demo 外，也真正落實設計系統的建置，以支持未來3~5年以上的擴建。
2025.11 - 2026.03 (進行中)
我們團隊
Mike / Amy - 產品設計師
Azure - 開發團隊領導
Dino / Carol / Jan - 前端工程師
Haimi - 產品經理
我負責的項目
* 架構重整與產品債務消除
* 組織畫面並做元件壓力測試
* 撰寫元件使用原則 (Usage Principles)
* 開發交付以及管理專案進程 (Design-to-Dev Handoff)
* 產品語氣框架統整
網站平台
“VORTEX 平台與其他安防產業的競爭品相比，總是感覺比較難用…”
我們的產品長期習慣處於「功能堆疊」(將產品視為功能清單，而非完整體驗的開發模式)，雖然具備基礎的 Figma 元件庫，但設計團隊缺乏嚴謹的使用框架。設計師會反覆創建類似的元件，開發端則依賴人工取色與 Hard-code CSS，導致技術債、畫面元件不一致，最終直接拖累了用戶的體驗以及開發效率。
客戶的抱怨累積以及與 SI 的訪談，成為轉機的關鍵！
2024 年 10 月，我主導了一場與美國關鍵系統整合商的深度訪談，並收到了明確的市場警訊：
"VORTEX 的硬體很有競爭力，但軟體感覺像是給 IT 人員的工具。如果這個產品無法讓我（銷售人員）感受到興奮，你怎麼會期望客戶會買單？"
如果市場已經趨於飽和，每一個競爭品都有類似的功能，那麼我們的護城河是什麼？
經過分析：安防產業的高成熟度特性造成競爭品之間的差異日漸縮小，若要在同質性高的產品中脫穎而出，介面與體驗將不在是單純的銷售成本，而是根本的競爭要素以價值投資。
-
在現代 VSaaS 市場，體驗即是產品。
-
產品必須從「堪用的工具」轉型為「具備消費級體驗的安防生態系」。
定義「消費級體驗」：
“在現代 B2B SaaS 領域中，是指將 To-C (面向一般消費者) 產品的極致易用性與現代美學，帶入原本高門檻、高複雜度的 To-B (企業級) 系統中，以實現低成本的學習曲線與高流暢的使用體驗。”
消費級體驗的例子:
以往的專案管理軟體介面不僅擁擠且學習曲線極高，但Notion隱藏了所有複雜的排版按鈕並引入「區塊拼接」的概念，讓企業規格書變得像在寫個人手帳一樣輕鬆。
“我們在當時收到高層的需求，希望在2026年的 ISC West (International Security Conference & Exposition) 展覽中，正式公開亮相我們 VORTEX 2.0 的實作，以作為導引來觀察用戶是否會接受這樣的改動。”
1
缺乏成功指標 & 專案的價值定義
由於專案初期缺乏量化的專案成功指標與優先級定義，我判斷重構極易淪為「單純的主觀的視覺翻新」。為避免此事，便與利害關係人確定這個行動的價值，包含:
一次性消除一直以來累積的前端技術債與畫面的不一致，以提升產品的開發效率與品質。
制定元件以及組成畫面的使用規範，讓產品設計團隊得以擁有可以遵循的設計框架。
創建出符合現代審美的介面風格以及絲滑的「安防軟體體驗」，進而產生更多顧客留存/轉化率。
而為了幫助團隊在短期目標上（ISC West 展覽實作）更具焦，我們團隊將「展覽現場的正面反饋(情緒分數)」作為階段性的驗收指標。如此一來，既可以測試新畫面的實質反饋，也能夠幫助團隊統一短期目標並凝聚向心力。
2
管理層決策與系統一致性的拉扯
管理層傾向在開發中途提出臨時性的視覺微調，且強勢要求部分不符現代網頁標準的規格（如：以 1920px 畫布寬度來做視覺審核、發想出複雜的無限彈窗串接…），這直接威脅了 Design Token 的開發進度。
為解決這個挑戰，我誠實地向管理層說明在有限時間內頻繁的更改雖然可以讓視覺更趨向完美，但其中的 trade off 將會是畫面開發的延遲。最後，為了同時滿足視覺以及時程兩個目標，我向團隊建議專案的進程為:
Token 定義完善以及開發
元件定義以及展示功能層的交付
後續元件的修正對齊（建置 Storybook）
制定行程以確保前期定義的目標能被有效落實
*延伸目標 - "讓 AI 讀懂設計系統"
由於我們在當時有另一個團隊專門在研究“實現 AI 產出設計與 code”的可行性。
因此為了達成這個目標，設計系統將不再只是給人類看的規範，而是要構建成「機器可讀的設計系統」，讓 AI agent 能透過模型上下文協議（MCP）直接讀取並自動生成符合設計規範的程式碼。
"因此為了達成這個目標，設計系統將不再只是給人類看的規範，而是要構建成「機器可讀的設計系統」，讓 AI agent 能透過模型上下文協議（MCP）直接讀取並自動生成符合設計規範的程式碼。"
遵行目標來製作設計系統
為了在短時間內平衡體驗需求與開發成本，我與另一位產品設計師合作，他負責從0到1建立出設計系統的顏色與設計型態（以 Shadcn-ui 為基底），我負責系統落地與架構把關，以確保其可以滿足 VORTEX 監控服務的需求，並保持框架的一致性。
1) 嚴格審計與元件精簡
我們對 v1.0 系統進行全面盤點，將原本鬆散且部分使用情境重疊的 36 個 UI 元件，標準化並收斂至 28 個核心元件 (減少 22%)。同時定義產品功能頁面的「模組化 Layout」，使同一套結構能被複用於至少 2-4 個不同的資訊層級，除大幅降低前端維護成本，也降低用戶的學習成本。
Search + Filter 的篩選方式
適用於每一個有大範圍資料搜尋需求的頁面。（ex. Devices, Message, Archive）
Table + Side panel 的瀏覽方式
適用於「瀏覽為主、細節為輔」的管理型任務頁面。（ex. Devices, Message）
2) 編輯文件規範
在設計完工並進入工程衝刺期時，我利用 AI 協作的方式，獨立編寫了全套系統的使用規範 (Usage Principles)，包含 Do's & Don'ts 與互動邏輯，確保團隊擴張時系統的規則不會崩壞，以及讓往後設計師在製作新功能時能有使用的依據。
以其中一個元件（Dialog）說明來示範
遵行目標來製作設計系統
為了在短時間內平衡體驗需求與開發成本，我與另一位產品設計師合作，他負責從0到1建立出設計系統的顏色與設計型態（以 Shadcn-ui 為基底），我負責系統落地與架構把關，以確保其可以滿足 VORTEX 監控服務的需求，並保持框架的一致性：
一切的前期準備都是為了提高新創產品的勝率，我在時間允許的情況下盡可能地提供方向指引以及快速有力的假設，來幫助團隊持續往錨定的目標前進。
我在限制中如何做出權衡：
在成功製作了第一版的設計後，我們整理了團隊認為幾個比較關鍵的任務流程，並利用可點擊的Prototype來發起用戶測試，最終在經歷了17位受試者的測試與迭代下，我們確保了用戶能在現有的設計下完成多項主要任務。
網站Prototype的測試項目：
理解卡牌玩法
註冊平台帳號並使用史詩互動系統遊玩
購買桌遊
參與網站上公布的賽事並報名成功
在完成測試後，讓玩家實際遊玩卡牌，並請他給予質性評價(是否會有興趣)
受試者組成：
理4位輕度消遣桌遊玩家 (主要TA)
3位重度桌遊玩家 (對照組)
測試目的：
驗證四條由團隊共同定義的『最關鍵使用者路徑』，並在投入開發資源前，找出並修復潛在的易用性障礙，確保我們的設計能有效地支持商業目標。
驗證當初假設的TA是否值得投入。
衡量指標：
任務完成率
質化回饋
任務後簡易度評分 (SEQ, 1-7分)
質化結果：
14位輕度消遣桌遊玩家中，有11位給予桌遊正面評價，並顯露出購買意願 (詢問什麼時候上市)，3位表達觀望態度。
3位重度消費者中，有2位表達觀望態度 ，1位表示不期待這個遊戲。
SEQ結果：
理解卡牌玩法: 6.1
註冊平台帳號並使用史詩互動系統遊玩: 5.3⚠️
購買桌遊: 6.4
參與網站上公布的賽事並報名成功: 6.6
後續洞察
1) 關鍵洞見一：理解不等於吸引
在「理解玩法』這項任務中，我們發現了一個有趣的現象。雖然多數使用者最終都能搞懂規則，任務的平均簡易度分數 (SEQ) 也達到了看似不錯的 5.8 分。但在後續的質化訪談中，我們卻收到了大量如: 像在讀說明書、有點枯燥等負面回饋。
2) 關鍵洞見二：史詩互動系統令人困惑的心智模型
使用者普遍將為「線下輔助」設計的系統，誤解為「線上對戰」遊戲，導致對其核心價值無法完全理解。且我們注意到系統要求玩家在專注於實體牌局的同時，頻繁操作系統閱讀劇情，嚴重干擾了桌遊的交流體驗。
提出改善方法
1) 推動設計新手教學來促進轉化
由於從線上(網站或粉絲團)吸引的客戶沒辦法實際玩到桌遊，可能對轉化率產生一定的影響，有鑒於此我設計了「線上互動Demo」，讓使用者透過簡單的試玩，直接「感受」到遊戲的樂趣。
2) 史詩互動系統的產品策略調整
我重新設計了「線下模式」的流程，將入門關卡設置成教學關卡，除了教導用戶實體卡牌搭配系統的玩法，也優化了的說明文案。
另外團隊也根據反饋與需求推動產品路線圖的演進，轉向同時開發「線下輔助」與「線上對戰」兩個路線，以求拓展產品的市場邊界 (TBD)。
備註: 原本我根據用戶反饋提議將劇情/音樂變為可以先直接跳過並在戰後回顧，以符合實際桌遊玩家的用戶情境，但Leader認為劇情是系統的核心獎勵，所以後續我們沒有使用這個提案。
除此之外，我們也嘗試多種事前預約的增長實驗
1) 事前預約登陸抽獎
我們在募資期間，除了於實體活動以及粉絲團上做宣傳外，也於網站的Landing page中加上了事前預約的活動，並推出豐厚抽獎來吸引玩家。
2) 軍鬥牌版本的心理測驗
我們發想使用心理測驗的方式來進行病毒式行銷，以期作為快速擴散的媒介。
在網站與增長實驗功能上線後，我們也持續透過埋點來觀察可以被優化的地方，以1~2個禮拜為周期，持續並密集地改動調整。
亮眼的銷售表現
原本設定目標為10萬台幣的募資目標，到最後衝刺到了100萬台幣，將近10倍的達標數字!
吸引 > 探索 > 遊玩的體驗
在我們的目標，是使用者進入網站的黃金5~10秒內，快速傳達產品的獨特魅力與價值，並激發他們的好奇心。在首頁的標題我們直接點明產品的核心價值 - 「好上手，策略多變」，當用戶被點起好起奇心前往玩法介紹時，便可以使用「線上互動Demo」以及史詩互動系統的教學關卡來快速理解玩法趣，最終讓他們產生「我必須玩到它」的渴望。
定義成功指標
募資上市後，為了持續衡量產品的健康度，我與團隊討論後，制定了以下指標來作為觀測依據:
1) 業務與產品指標
總銷售額 (Gross Revenue)
顧客終身價值 (LTV)
2) 成長與獲客指標
新(免費)會員註冊數
付費會員啟用率 (Activation Rate)
3) UX 指標
淨推薦值 (NPS)
使用者留存率
有了數據目標，將能在往後更客觀地衡量產品的成長程度，同時也為每一次迭代增加有效性！
AI技術的出世，其實對我們公司而言是利多
在以往，實作成本與速度可能都無法與 teit 1 軟體公司相比，但現在有了 AI 工具後，製作產品的品質與速度將會大幅增加，人人都可以快速做出80分以上的產品。
這次經歷讓我深刻體會到，產品設計師的價值，不僅在於解決使用者的問題，更在於解決能驅動商業成功的「正確的」使用者問題。我學會了:
從「Why」出發： 在思考「這個介面該如何設計」之前，先問「我們為什麼要做這個功能？它對應哪個商業目標？」
擁抱不完美： 理解到一個準時上線、能達成核心目標的80分產品，遠勝於一個錯過時機的100分藝術品。MVP的取捨，本身就是一門設計。
用成果說話： 我開始將「使用者滿意度」與「募資轉換率」、「產品啟用率」等商業指標連結思考，讓設計的價值不再僅是主觀感受，而是可以被衡量的商業貢獻。
