Crypto.com NFT MarketPlace Discovery Experience

A leading NFT marketplace featuring exclusive collections from A-list creators

2022• Crypto.com Product Designer • UX / UI / User Research

Intro

Crypto.com NFT已經取得了非凡的成功，擁有超過700萬註冊用戶，以及超過80萬個獨特NFT可供交易，每月交易額高達1億美元以上。隨著我們平台的擴展和NFT庫存的增長，我們的主要關注點是提供更多信息和工具，幫助用戶做出明智的購買決策。我們的目標是為用戶提供無縫愉悅的體驗，讓他們能夠輕鬆探索和獲得NFT，確保Crypto.com在不斷發展的NFT生態系統中保持領先地位。

My Role

作為Crypto.com NFT專案的Lead Designer，我扮演著從頭到尾推動設計工作的關鍵角色。我與跨職能團隊密切合作，包括產品經理、使用者研究員、開發人員和數據分析師，確保設計解決方案的無縫實施。從進行使用者研究到定義設計策略，我的職責包括創建直觀的界面和流暢的使用者流程，增強整體體驗。

01. Introduction

“How might we enhance the NFT discovery experience to allow users to find the NFTs that fit their needs more easily?”
“我們如何增強NFT發現體驗，讓用戶更容易找到和購買符合他們需求的NFT呢？”

🏢 Project Background

隨著平台快速成長和可用NFT的急劇增加，我們面臨的挑戰是讓擴大的用戶群體輕鬆地找到符合他們喜好和需求的NFT。這個計畫的目標是改善這個過程，提高使用者參與度和滿意度。從商業角度來看，改進的發現體驗直接影響到轉換率，因為使用者更傾向參與一個能夠讓他們輕鬆探索和存取符合他們喜好的NFT的平台。

😫 The problem

我們在用戶購買NFT後，向他們發送了問卷調查，並在兩週的時間內收到了327份回應，這為我們改善整體使用體驗奠定了基礎。透過這些調查，我們深入了解了Crypto.com NFT平台所面臨的挑戰。其中，使用者參與度是一個重要問題，因為使用者反映很難找到符合他們喜好的NFT，進而對平台的收益產生了影響。同時，我們也發現了可用性問題，這導致使用者體驗不如預期，進一步影響了他們的滿意度。

  1. 用戶參與度： 研究顯示，由於當前瀏覽和搜索功能的限制，用戶很難發現符合他們的偏好和興趣的NFT。這種參與度的不足減少了用戶在平台上的停留時間，進一步減少了購買的可能性。這直接影響了平台的收入和增長前景。

  2. 可用性問題： 用戶觀察表明，現有的設計中存在嚴重的可用性問題。用戶在導航頁面、與Asset Card互動、使用Filter以及理解搜索結果時遇到困難。這些可用性障礙創造了次優越的用戶體驗，導致滿意度降低，用戶離開平台的可能性增加。解決這些可用性挑戰對於保留用戶並增強對Crypto.com NFT平台的印象至關重要。

02. Approach

Define

透過廣泛的使用者研究和可用性測試，我與user researchers合作，揭示了Discovery和Marketplace設計相關的關鍵問題。

使用者的問題：

  • 篩選的困難：使用者在嘗試有效地篩選眾多的NFT時遇到了困難。他們希望找到更簡便的方式，以在眾多的選擇中找到相關的NFT。

  • 獲取資訊的挑戰：使用者通常難以獲取他們感興趣的NFT的詳盡資訊。他們希望更容易地獲得全面的資訊，包括銷售量、藝術家的詳細資訊、來源和真實性驗證。這種更便利的資訊獲取方式可以讓他們更有信心地做出決策和評估。

  • 簡潔的小型Asset Card：使用者更喜歡簡潔的Asset Card。這種設計讓他們可以快速瀏覽多個NFT，而不受視覺上的干擾。

此外，我們的後端數據顯示了一個重要趨勢：約60-70％的使用者主要透過移動設備訪問平台，因此在較小的屏幕上提供更簡潔的資產卡是一個重要的需求。

⭐️資產卡在發現過程中扮演著關鍵角色。

綜合之前的研究和觀察，我找出了一些重要的使用者pain points。我的主要關注點是改進兩個主要部分：重建Marketplace和規劃「Top Collection」功能在我們的產品Roadmap中。Marketplace是用戶探索和可能購買NFT的核心地點，包括資產卡和搜索篩選器這兩個重要組件。

Asset Card和Search Filters在整個平台上扮演關鍵角色。我首先專注於Asset Card的設計。Asset Card作為中心，引導用戶從發現階段到購買和管理流程。接下來的部分將詳細介紹Asset Card的設計過程，包括研究、構想、洞察和設計的反覆過程。

 

03. Process

IA. Research - Competitive Analysis

通過全面分析Marketplace上的Asset Card，我評估了10家主要競爭對手，包括Niftygateway、OpenSea、LOOKSRARE和Magic Eden等。這個比較不僅揭示了各平台上Asset Card所呈現的不同資訊，還探討了不同平台如何引導用戶進行NFT的探索和購買過程。

這些比較的見解有助於我們了解用戶期望的資訊範圍，並確定我們的Asset Card上適當的細節內容。此外，它還讓我們能夠識別在呈現NFT探索資訊和購買過程時的共通模式，最終增強用戶的學習曲線。

我確定了應該在我們的資產卡上置於中心位置的關鍵元素。這些元素包括高優先級的CTA，如"Make Offer," "Buy Now," "Shopping Cart," "Detailed Page Button,”，以及重要資訊，如collection name, price, chain icon, and rarity rank。這些決策是基於它們在競爭對手平台上的popularity and primary positioning。

IB. Research - Cart Sorting “What information is important to users when purchasing an NFT?”

我和UX researcher一起，對包括Crypto.com用戶和非Crypto.com用戶在內的多元化7名用戶進行了一次closed card sorting。目的是優先考慮用戶在購買NFT時最重要的信息。這項研究的主要結論如下：

  • 點贊和瀏覽次數不可靠：用戶表示，單單依據點贊和瀏覽次數無法可靠地判斷NFT的價值或質量。他們承認這些指標可能容易被操縱，或者可能不準確地反映了NFT的真正價值。

  • 實用性、創作者、項目和社群元素的重要性：高級用戶強調了實用性的重要性，包括NFT提供的實際或功能價值。他們還重視有關創作者、項目背景和NFT周圍社群的信息。這些因素在他們的決策過程中起著至關重要的作用。

IC. Research Takeaway

重新設計"Asset Card"的主要目標是突顯重要的使用者資訊。為了達到這個目標，我依據不同用戶在購買NFT時的資訊偏好，將他們分為不同的群組。我們的目標是為使用者提供必要的關鍵資訊，讓他們能夠更有信心地做出決策。這包括簡化複雜性，提高清晰度，以及提供符合使用者期望的明確操作按鈕。

舉例來說，對於超越"中級"級別的使用者來說，實用性、創作者背景、專案細節和社群元素等重要資訊，現在位於設計的下一層（詳細頁面）。這種方法創建了一個更清晰的結構，無縫引導使用者在不同頁面之間輕鬆獲取所需的資訊。

II. Ideation

  1. 確立CTA和Info層次結構

    為確保”Asset Card"的設計清晰且直覺，引導使用者執行所需的操作，同時提供他們做出明智決策所需的信息，我確定了CTA和信息元素的層次結構：

    • 主要CTA：這些是我們希望使用者進行的關鍵操作，例如"立即購買"、"提出報價"或"出售"。主要CTA引導使用者進行關鍵互動和交易。

    • 主要信息：這包括"Asset Card"上突出顯示的基本信息，如收藏品名稱、價格（起始出價/固定價格）、版本號和區塊。這些信息使使用者能夠迅速評估NFT的關鍵細節。

  2. 進行設計發想

    在構想過程中，我區分了主要CTA和Info以及次要CTA和Info。主要元素應該出現在"Asset Card"上，而附加信息可能應該出現在次要層次（詳細頁面）上。這種方法有助於簡化設計和使用者體驗。

    此外，我還提出可能解決方案，以便與PM討論，並與工程師評估可行性。同時，還提供了給目標用戶驗證的mockup。

IV. Insights

我使用hi-fi mockups，向各類NFT使用者，包括初學者、中級和進階使用者，快速收集用戶意見。這種方法有助於我們有效確認設計效果。

在測試過程中，我們要求用戶挑選對他們最合理的Asset Card，並基於他們的實際使用情境提供反饋意見。我們還測試不同的CTA和Asset Card上顯示的信息是否容易理解。這些結果考量了不同使用者層級的用戶反應。

因此，我們將僅在Asset Card上顯示重要資訊，其他細節則提供在詳細頁面。這樣的方式有利於初學者，因為他們更傾向在Asset Card層面進行購買，而進階使用者可能會更深入了解細節。

雖然用戶表示對Shopping Cart功能有興趣，但考慮到工程進度和資源情況，我們打算將購物車功能納入未來的Roadmap。這個決策是為了提高整體用戶體驗，同時也兼顧實際的可行性。

V. Design Iteration and Implementation

我收集了使用者和利益相關者的反饋，以改進資產卡的設計。我們選擇了一個獲得使用者喜好的設計，確保了良好的閱讀體驗，並提供清晰的操作按鈕。

  • Asset Card在平台中的整合：我們認識到Asset Card不是一個孤立的元素，而是整個平台的一個關鍵部分，因此我們正在將其無縫整合到整個設計中，確保在整個平台上保持一致性，以及在不同頁面上擴展使用

  • Asset Card的顯示邏輯：清晰的佈局、結構和互動指南有助於我們的團隊共同實施Asset Card的設計。

 

04. Key Design Outcomes

*Noted that below are a collection of various key features and are implemented
*Due to privacy concerns and confidentiality requirements, the data presented is provided in an approximate format

Ia. Asset Card Redesign - Key Card Design

這次的重新設計讓使用者更容易找到所需的NFT，呈現方式更加吸引人且易於瀏覽。它更有條理和直觀地展示了關鍵資訊，例如資產類型、特點和評分。

新的CTA也考慮到不同使用者的喜好，符合他們的購買習慣。使用者現在可以直接從卡片上購買，無需跳轉到詳細頁面再進行結帳。

我所做的改變包括：

  • 重新排列信息層次結構：我調整了信息的層次結構，以改善整體使用體驗。

  • 引入互動元素和明確的CTA：我增加了互動元素和明顯的CTA，以提高使用者參與度並引導他們執行所需的操作。

  • 確保在不同頁面上信息顯示合理：我確保信息在不同頁面上呈現合理，確保使用者可以無縫地navigate，使體驗更具統一性。

  • 通過排版、顏色和尺寸來建立清晰的使用者界面（UI）：我使用排版、顏色和尺寸建立了使用者友好的UI，提高了可讀性和視覺吸引力。

Ib. Asset Card Redesign - New Adaptive Grid Elements

經重新設計的Asset Card以可適應的grid呈現，作為響應式設計，它允許使用者無縫切換不同大小的卡片，優化了在不同設備上的瀏覽體驗。

✨ What prompts the need for a new grid?

我們向MVP產品引入了新的網格系統，為未來的設計和平台擴展奠定了基礎。引入新的grid system後，更有效地運用頁面，成功容納更多信息，同時增強了所有設計的響應能力。

Ic. Asset Card Redesign - Different Page Usage

Asset Card的重新設計革新了不同頁面上的發現體驗，包括homepage, marketplace, profile, drop event, brand, collections，讓使用者能夠輕鬆地探索和採取行動。透過在不同頁面之間實施一致性和協調的設計，Crypto.com確保使用者可以輕鬆地導航，並直觀地與 NFT 互動。

這次重新設計引入了標準化的版面配置和視覺元素到Asset Card中，減少了認知負荷。讓使用者可以流暢地在不同頁面之間切換時，使他們能夠專注於發現和評估 NFT 而不受干擾。

👀 Take a look at the other implemented designs that enhance the discovery experience

II. Top Collections

為了解決歷史價格數據和價格趨勢分析中的缺口，以前阻礙了用戶購買或出售NFT的決策過程，這個新功能補充了可能損害用戶信心和信任的信息不足。通過納入銷售價格和銷售量等重要指標，用戶現在能夠做出明智的購買決策。此外，我們突出了熱門和流行的收藏品，為用戶提供了有關最受歡迎的NFT的寶貴見解，從而進一步豐富了他們的探索體驗。

📈After Launch

我通過Mixpanel分析追蹤用戶行為，觀察到66%的用戶從主頁上的“熱門收藏”過渡到“收藏品”，導致NFT銷售的參與率為34%。

III. Marketplace Page Revamp

市場頁面是用戶可以輕鬆探索和可能獲取NFT的主要中心。在設計和測試Asset Card的同時，我們也驗證了市場頁面的改進。主要目標是確保用戶能夠迅速清晰地導航頁面並搜尋NFT。此外，Top Collection功能的推出作為主要流量驅動器，戰略性地放置在頁面上，以提供用戶選擇並滿足業務促銷需求。以下是市場體驗的三個主要增強功能：

  • 全新的Filter設計：優化的篩選器設計可根據用戶喜好精煉搜索結果。透過改進的篩選類別和互動元素，用戶能夠高效縮小搜索範圍，節省時間並減少挫折感。這個增強確保用戶更快地找到符合其興趣的NFT。

  • Asset Card重新設計：重新設計的Asset Card以清晰簡明的方式呈現重要信息，讓用戶快速了解每個NFT的關鍵細節。透過顯示關鍵指標並提供明確的呼叫行動，用戶能夠高效評估收藏品並執行所需的操作，無論是查看更多詳細信息還是進行購買。

  • Top Collection功能：熱門收藏功能提供由流行且熱門的NFT組成的精心策劃的收藏品，這不僅為用戶節省了尋找熱門NFT的時間，還通過向他們介紹高質量的NFT豐富了他們的探索體驗。這個功能充當了用戶發現符合其偏好的NFT的入口，進一步增強了他們整體的探索旅程。

 

05. EVALUATION

因此，新的Asset Card和Marketplace在短短三個月內經過概念化、開發和推出。

數據洞察：根據Heatmap，市場上的Asset Card可見性明顯提升了32%。透過 Optimizely 進行的 A/B 測試顯示，新的Asset Card相較於以前的設計組，點擊率高出24%，新Asset Card帶來的轉換率增加了18%。在市場和收藏頁面上整合的Filter導致使用率大幅增加了58%。使用者的反饋確認了重新設計的Asset Card及其相關頁面的改進，提高了dicoverbility 和 usability。

結論：數據呈現的結果確認了Enhance Discovery的目標的實現。重新設計有效提高了點擊率，豐富了Markerplace、Search Resulit和Filter的dicoverbility 和 usability，同時增加了二手市場的交易量。

 

06. Conclusion

💡What's next

  • 推出購物車功能（2023年啟用）

    隨著購物車的新功能上線，我們的設計團隊為Crypto.com NFT平台提供了更貼近用戶期望和習慣的使用體驗。根據反饋，立即購買選項可能對用戶而言似乎承諾過大，他們更傾向謹慎考慮。因此，我們推出了購物車功能，以滿足更廣泛用戶行為的需求，提供更具彈性的購物體驗。

  • 未來的創新

    我們將採用新興技術，革新Crypto.com NFT的discovery。可以評估引入一個由人工智慧驅動的推薦引擎，分析用戶行為和數據，為每位用戶提供個性化的NFT建議。甚至整合圖像識別技術，讓用戶能夠根據上傳的圖像或輸入的特徵尋找外觀相似的NFT。

🎁 Takeaway

The Significance of Scoping Bigger, Taking Initiative, and Making Plans Collaboratively

透過放眼更廣泛的視野，考慮更大範疇，我能夠提出對整體使用者體驗更具影響力的設計解決方案。主動參與設計過程，積極尋求貢獻意見和建議的機會，使我能夠引領討論、提出新功能，並有效進行協作。

NOTE
Please contact me at cindyw1211@gmail.com if you are interested in more details of the project.