SaaS 產品架構模組化設計

透過架構重構解決系統擴張瓶頸,實現功能模組的彈性販售與跨平台一致性

專案類型

工作專案

專案類型

工作專案

平台

Web / APP

執行時間

2024/12 - 2025/6

負責內容

產品架構重整與介面優化,並與 PM、RD 跨部門協作推動落地

專案背景

過去為求快速將產品推向市場,團隊將「門禁」與「出勤」開發為兩套獨立運行的系統。然而,隨著產品功能量體增加,業務開始反映客戶希望能同時或選擇性購買不同的功能。在與 PM 進一步的拆解需求後,確認問題根源在於系統架構缺乏彈性,而非介面操作問題,同時也整理了幾項目前架構的問題點,因此決定從底層架構著手重構。

  1. 操作阻力:使用者需要在兩套系統重複建立員工資料,容易造成數據不一致與管理困難。

  2. 銷售限制: 舊有架構缺乏彈性,無法滿足客戶對於「單一功能」或「多功能組合」的使用需求。

  3. 研發浪費: 開發端需同步維護兩套邏輯高度相似的代碼,導致研發資源重複損耗。


設計策略

針對以上三個層面的問題,設計策略從架構、商業彈性與介面三個方向同步切入

  1. 架構模組化: 透過系統整併實現數據連通,極小化使用者與開發端重複建置與維護的成本。

  2. 插拔式功能架構:建立可彈性組合的模組販售架構,支援客戶依需求選擇單一或多功能組合。

  3. 介面動態佈局:系統依據購買授權自動過濾介面內容,確保使用者僅能看見已啟用的服務。


WEB 管理端


核心重構


側邊選單

配合插拔式架構重新定義導覽邏輯,選單依客戶購買模組自動適配;同步將視覺從深色改為淺色底,移除雙色狀態標示,降低認知干擾。


待辦事項整合

將分散的補登與申請表單收斂至統一入口,以動態頁籤區分單據類型,同時為未來新增審核類型預留擴充空間。


模組功能拆解

將出勤業務邏輯從底層資料中全面剝離,在出勤模組內建立專屬設定中心,確保模組間獨立運作、互不干擾。


App 員工端:高頻任務的「行動化轉譯」


核心重構


首頁邏輯


頁面拆解與樣式


問題發現與迭代修正


發現問題

初版設計將員工資料中出勤部分獨立於出勤模組,上線後收到反饋,管理者在新增員工時因操作路徑不連續而頻繁遺漏設定。


優化討論

初步提案: PM 與 RD 傾向以「增加文字提示或連結」的方式引導使用者跳轉。

我的觀點: 文字提示僅是增加視覺噪音無法解決問題,在確保資料結構不影響現行運作的前提下,我提出將員工資料中出勤部分向下整合至人事模組。這不僅能維持現行流程的直覺性,更能為未來的功能擴充建立更彈性的底層邏輯。


解決方案

最終決定採用向下整合的形式,重新梳理資訊架構,達到了以下目的:

  1. 流程連貫性: 確保管理者的操作流是線性且完整的,從基本資料到出勤設定一氣呵成,消除遺漏風險。

  2. 系統的彈性: 將出勤設定模組化,未來其他功能若需調用員工出勤邏輯,能直接從人事核心提取,而非在多個功能模組間穿梭。

Create a free website with Framer, the website builder loved by startups, designers and agencies.