實戰範例 005：設計思維工坊記憶儲存

背景

您的團隊舉辦了一場關於「移動端註冊流程優化」的設計思維工坊，經過使用性研究、競品分析與快速原型設計，發現以下重要洞察：

使用者因為表單欄位過多而流失率達 60%
競品使用漸進式填寫（Progressive Disclosure）降低認知負載
電話號碼驗證流程存在跨國號碼格式混亂問題

這些洞察需要被記錄並關聯到對應的產品需求文件，方便未來產品團隊快速回顧並迭代。

情境

工坊結束後，您希望將關鍵洞察與行動項目儲存到 MemPalace，並建立與產品需求文件的關聯，讓產品經理、設計師與開發人員未來能從記憶宮殿中找到這些洞察。

您想做什麼？

用戶：「能不能將設計思維工坊的洞察與行動項目記錄到 MemPalace，並關聯到 PRD 文件？」

第 1 步：初始化 Palace（如果尚未初始化）

$ mempalace init --wing "d:/Repo/mobile-app"
✓ Palace initialized at .mempalace
✓ First wing: d:/Repo/mobile-app

第 2 步：添加 Insight Drawers

每個洞察作為 Verbatim Drawer，保證原始表述不被扭曲。

洞察 1：表單欄位過多造成高流失率

$ mempalace add \
  --wing "d:/Repo/mobile-app" \
  --room "ux-insights" \
  --title "洞察 1：表單欄位過多造成流失率 60%" \
  --content "User Testing Stage 3 發現：註冊表單共有 8 個欄位，使用者平均完成時間為 90 秒，流失率達 60%。藉由熱力圖分析，主要流失點出現在第 4 欄（生日）與第 6 欄（推薦碼）。建議行動：逐步顯示欄位（Progressive Disclosure），並將姓名、電話、密碼作為第一頁，生日、推薦碼作為第二頁。" \
  --tags "ux,registration,form-abandonment,heatmap"

洞察 2：漸進式填寫降低認知負載

$ mempalace add \
  --wing "d:/Repo/mobile-app" \
  --room "ux-insights" \
  --title "洞察 2：漸進式填寫降低認知負載" \
  --content "競品分析 Stage 2 顯示：競品 A 與 B 使用漸進式填寫流程（將註冊拆為兩頁），平均完成時間為 45 秒，流失率降至 20%。競品 C 使用單頁表單但僅包含 4 個欄位，完成時間為 40 秒，流失率為 15%。結論：減少顯示欄位數量或將表單拆頁能顯著降低認知負載。" \
  --tags "ux,progressive-disclosure,competitor-analysis,cognitive-load"

洞察 3：電話號碼驗證跨國格式混亂

$ mempalace add \
  --wing "d:/Repo/mobile-app" \
  --room "ux-insights" \
  --title "洞察 3：電話號碼驗證跨國格式混亂" \
  --content "測試發現：電話號碼輸入框未支援動態國家碼，導致使用者輸入格式混亂。台灣使用者常輸入「+886 912345678」或「0912345678」，系統驗證失敗。建議行動：整合電話號碼格式化函式庫（如 react-phone-number-input），自動根據國家選擇調整格式，並在伺服器端支援多種格式驗證。" \
  --tags "ux,phone-verification,international,format-validation"

第 3 步：添加 Reference Drawers 連結 PRD 文件

$ mempalace add \
  --type reference \
  --wing "d:/Repo/mobile-app" \
  --room "prd" \
  --title "PRD：移動端註冊流程優化需求" \
  --file "docs/mobile-registration-prd.md" \
  --range "lines 1-100" \
  --tags "prd,registration,requirements"

第 4 步：建立 Insight → PRD 關聯

$ mempalace link \
  --wing "d:/Repo/mobile-app" \
  --from "洞察 1：表單欄位過多造成流失率 60%" \
  --to "PRD：移動端註冊流程優化需求" \
  --relation "addresses" \
  --description "此洞察對應 PRD 中的需求 2.1（降低註冊流失率至 15%）"

✓ Linked drawer-001 → drawer-004

$ mempalace link \
  --wing "d:/Repo/mobile-app" \
  --from "洞察 2：漸進式填寫降低認知負載" \
  --to "PRD：移動端註冊流程優化需求" \
  --relation "verifies" \
  --description "此洞察透過競品分析驗證漸進式填寫的有效性，符合 PRD 中的需求 2.3"

✓ Linked drawer-002 → drawer-004

$ mempalace link \
  --wing "d:/Repo/mobile-app" \
  --from "洞察 3：電話號碼驗證跨國格式混亂" \
  --to "PRD：移動端註冊流程優化需求" \
  --relation "implements" \
  --description "此洞察建議整合 react-phone-number-input，直接影響 PRD 中的需求 3.2（實作電話號碼格式化）"

✓ Linked drawer-003 → drawer-004

第 5 步：召喚洞察並檢視 PRD

數月後，產品經理需要回顧註冊流程優化相關的研究：

$ mempalace recall --wing "d:/Repo/mobile-app" --query "註冊流程 洞察 PRD"

搜尋結果顯示 Knowledge Graph 中的關聯：

Top 1: drawer-001.md
Title: 洞察 1：表單欄位過多造成流失率 60%
Relevance: 0.88
Tags: ux,registration,form-abandonment,heatmap

Linked [addresses] → drawer-004.md:
  Title: PRD：移動端註冊流程優化需求
  Description: 此洞察對應 PRD 中的需求 2.1（降低註冊流失率至 15%）

Top 2: drawer-002.md
Title: 洞察 2：漸進式填寫降低認知負載
Relevance: 0.85
Tags: ux,progressive-disclosure,competitor-analysis,cognitive-load

Linked [verifies] → drawer-004.md:
  Title: PRD：移動端註冊流程優化需求
  Description: 此洞察透過競品分析驗證漸進式填寫的有效性，符合 PRD 中的需求 2.3

透過 Knowledge Graph，產品經理不僅找到洞察，還發現這些洞察如何支撑 PRD 具體需求，決策依據一目了然。

第 6 步：視覺化洞察間關係

$ mempalace graph --wing "d:/Repo/mobile-app" --drawer "洞察 1：表單欄位過多造成流失率 60%"

結果：

graph LR
  drawer001[洞察 1：表單欄位過多造成流失率 60%] -->|addresses| drawer004[PRD：移動端註冊流程優化需求]
  drawer002[洞察 2：漸進式填寫降低認知負載] -->|verifies| drawer004
  drawer003[洞察 3：電話號碼驗證跨國格式混亂] -->|implements| drawer004

此圖展示所有 UX 洞察如何共同支撑 PRD，幫助團隊理解完整設計決策鏈。

關鍵成果

✅ 3 個關鍵 UX 洞察已逐字儲存
✅ 關聯 PRD 文件，建立「洞察 → 需求」鏈路
✅ 透過 recall 搜尋「註冊流程洞察 PRD」，Knowledge Graph 推理出洞察如何支撑需求
✅ 使用 graph 視覺化洞察間的關係，方便產品決策參考

延伸練習

將使用性測試的原始記錄（如測試影片目擊錄、熱力圖）新增為 Reference Drawers，並關聯到對應的 Insight Drawers，實現「原始數據 → 洞察 → 需求」三層追溯鏈。

Platform: Claude Code
Skill: oml-add、oml-link、oml-recall、oml-graph