WORKS

ABOUT

PLAY

CONTACT

Table

Overview

Impact & Achievements

Design Process

The Problem

Research

Content

Key Findings

METASENS

0→1 設計 — NFT 交易平台

中文

English

My Role

Responsible for UI/UX, Logo and Lead designer

Timeline

Aug 2021 - Feb 2022

Team

2 PMs・5 engineers・2 designer

Overview

METASENS 是一個整合 NFT 交易、道具應用與代幣兌換的 GameFi 平台，切入 Web3 市場爆發的時間窗口。

我作為主設計師，從零建立視覺識別與 Design System，主導 UI/UX 架構，並帶領另一名設計師協作完成核心功能交付。

平台已完成階段性營運目標並己關閉，本案例展示之介面為營運期間的最終版本。

Metasens website homepage showcasing three features: P2E gaming, Metaverse, and Bifrost with NFT and real-world experience

Impact & Achievements

從 0 到 1 打造設計基礎

從零建立 Design System、視覺識別與動態交互規範，支援 NFT 交易、多鏈轉換等核心流程，並帶領設計師分工完成功能模組交付。

推動市場成果

設計直覺的 Web3 互動流程，降低新手進入門檻。推動 700 個 Petarush NFT 全數售罄，METASNAKE 首批開賣超額認購 146%。銷售總計 3,500+ 個 NFT，用戶數達 10,000+。

獲獎肯定

平台榮獲 DSA 數位奇點獎「最佳科技創新獎 — 銀獎」。

Problem & Challenge

#1 區塊鏈邏輯與體驗平衡

區塊鏈的底層邏輯和一般金融產品差異很大，錢包操作、鏈上確認、資產轉換等流程對新手高度不友善，容易在關鍵節點產生疑慮和中斷。如何在技術限制內設計出直覺、可信任的體驗，是整個專案最核心的設計挑戰。

#2 多風格素材的視覺承載

平台需同時容納風格各異的遊戲 IP 資產，如何在不顯雜亂的前提下建立統一的視覺系統？

#3 快速迭代下的設計協作

在版本快速更新的環境下，如何與另一名設計師分工又保持一致，同時確保時程內交付？

Qualitative Research

Research 各個 NFT project 如 BAYC、CryptoPunks、Azuki 等項目
各大 NFT 平台：Opensea、LooksRare、Magic Eden 等市場運作機制及流程
GameFi 資訊：Axie、Sandbox、Cryptokitties 等 NFT 屬性資訊架構
進入社群及媒體觀察 NFT 產業趨勢及用戶行為

研究後確立了兩個設計方向。視覺上，主流 NFT 項目幾乎清一色採用 Dark mode，符合元宇宙產品的氛圍基調，這成為平台視覺系統的基礎定調。流程上，大多數平台在錢包操作與資產確認的節點最不友善，也是新手最容易中斷的地方。這兩個觀察直接影響了設計優先序：交易流程重點針對錢包互動加入明確的狀態回饋，降低用戶疑慮；NFT Filter 依「最影響資產價值的屬性」優先排序，幫助用戶快速決策。

策略

打造跨 IP 互通的元宇宙遊戲中心：產品核心策略圍繞「資產（NFT）賦能」及「跨 IP 生態」，透過打造元宇宙遊樂園，一個 NFT（One-for-All）可以遊玩平台各類遊戲的遊戲體驗，玩家能無痛進入 Web3，打破遊戲資產的生命週期，企業也提前佈局 Web3 市場。

對 2B，降低進入 Web3 門鑑，提供一個平台可以發行 NFT，邀請不同的遊戲廠商加入，累積平台價值
對 2C，提供交易平台讓遊戲資產流通

多 IP NFT 拍賣與交易市場：提供跨 IP NFT 發行及拍賣的交易平台，玩家可以在平台上進行交易、鑄造、開盲盒、跨鏈等等
P2E 體系：透過直覺介面流程，降低 Web3 交互門檻，提供玩家掌握 P2E 的產出，建立長期參與的動力
資產賦能：透過 P2E、使用道具及繁衍流程，玩家可以為自己資產賦能，提高市場活躍度及交易誘因

Metasens NFT offer flow showing make offer form, MetaMask signature request, and done confirmation for Ancient Spirits SSR

NFT 出價流程：從輸入金額到時間設定完成，在等候時間給予提示以降低用戶憂慮

NFT 詳情頁：以用戶最在意的資訊排序，加速用戶購買決策，為平台及賣方帶來收益

設計流程概要

市場研究分析：分析 Opensea, Axie, Sandbox 等市場主流產品，解構 P2E， NFT 及錢包交易機制
需求整合：與 PM 協作梳理產品規格，並與工程團隊深入對接，確保 UI 流程能符合區塊鏈技術流程（如錢包簽署、鏈上確認等邏輯）
建立設計框架：確立品牌視覺識別，並從零到一打造設計系統，為長期的功能迭代打下基礎
迭代與交付：每週迭代，確定時程及交付

設計團隊職責：

品牌視覺與體驗：主導 Logo 提案及定義、設計活動 Landing page 提高轉化率，吸引玩家進場
Design System：定義色彩、字型、元件庫、微動畫，可持續擴展功能的設計系統以降低開發及維護成本
產品架構：規劃 flow 及 wireframe，簡化流程降低用戶認知負擔，製作 Prototype 進行測試，透過反饋進行調整金

透過設計元件庫，降低團隊開發成本，提高一致性

Metasens PetaRush NFT whitelist mint at 0.2 BNB and PhantaBear 3D claim event pages with countdown timers

模組化活動頁，為團隊省下重複的工作，解決外部問題

優化動態交互體驗，緩解鏈上交易等待的焦慮感，給予用戶正面回饋

NFT detail page

Metasens mint modal for PT Ticket showing quantity selector, unit price 1 BUSD, and confirm button

Mint with dialog modal

Purchase process - approve token

專案裡提出不同的提案，找出共識並落地

Key Finding & Learning

Web3 進入門檻的轉化關鍵，在 NFT 交易中，使用者最常流失在錢包操作與資產轉換的路徑裡。
秉持目的導向設計，好的設計不是天馬行空，是帶有目的，在技術框架內找到最優解，確保產品準時落地。
模組化開發與效能管理，以 Design System 為團隊共識，主導核心視覺與組件規範，透過平行分工指導夥伴同步開發功能模組，有效避免重複作業，提升團隊產能並確保設計的高品質穩定交付。
換位思考，站在設計與技術的交點，與 PM、工程團隊及 Stakeholders 保持透明溝通，在產品商業目標與技術可行性之間取得平衡，確保設計決策具備實施價值。

如果繼續，2026 的我會做什麼？

以 AI 輔助設計不同且具彈性的活動網頁模組，針對不同 IP 合作需求實現高度客製化。在確保視覺品質的同時，大幅降低工程端的開發 Workload，提升營運效率，藉此吸引更多遊戲品牌廠商進駐。
以增長為核心的產品提案策略，緊扣 Acquisition 與 Retention 兩大關鍵指標，透過數據分析與行為研究提出具商業價值的產品提案。不僅優化介面美感，更著眼於透過功能創新增加用戶黏著性與長期的市場競爭力。