專案介紹
- 客戶要求： 從產品策略顧問、專案管理到 UI/UX 設計，我協助 GeniSparkle 重新校準產品方向、整合使用者體驗，並透過設計系統與 AI 友善交付流程，讓創業願景成功轉化為實際產品。
- 客戶名稱： GeniSparkle
- 製作項目： 顧問報告、UX Flow、WireFrame、Mockup、UI Flow、AI 友善結構
- 製作技術： : Figma、photoshop、GPT、Gemini
GeniSparkle 從迷失方向到產品實現（From Confusion to Clarity）
專案角色： 產品策略顧問（Product Strategy Consultant）、專案管理（Project Management）、使用者體驗與介面設計（UI/UX Design）
專案類型： AI 影像處理、3D 模型生成、客製化公仔電商平台
專案範圍： 產品策略、需求分析、資訊架構、使用者流程、UI/UX 設計、設計系統、AI 友善設計交付、工程協作與設計審查。
01｜我解決了什麼問題？（The Problems I Solved）
GeniSparkle 最初尋求協助，是因為經過約一年的產品開發，網站仍未能充分呈現品牌的核心價值。
然而，經過分析，我發現真正需要解決的問題不只是視覺設計，而是產品定位、使用者體驗、功能架構與工程實作之間缺乏一致的方向。因此，我從產品策略出發，逐步協助客戶解決以下六項核心問題。
① 產品定位偏離創業初衷（Product Vision Misalignment）
- 問題： 舊版網站過度著重 AI 技術與功能展示，逐漸偏離創業初期希望透過科技保存珍貴回憶的理念。
- 解決： 重新檢視產品價值與使用者需求，協助客戶找回創業願景，並將情感價值轉化為清楚的產品定位與網站內容策略。
② 技術功能與使用者需求缺乏連結（Feature–Value Disconnect）
問題： 各項 AI 功能雖然具備技術價值，但使用者不容易理解這些工具如何滿足實際需求，以及最終能夠獲得什麼產品。
解決： 以使用者情境與購買動機重新組織內容，將抽象的 AI 技術轉化為容易理解的應用價值，讓使用者從認識功能進一步理解產品的意義。
③ 缺乏完整且一致的使用者體驗（Fragmented User Experience）
- 問題： 各項功能與操作流程缺乏足夠的整合，使用者不容易理解從圖片上傳到完成實體公仔訂購的完整過程。
- 解決： 重新規劃資訊架構、操作邏輯與使用者流程，串聯圖片處理、3D 模型生成、商品設定、結帳與會員管理，建立一致且可預期的產品體驗。
④ 複雜需求缺乏明確的產品與開發指引（Product & Development Alignment）
問題： AI 使用規則、資料保存、訂購流程及帳號管理等需求涉及多種系統行為，若缺乏清楚定義，容易在開發階段產生理解落差與反覆修改。
解決： 透過需求分析、功能規劃、邏輯流程圖（Logic Flow）、線框圖（Wireframe）及介面流程圖（UI Flow），將複雜需求轉化為工程團隊能夠理解、討論與實作的設計規範。
⑤ 缺乏一致且能支援 AI 開發的設計系統（Design System & AI-Ready Handoff）
- 問題： 原有網站缺乏完整的設計規範與元件系統，增加設計一致性、工程實作與後續維護的難度。
- 解決：在專案初期主動建議採用 shadcn/ui 作為設計與前端開發的共同基礎，建立包含元件、設計變數、Light / Dark Mode 與響應式規範的設計系統。
同時遵循 AI 友善設計原則，規範 Figma 圖層命名與結構，使設計稿能夠更有效地支援 AI 輔助程式碼生成。
⑥ 設計成果與實際開發品質需要有效銜接（Design-to-Development Quality）
問題： 即使完成高品質設計稿，若缺乏明確的工程交付與品質驗證機制，最終網站仍可能與原始設計產生落差。
解決：建立完整的設計交付資料，協助跨國工程團隊理解介面結構與互動邏輯，並在網站實作後進行設計審查（Design Review），確認設計還原度、互動一致性與視覺細節。
目前新版網站已完成實作並進入測試階段，初步呈現高度的設計還原度。
02｜故事的起點：一個逐漸迷失方向的產品（The Story Behind the Transformation）
當技術成為主角，產品卻失去了原本的意義 GeniSparkle 是一家結合人工智慧與 3D 列印技術的新創公司，致力於讓使用者透過照片生成客製化 3D 模型，並將其製作成實體公仔。
然而，在經歷約一年的產品開發後，客戶對既有網站的呈現方式並不滿意。網站逐漸成為展示 AI 技術與功能的平台，卻未能清楚說明一個更重要的問題：
「使用者為什麼需要這項服務？」
對工程團隊而言，AI 影像處理、模型生成與 3D 列印是產品的核心技術。但對一般消費者而言，技術並不是購買的最終目的。他們真正期待的，可能是一份送給伴侶的紀念禮物、一件保存家人回憶的收藏品，或是一個能夠紀念珍貴時刻的實體作品。當網站只強調技術，卻沒有讓使用者理解技術能帶來什麼價值，再豐富的功能也可能失去吸引力。
這正是我最初受邀擔任 UI/UX 顧問時，所面對的核心問題。
我沒有立即開始重新設計網站，面對客戶對既有網站的不滿，我並沒有直接提出新的視覺風格，也沒有將問題簡化成配色、排版或介面美感。相反地，我先從產品策略、使用者需求、購買動機與網站資訊架構進行分析。在顧問報告中，我提出一項核心觀點：
「使用者真正購買的不是 AI 技術，而是科技所創造的情感體驗。」（What users are truly purchasing is not AI technology, but the emotional experience it delivers.）
我進一步以 4W2H1E1R 框架重新檢視網站內容，從使用者為什麼需要產品、能夠獲得什麼、如何操作、需要多少費用，到最終成果與可能風險，建立更完整的產品溝通策略。這份報告的目的，不只是指出網站有哪些問題。而是協助客戶重新理解產品應該為誰創造價值，以及如何讓使用者感受到這份價值。
03｜重要轉折：找回被遺忘的創業願景（Rediscovering the Original Vision）
「我忽然想起有一份創業簡報！」在閱讀我的顧問報告後，客戶於討論過程中突然提起，隨後，客戶主動將 2023 年的創業簡報分享給我。當我們重新檢視這份簡報時，發現其中的核心理念，與我在顧問報告中提出的產品方向有高度一致性。
創業簡報中曾寫下：「Loved Ones Forever」
以及：「We create evergreen memories for your loved ones.」
這些文字清楚表達了 GeniSparkle 最初的願景：透過科技，讓人們能夠以不同的形式保存珍貴回憶，並為重要的人創造具有情感意義的紀念品。而這正是我在顧問報告中，重新強調的產品核心價值。這個發現也讓我更加確信：GeniSparkle 並不需要一個全新的創業理念，而是需要重新連結原始願景、產品功能與使用者需求。
從顧問建議，到完整產品設計這次討論成為合作的重要轉折。
原本客戶僅希望我提供網站 UI/UX 顧問服務，並沒有計畫將完整設計工作交由我執行。然而，在重新確認產品方向後，客戶決定擴大合作範圍，委託我進一步負責產品規劃、專案管理與完整 UI/UX 設計。我的角色也因此從提出改善建議的顧問，轉變為協助產品策略落地、整合需求並推動設計執行的跨職能角色。這段經歷讓我再次體會到：好的設計不一定從畫面開始，而是從理解真正的問題開始。有時候，最重要的設計決策不是創造新的東西，而是幫助團隊重新看清楚原本想完成的事情。
04｜從策略到實現：讓產品真正回到正軌（From Strategy to Implementation）
重新建立產品方向後，下一個挑戰是如何將策略轉化為可以實際開發的產品。我開始整合產品需求、使用者流程、功能邏輯與介面設計，並與工程團隊協作，建立完整的產品體驗。在技術與設計系統的規劃上，我主動建議採用 shadcn/ui 作為共同基礎，讓 Figma 設計元件能夠與前端開發架構保持一致。同時，我將 AI 友善設計原則納入交付流程，透過具備語意的圖層命名、清楚的元件結構與一致的設計變數，提高設計文件的可理解性與可轉譯性。
這使工程團隊能夠運用 AI 輔助開發工具，將設計稿轉化為實際網站程式碼，再由工程師進行整合、測試與優化。在設計交付後，美國工程師也針對完整 UI Flow 給予正面評價，認為產品架構清楚、直覺，且各主要功能之間具有良好的一致性。工程師同時提出 AI 使用計費、儲存行為及帳號刪除等功能問題，協助團隊進一步釐清實作規則。目前，GeniSparkle 新版網站已完成實作並進入測試階段。從初步設計審查結果來看，實際網站與原始設計稿具有高度一致性，後續工作主要聚焦於視覺細節、互動體驗與整體品質的持續優化。
這個專案最重要的成果
GeniSparkle 的轉型不只是完成了一次網站改版。從最初的產品方向重新校準，到完整使用者體驗設計，再到 AI 輔助開發與設計品質驗證，整個過程建立了一條清楚且可執行的產品實現路徑。我所解決的，不只是網站設計問題，而是協助客戶重新建立產品方向，整合設計與工程，並讓原本的創業願景真正落地。