NFT 兌換協議 創造 Web3 實際應用﹑開拓多鏈電子商務

RE:DREAMER 是台灣專注 Web3 技術應用的新創公司,致力於將 NFT 與實體零售場景無縫整合。透過自研的 "NFT 兌換協議(Protocol)",企業能如同串接 PayPal 一般,直接於原有的 Web2 系統中導入 Web3 功能,進行商品/NFT 的自動核銷、流通與回溯。該協議於 2023/5/16 被以太坊社群正式採納為全球第 67 號 ERC 標準(ERC-5679),成為台灣首支成功制定國際標準的 NFT 協議開發團隊。


我作為團隊中唯一的設計師,獨立完成了 4+ 產品的 UIUX 設計,橫跨 App、Web 與後台平台;同時支援超過 3+ 大型活動的主視覺與配套應用設計。

這些設計不僅實際落地,累計吸引了 20萬+ 用戶參與互動,讓複雜的 Web3 技術,成為一般人也能直覺使用的日常工具。

團隊

2 Product manager、1前端RD、1後端RD兼App RD

產品

NFT 兌換平台 web、後台管理 web、NFT 核銷 App、NFT 一番賞 web、鏈上交易活動查詢 web

客戶

The Remade、GIGABYTE 技嘉科技、SYNTREND 三創生活

行業

Web3

Services

Web3, NFT, B2B2C

時間

2023-2024

團隊

2 Product manager、1前端RD、1後端RD兼App RD

產品

NFT 兌換平台 web、後台管理 web、NFT 核銷 App、NFT 一番賞 web、鏈上交易活動查詢 web

客戶

The Remade、GIGABYTE 技嘉科技、SYNTREND 三創生活

行業

Web3

Services

Web3, NFT, B2B2C

時間

2023-2024

專案分享1

NFT 商品兌換平台設計(C 端)

NFT 商品兌換平台設計(C 端)

✦ 專案背景

REDEEM Passport 是一款以 RWD 網站形式打造的 NFT 商品兌換平台,目標是讓非加密原生用戶也能像在 Web2 網站般直覺操作:瀏覽商品、選擇 NFT、點擊兌換,即可完成兌換程序。

✦ 負責項目

🔎 研究/訪談

與 RD、BD 釐清商業目標與需求。

進行用戶訪談、情境觀察與可用性測試。

找出 B 端與 C 端的核心痛點與潛在機會。

🗂️ 體驗規劃

依研究洞察建立使用情境。

繪製資訊架構與 Wireframe,驗證關鍵路徑。

與跨部門確認流程、優先順序與驗證計畫。

🎨 設計

依核定 Wireframe 於 Figma 完成高保真設計。

應用設計系統並建立可重複使用的元件庫。

與前端協作,確保設計規範可落地。

✅ 驗收 / QA

依設計稿逐頁檢測頁面與互動是否符合規範。

列出差異與修正建議,追蹤修正進度。

進行最終可用性檢測,確保體驗一致性。

✦ 代表合作案例

THE REMADE 品牌發行的 NFT 系列 "E-DAMER" 兌換客製手工球鞋,使用 REDEEM Passport 完成流程並可追蹤轉售抽成。

騰加智能販賣機導入系統,使用者透過平台獎NFT轉換為 QRCODE,即可現場兌換商品。

✦ 業務目標 / 需求

打造一個 降低 Web3 門檻 的 NFT 商品兌換平台

幫助品牌在 零售場景導入 NFT,串連實體商品、虛擬商品與後續轉售抽成

✦ 洞察

如何讓非加密原生用戶,能在 不理解鏈與錢包細節 的情況下,仍能快速、順利完成 NFT 商品兌換?

✦ 研究

  • 「用戶不是想學區塊鏈,而是想完成兌換」

  • 凡是需要用戶「判斷鏈或授權次數」的流程,都會直接造成錯誤與流失

產品觀察

幾乎完全依賴使用者自行切鏈與操作,導致新手流失

用戶測試

1. 重複授權 & 錢包流程停滯,成為最大的流失點

2. 80% 的錯誤回報來自「錢包鏈錯誤」:用戶常停留在 ETH 鏈,忘記切換至 Polygon 鏈,導致抱怨「沒有活動」或「無法操作」

3. 多數人期待操作流程與 一般電商購物 相同(選品 → 加入 → 結帳 → 完成)

品牌方

需要一個 低教育成本 的平台,方便活動推廣

額外說明

額外說明

區塊鏈並不只是一條鏈,而是有多家提供鏈服務的業者,就像電信業有中華電信、台灣大哥大、遠傳等。不同鏈上的活動或 NFT 彼此無法互通,就像中華電信的用戶不能使用台灣大哥大的優惠。

✦ 方案與成效

第一版 授權流程縮短 → 完成率提升40%

簡化簽名授權

簡化簽名授權

將原本需要 3 次的簽名合併為 1 次 → 減少 66% 流程中斷點

將原本需要 3 次的簽名合併為 1 次 → 減少 66% 流程中斷點

單一按鈕設計

部分頁面只保留一個主要操作按鈕,確保流程直覺與零干擾

部分頁面只保留一個主要操作按鈕,確保流程直覺與零干擾

購物車式心智模型

選品 → 點擊 → 結帳,模仿 Web2 電商操作

選品 → 點擊 → 結帳,模仿 Web2 電商操作

第二版

用戶測試中 80% 錯誤集中在「未切換鏈」 → 加入自動切換機制 →錯誤回報率大幅下降(特別是鏈切換錯誤直接歸零)

自動鏈切換

不論使用者在哪條鏈,進入活動頁時自動切換到對應鏈 → 0 錯誤判斷,直接開始操作

不論使用者在哪條鏈,進入活動頁時自動切換到對應鏈 → 0 錯誤判斷,直接開始操作

✦ 反饋

用戶:「完全不用懂技術,跟平常買東西一樣」

品牌方:「導入成本低,幾乎不用花時間教消費者」

學習:Web3 設計成功的關鍵不是功能,而是 消除不必要的學習成本

SPEC-部分

專案分享2

Dream Pass / Uni Pass / HONG KONG DIRL PASS 活動設計整合

Dream Pass / Uni Pass / HONG KONG DIRL PASS 活動設計整合

✦ 專案背景

Dream Pass

配合 NFT Taipei 大型活動發行 Dream Pass NFT,並與三創 POS 系統串接,在 5 天內完成 14,000 次 NFT 現場兌換,為台灣首個線下零售商場整合 Web3 體驗的指標性案例。

Uni Pass

和Taipei Blockchain Week 台北區塊鏈週合作,與 25 家企業品牌、NFT 專案與錢包商共同串聯推廣,建立去中心化資料交換模式(DDE),促進用戶互導與資訊共享,為 Web3 商業推廣創造新典範。

HONG KONG DIRL PASS

與香港數位品牌攜手合作,於香港鬧區實體場域推廣 NFT 商品兌換,總計超過 10 萬人次申請參與,跨國推動 Web3 與零售整合。活動設計結合「兌換 + 體驗」概念,提升品牌互動參與感,並引起當地媒體廣泛報導。

✦ 負責項目

🗂️ 體驗規劃

與 BD 確認活動品牌方需求,包含是否介接 POS 系統、兌換方式與 NFT 規格。


與 BD 確認活動品牌方需求,包含是否介接 POS 系統、兌換方式與 NFT 規格。

🎨 設計

按照品牌方風格設計活動整體視覺與 NFT 專屬網站設計。

產出展場主視覺與印刷配套應用設計。

✅ 驗收 / QA

確認系統風格與兌換流程是否符合品牌方需求。


確認系統風格與兌換流程是否符合品牌方需求。



確認系統風格與兌換流程是否符合品牌方需求。

✦ 現場展示 ft.智販機

成果

  • Dream Pass 吸引 70% 新會員註冊,CPA 僅為業界平均的 50%

  • Uni Pass 建立跨品牌 NFT 用戶互導的初始模型,拓展平台影響力

  • HONG KONG DIRL PASS 成為跨國 NFT 零售整合的示範案例,提升品牌與技術在國際市場的能見度

團隊

Pulse Fitness

2 Product manager、1前端RD、1後端RD兼App RD

客戶

Pulse Fitness

The Remade、GIGABYTE 技嘉科技、SYNTREND 三創生活

行業

Fitness & Wellness

Web3

Services

Branding, Identity

Web3, NFT, B2B2C

時間

2022

2023-2024

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