跨境電商平台專案
🏆 專案成就亮點
從 0 到 1 打造跨境電商平台，於 4 個月內成功推動產品如期上線。
制定 「雙平台管理策略」，完美平衡自家品牌 DNA 與合作方 App 規範。
針對 3 人小型團隊開發 「輕量化設計系統架構」，極大化設計產出效率。
🚀 專案願景
打造一套能流暢整合於「公司網站」與「合作方 App (WebView)」的跨境電商服務，確保跨平台體驗的一致性。
類別
E-commerce
擔任角色
主導 UI 設計師
時間
2025/04~08
工具
Figma、Notion
🧗 面對的挑戰
平台衝突： 需在自有品牌風格與外部合作方設計規範間尋求最優解。
資源限制： 在僅有 3 名設計師的小型團隊中，建立可長期維護的系統。
時程緊迫： 必須於 8 月準時上線，且不容許品質妥協。
🔍狀況
公司啟動了一個新的產品規劃：
建立一個 跨境電商平台服務。
這個服務會同時存在兩個地方：
1️⃣ 公司自己的 網站平台
2️⃣ 合作方 App 內的 WebView
但同時也帶來一個問題：
產品有自己的需求與設計風格，但在合作方 App 中又需要 部分遵守對方的 UI 規範。因此我們必須在 產品需求、平台規範與維護成本 之間找到一個平衡。
而且現實條件是：
整個部門只有 3 個人，所以這個解法 必須簡單、可維護、可長期擴展。
🔍狀況
公司啟動了一個新的產品規劃：
建立一個 跨境電商平台服務。
這個服務會同時存在兩個地方：
1️⃣ 公司自己的 網站平台
2️⃣ 合作方 App 內的 WebView
但同時也帶來一個問題：
產品有自己的需求與設計風格，但在合作方 App 中又需要 部分遵守對方的 UI 規範。因此我們必須在 產品需求、平台規範與維護成本 之間找到一個平衡。
而且現實條件是：
整個部門只有 3 個人，所以這個解法 必須簡單、可維護、可長期擴展。
📝任務
在專案開始時，我的任務是為這個新的跨境電商服務建立一套 可以同時支援自家網站與合作方 WebView 的 UI 設計方案，並確保設計能在有限人力下順利維護與擴展。
主要需要完成的任務包括：
為核心產品頁面建立 清晰的 Layout 與 UI 架構
整理並建立 專案所需的 UI 元件
規劃 跨平台 UI 的設計策略（Web 與 WebView）
建立 設計系統管理方式，避免元件混亂與重複製作
訂定 團隊協作方式與設計紀錄流程
透過這些任務，讓團隊在後續協作與設計製作時能更有效率，也能維持產品 UI 的一致性。
📝任務
在專案開始時，我的任務是為這個新的跨境電商服務建立一套 可以同時支援自家網站與合作方 WebView 的 UI 設計方案，並確保設計能在有限人力下順利維護與擴展。
主要需要完成的任務包括：
為核心產品頁面建立 清晰的 Layout 與 UI 架構
整理並建立 專案所需的 UI 元件
規劃 跨平台 UI 的設計策略（Web 與 WebView）
建立 設計系統管理方式，避免元件混亂與重複製作
訂定 團隊協作方式與設計紀錄流程
透過這些任務，讓團隊在後續協作與設計製作時能更有效率，也能維持產品 UI 的一致性。
⚡行動
Step 1 — 協作討論
在專案開始前，UI 與 PM 先開了一次專案執行前的會議，對齊整體製作流程。
在 UI 執行上，我先負責建立主要頁面，例如首頁、搜尋結果頁與商品頁，並先訂定整體 Layout 與主要元件。同時我也把專案新增的元件整理到 設計系統 Page 做集中管理，讓同事可以快速瀏覽與使用，也方便日後整理進正式設計系統。
在同事加入協作前，需要先了解公司的設計系統並瀏覽該專案的設計系統 Page，確認目前有哪些元件，避免重複造輪子。另外整個設計流程中也需要撰寫 Design Log 來記錄設計迭代與修改內容。
完成這些前置作業後，其他同事在既有規範與設計系統的基礎上延伸頁面，整體製作效率也能大幅提升。
⚡行動
Step 1 — 協作討論
在專案開始前，UI 與 PM 先開了一次專案執行前的會議，對齊整體製作流程。
在 UI 執行上，我先負責建立主要頁面，例如首頁、搜尋結果頁與商品頁，並先訂定整體 Layout 與主要元件。同時我也把專案新增的元件整理到 設計系統 Page 做集中管理，讓同事可以快速瀏覽與使用，也方便日後整理進正式設計系統。
在同事加入協作前，需要先了解公司的設計系統並瀏覽該專案的設計系統 Page，確認目前有哪些元件，避免重複造輪子。另外整個設計流程中也需要撰寫 Design Log 來記錄設計迭代與修改內容。
完成這些前置作業後，其他同事在既有規範與設計系統的基礎上延伸頁面，整體製作效率也能大幅提升。
Step 2 — 設計系統雙平台的管理策略
為了兼顧管理效率與彈性，我將系統拆分為三層：
Core 系統： 管理通用原子組件（顏色、間距、基礎按鈕）。
專案系統： 管理該服務特有的 UI Pattern（如：商品卡片、專案主色）。
檔案內管理： 針對 Web 或 App 各自特有的組件（如 Header/Footer）保留在專案檔中，避免污染全局系統。
Step 2 — 設計系統雙平台的管理策略
為了兼顧管理效率與彈性，我將系統拆分為三層：
Core 系統： 管理通用原子組件（顏色、間距、基礎按鈕）。
專案系統： 管理該服務特有的 UI Pattern（如：商品卡片、專案主色）。
檔案內管理： 針對 Web 或 App 各自特有的組件（如 Header/Footer）保留在專案檔中，避免污染全局系統。
Step 3 — 為什麼不再拆分各平台設計系統?
考量到 3 人團隊的極限，拆分兩套系統會導致更新同步的成本翻倍。我們選擇「核心共用、平台在地化」的折衷方案，僅維護 Core 與 Project 兩套主系統，讓架構保持輕盈，團隊每個人都能快速上手。
Step 3 — 為什麼不再拆分各平台設計系統?
考量到 3 人團隊的極限，拆分兩套系統會導致更新同步的成本翻倍。我們選擇「核心共用、平台在地化」的折衷方案，僅維護 Core 與 Project 兩套主系統，讓架構保持輕盈，團隊每個人都能快速上手。
Step 4 — 先蓋地基
我優先使用 Core 系統的 Tokens 建立核心頁面雛形。當這些高複雜度的核心頁面完成後，產品的整體架構便清晰可見，其他同事能在此基礎上快速延伸，達成高效開發。
Step 4 — 先蓋地基
我優先使用 Core 系統的 Tokens 建立核心頁面雛形。當這些高複雜度的核心頁面完成後，產品的整體架構便清晰可見，其他同事能在此基礎上快速延伸，達成高效開發。
Step 5 — 管理與維護
上線後，我利用 Notion 建立組件資料庫，詳細記錄分類邏輯與維護規則，讓設計、工程與產品端能擁有一致的參考依據。
Step 5 — 管理與維護
上線後，我利用 Notion 建立組件資料庫，詳細記錄分類邏輯與維護規則，讓設計、工程與產品端能擁有一致的參考依據。
✨結果
產品於 8 月如期上線，設計還原度與需求達成度獲得 PO 高度肯定。
成功為雙平台產品建立一套「小團隊也能輕鬆維護」的系統架構。
強化了團隊的協作默契，透過 Design Log 減少了溝通摩擦。
✨結果
產品於 8 月如期上線，設計還原度與需求達成度獲得 PO 高度肯定。
成功為雙平台產品建立一套「小團隊也能輕鬆維護」的系統架構。
強化了團隊的協作默契，透過 Design Log 減少了溝通摩擦。
🌱專案心得與反思
這個專案讓我從單純的「繪圖者」轉變為「設計架構規劃者」。我發現 UI 設計不只是視覺問題，更是關於如何結合現實的人力、時程與技術限制，找出最優解的過程。這對我未來開發 SaaS 產品的商業思維有極大的啟發。
🌱專案心得與反思
這個專案讓我從單純的「繪圖者」轉變為「設計架構規劃者」。我發現 UI 設計不只是視覺問題，更是關於如何結合現實的人力、時程與技術限制，找出最優解的過程。這對我未來開發 SaaS 產品的商業思維有極大的啟發。
