Scope & timeline

  • 3 個核心功能

  • Game-fi, NFT 交易平台

  • 7 個月

  • 3 個核心功能

  • Game-fi, NFT 交易平台

  • 7 個月

Industries

Web3

Web3

Team

  • 5 位工程師

  • 2 UI/UX 設計師

  • 2 專案經理

  • 5 位工程師

  • 2 UI/UX 設計師

  • 2 專案經理

My Role

  • Lead UI/UX designer

  • Lead UI/UX designer

Contribution

  • Logo design

  • User interface & experience

  • Visual design

  • Micro-motion design

  • Lead design

  • Logo design

  • User interface & experience

  • Visual design

  • Micro-motion design

  • Lead design

Tools

  • Adobe: XD, Ai, Ae, Ps

  • Figma

  • Adobe: XD, Ai, Ae, Ps

  • Figma

Overview

METASENS 是一個整合 NFT 拍賣交易、道具應用與代幣兌換的 GameFi 平台。我在此專案中主導整體設計,確保視覺與操作的一致性;並與設計師夥伴共同完成核心功能設計,與團隊一起成功推動產品從概念到最終落地。

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

Metasens logo with orange diamond icon and bold black wordmark
Metasens website homepage showcasing three features: P2E gaming, Metaverse, and Bifrost with NFT and real-world experience

Design

Metasens NFT detail page for Ancient Spirits SSR #1117661, Fire class Genesis NFT listed at 0.02 ETH on Ethereum

NFT detail page

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

Mint with dialog modal

Metasens NFT sell flow showing token approval step with MetaMask wallet confirmation popup for Ancient Spirits SSR on BSC testnet

Purchase process - approve token

Metasens brand asset overview including loading screen, logo variants, icon set, mint page UI, and Ancient Spirits minting countdown

策略

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

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

  1. 多 IP NFT 拍賣與交易市場:提供跨 IP NFT 發行及拍賣的交易平台,玩家可以在平台上進行交易、鑄造、開盲盒、跨鏈等等

  2. P2E 體系:透過直覺介面流程,降低 Web3 交互門檻,提供玩家掌握 P2E 的產出,建立長期參與的動力

  3. 資產賦能:透過 P2E、使用道具及繁衍流程,玩家可以為自己資產賦能,提高市場活躍度及交易誘因

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

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

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

設計流程

概要:

  1. 市場研究分析:分析 Opensea, Axie, Sandbox 等市場主流產品,解構 P2E, NFT 及錢包交易機制

  2. 需求整合:與 PM 協作梳理產品規格,並與工程團隊深入對接,確保 UI 流程能符合區塊鏈技術流程(如錢包簽署、鏈上確認等邏輯)

  3. 建立設計框架:確立品牌視覺識別,並從零到一打造設計系統,為長期的功能迭代打下基礎

  4. 迭代與交付:每週迭代,確定時程及交付

設計團隊職責:

  1. 品牌視覺與體驗:主導 Logo 提案及定義、設計活動 Landing page 提高轉化率,吸引玩家進場

  2. 設計系統:定義色彩、字型、元件庫、微動畫,可持續擴展功能的設計系統以降低開發及維護成本

  3. 產品架構:規劃 flow 及 wireframe,簡化流程降低用戶認知負擔,製作 Prototype 進行測試,透過反饋進行調整金

面對挑戰

區塊鏈邏輯與體驗平衡:

  • 挑戰:區塊鏈的邏輯與一般人習慣的金融產品不一樣,對新手操作上相對不友善,容易造成中斷或不信任感

  • 對策:面對如錢包簽署、Gas fee、跨鏈、swap 的滑價等等流程及名詞,透過在適當的地方給說明提示,隱藏非必要細節,只保留重要的資訊,讓用戶體驗順暢。在測試及平台上推出的 NFT 順利售完,驗證了流程體驗順暢

多樣資產的視覺管理:

  • 挑戰:平台目標是「元宇宙樂園」,需承載不同 IP 風格的資產,如何設計一個平台能承載且不顯得雜亂?

  • 對策:介面視覺以中性主題切入,系統化元件,對應複雜的屬性呈現,並放入不同 IP 測試,最後與 skateholder 定案。

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

跨團隊協作及維護:

  • 挑戰:在快速迭代的環境下,需與另一位設計師分工,同時要與 PM、工程端頻繁對接。如何確保產品不會因為分工而產生斷層,並在時程內交付是一個管理挑戰。

  • 對策:我定義設計系統、建立元件庫與排版邏輯作為標準,初期共同研究競品及流程確保成員了解區塊鏈邏輯。消彌設計師間的產出差異,讓開發團隊複用元件,降低重工及提升開發效率,以確保產品功能落地。
    中後期因設計系統降低了重工的時間成本,我可以釋出設計資源協助外部需求如活動視覺、Landing page 等頁面及素材,另一位設計師則繼續開發產品功能。

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

模組化活動頁,省下多數重複的工作

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

協作

作為設計與技術端的橋樑,與 PM、工程團隊及 Stakeholders 保持緊密溝通,確保設計能兼顧產品目標與技術可行性。初期基礎建立後,透過平行分工推進產品,我主導設計系統與核心視覺方向,並指導夥伴並行開發功能模組,保持設計資源的彈性,提升團隊產能及確保設計穩定交付。

成果

  • 從零到一主導: 負責 NFT 交易平台與加密錢包的從零到一的設計,包含 UI/UX、視覺識別,支援 NFT 交易與多鏈資產轉換流程。

  • 市場成功: 設計直覺的 Web3 互動流程,與知名 NFT 品牌 PhantaBear、Demi-Human 合作,推動 700 個 Petarush NFT 全數售罄。另外 METASNAKE 首批 NFT 開賣時,獲玩家超額認購146%,達 293.79 枚以太幣。

  • 獲獎肯定: 榮獲 DSA 數位奇點獎「最佳科技創新獎 — 銀獎」。

James Makone

James Makone

James Makone