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

01. Introduction

“How might we enhance the NFT discovery experience to allow users to find the NFTs that fit their needs more easily?”

02. Approach

Understand, Explore, Materialize

The team and I conducted extensive user research to inform our design decisions. We engaged with a diverse range of participants, including NFT enthusiasts, collectors, and casual users. We employed various research techniques such as in-depth interviews(2 virtual interviews with 12 participants), usability testing(2 rounds with 5 participants using Figma Prototype), and surveys(Google Surveys 327 responses) to gather qualitative and quantitative data.

1. User-Centered Design: I conducted user interview with user researcher to better identify pain points and areas for improvement in the current discovery experience, and explore potential new features or enhancements to the platform.

2. Research-Driven Strategy: Along with the competitive research and the results of the user interviews, I then developed a feasible and actionable UX strategy and roadmap with product managers.

3. Usability Testing: In order to validate ideas, I had the iterative process of observing, interviewing, and analyzing user behavior and feedback. By gaining a deeper understanding of user needs and preferences, the product can create a more intuitive and effective NFT discovery experience.

Define

I conducted extensive user research and usability testing in collaboration with researchers to uncover issues related to the overall discovery experience and marketplace design. Through this in-depth exploration of the Crypto.com marketplace, I gained valuable insights that provided a comprehensive understanding of the user experience, identifying areas within the design that can be enhanced.

• User seek helps separating signals from the noise: Users expressed the need for assistance in filtering and sorting through the vast amount of available NFTs. They desired a more streamlined and efficient way to discover relevant and high-quality NFTs amidst the noise.

• Link users to where more information can be found: Users expressed frustration when they couldn't find detailed information about the NFTs they were interested in. They desired clearer pathways to access additional information, such as artist details, provenance, or authenticity verification and further make informed decisions.

• Request for small asset card: Users indicated a preference for a condensed or smaller view of the asset card, allowing them to quickly scan through multiple NFTs without overwhelming visual clutter.

Based on the research and observations mentioned earlier, I identified critical pain points that users were encountering. I directed my attention towards enhancing three core features: revitalizing the Search and Marketplace, as well as proposing the addition of a new "Top Collections" feature to the roadmap. The Marketplace Page serves as the central hub for users to explore and potentially acquire NFTs. Across the platform, both Asset Card and Search Filters play pivotal roles. To start, I placed priority on redesigning the Asset Card as the initial step in my design approach. Given its pivotal role as a central hub within the platform, it guides users from discovery to purchase and management processes.The following section outlines the process of designing the Asset Card, spanning Research, Ideation, Insights, and Design Iteration.

03. Process

IA. Research - Competitive Analysis

During a focused competitor analysis of asset cards in the marketplace, I thoroughly evaluated 10 prominent rivals including Niftygateway, OpenSea, LOOKSRARE, and Magic Eden. Notably, diverse information was displayed on asset cards across platforms. Some competitors emphasized essential data like artwork, collectible names, and pricing, while others highlighted additional details such as rarity and mint address. This analysis offered insights into the range of information users expect and the level of detail suitable for our asset cards. Comparing competitors enabled the identification of prevalent data and CTAs found on asset card levels, aiding in defining necessary information for upcoming design phases.

I also examined how various platforms guide users beyond the asset card, encompassing purchasing processes and information presentation structure. This approach aimed to identify Crypto.com NFT's shortcomings within the NFT market context and improve the NFT user learning curve. Competitor analysis benefits from offering insights into broader market trends, ultimately streamlining research efforts.

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

Together with the UX researcher, I conducted a closed card sort with a diverse group of 7 users, comprising both Crypto.com and non-Crypto.com users. The objective was to prioritize the information that is most important to users when purchasing an NFT. The key takeaways from this research are as follows:

1. Likes and Views are Unreliable: Users expressed that the number of likes and views alone is not a reliable indicator of the value or quality of an NFT. They acknowledged that these metrics can be easily manipulated or may not accurately reflect the true worth of an NFT.

2. Importance of Utility, Creator, Project, and Community Elements: Users emphasized the significance of utility, including the practical or functional value an NFT provides. They also valued information about the creator, project background, and the community surrounding the NFT. These factors played a crucial role in their decision-making process.

3. Volume and Floor Price are not the most critical factors: While volume and floor price were considered important factors, the research revealed that they were not the most critical factors influencing users' NFT purchasing decisions. Users valued other elements, such as utility, creator reputation, and project significance, more strongly.

IC. Research Takeaway

Informed by these research insights, my primary focus for the Asset Card redesign is to prioritize the information that holds essential value for users. This involves categorizing different user groups based on their preferred information hierarchy when purchasing NFTs. For instance, placing reliable information such as utility, creator background, project details, and community elements – which are especially important for users above the "intermediate" level – in the subsequent layer (detailed page) of the design. This approach aims to create a seamless architecture that guides users through various pages, ensuring easy information access.

The goal is to streamline and simplify the Asset Card's content while providing distinct CTAs that lead to effective NFT evaluation. With this redesign, our objective is to offer users the necessary vital details. This enables them to make confident decisions while enhancing their overall Crypto.com discovery experience by minimizing clutter and maximizing clarity.

II. Ideation

1. Establishing CTA and Information Hierarchy

   To ensure a clear and intuitive Asset Card design that guides users towards desired actions while providing them with the necessary information for informed decision-making, I defined the hierarchy of CTAs and information elements

   • Primary CTAs: These are the key actions we want users to take, such as "Buy Now," "Make Offer," or "Sell" These primary CTAs guide users towards key interactions and transactions.

   • Secondary CTAs: These are additional actions that users can take, such as "Add to Watchlist," "Share," or "Like." These secondary CTAs provide users with more engagement options and social sharing capabilities.

   • Primary Info: This includes essential information displayed prominently on the Asset Card, such as Collectible name, Price (Starting bid/ Fixed price), edition number, and Chain. This information enables users to quickly assess the NFT's key details.

   • Secondary Info: This includes additional information that provides further context or details about the NFT, such as artwork description, artist biography, rarity indicators, or provenance. This secondary information is available for users who desire a deeper understanding of the NFT.

2. Diving into Design Exploration

   When ideating the Asset Card redesign, I took into consideration the valuable insights obtained from previous research. Here are the considerations I made for:

   • Redefining Information Hierarchy and Layering: I restructured the hierarchy of information and how it's layered to improve the overall user experience.

   • Implementing Interactive Elements and Clear Calls-to-Action (CTA): I introduced interactive elements and prominent CTAs to enhance user engagement and guide them through the desired actions.

   • Ensuring Logical Information Display across Different Page Usages: I ensured that information is logically presented and coherent across various pages, guaranteeing a seamless navigation experience.

   • Creating a Clear User Interface (UI) using Typography, Color, and Size: I utilized typography, color, and size to establish a user-friendly UI that enhances readability and visual appeal.

IV. Insights

I leveraged the benefits of hi-fi mockups and obtained quick user feedback from a diverse range of NFT users, including beginners, intermediates, and advanced users. This approach allowed us to validate the design and iterate effectively based on real user insights.

Beginner users provided insights into ease of use and clarity, while intermediate users offered feedback on usability and functionality. Advanced users provided valuable insights into advanced features, customization options, and the overall user experience. This diverse user feedback helped validate the design and make improvements based on different user needs and proficiency levels.

V. Design Iteration

I gathered feedback from users and stakeholders, then discussed it with the design team to improve the Asset Card redesign. This iterative process helps me use valuable insights to enhance the design based on user input and business goals. I simplified design elements and made CTAs stand out for a smoother reading experience. By considering user feedback from different design versions, the team chose the one that fits user preferences best.

1. Integration of Asset Card within the Platform: Recognizing that the Asset Card is not an isolated element but a vital component across the platform, we consider its integration within the overall design. We understand that the Asset Card should align with the visual language, branding, and user interface of the entire platform. This approach ensures a cohesive and unified user experience, where the Asset Card seamlessly blends with other elements and maintains consistency throughout the Crypto.com marketplace.

2. Display Logic of Asset Card: To ensure effective implementation and increase team efficacy, we will provide clear guidelines on the display logic of the Asset Card. This includes defining the layout, content hierarchy, and interaction elements to be included in the Asset Card design. By establishing a consistent and well-defined structure, the design team, product managers, and engineers can align their efforts and work collaboratively to implement the Asset Card across the platform.

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

The redesign improved the way users discover assets by presenting them in a visually appealing and easily scannable format. It showcased key information, (such as asset type, features, and ratings) in a more organized and intuitive manner.

The new Call-to-Action (CTA) also caters to diverse user preferences, aligning with their purchasing behavior. Users now have the option to buy directly from the card level, eliminating the need to navigate to the detail page and proceed to checkout.

Ib. Asset Card Redesign - New Adaptive Grid Elements

The redesigned Asset Card with adaptable grids offers a responsive design that optimizes the viewing experience across different devices. It allows users to seamlessly switch between large and small card sizes, improving view efficiency and ensuring an optimal browsing experience.

✨ What prompts the need for a new grid?

I introduced a new grid system to the MVP product, setting the foundation for future designs and the platform's expansion. With the introduction of the new grid, we successfully accommodated more information while enhancing the responsiveness of the design.

Ic. Asset Card Redesign - Different Page Usage

The Asset Card Redesign revolutionized the discovery experience on different pages, including homepage, marketplace, profile, drop event, brand, collections enabling users to seamlessly explore and take action with ease. By implementing a consistent and cohesive design across various pages, Crypto.com ensured that users could navigate effortlessly and interact intuitively with NFTs.

This redesign introduced standardized layouts and visual elements to the Asset Card, fostering familiarity and reducing cognitive load. As users moved between different pages, they encountered a seamless flow, allowing them to focus on discovering and evaluating NFTs without distraction.

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

II. Top Collections

Addressing the gap in historical price data and price trend analysis that had previously impeded users' decision-making process for buying or selling NFTs, this new addition rectifies the lack of information that could have undermined user confidence and trust. By incorporating vital metrics such as Sale Price and Sales Volume, users are now empowered to make well-informed purchasing decisions. Additionally, we've highlighted trending and popular collections, providing users with valuable insights into the most sought-after NFTs, thereby further enriching their exploration experience.

📈After Launch
I tracked user behavior through Mixpanel analytics and observed that 66% of users transitioned from the "Top Collections" on the home page to "Collectibles," resulting in a 34% engagement rate in NFT sales.

III. Marketplace Page Revamp

The Marketplace Page serves as the central hub where users can seamlessly explore and potentially acquire NFTs. As we designed and tested the Asset Card, we concurrently validated the Marketplace Revamp. The primary goal was to ensure users could navigate pages and search for NFTs swiftly and clearly. Additionally, with the launch of the Top Collection feature as a significant traffic driver, it is strategically positioned on the page to offer user choices and serve business promotion needs. Here are the three major enhancements in the Marketplace experience:

1. New Filter Design: The new filter design streamlines the process of refining search results according to user preferences. With improved filter categories and interactive elements, users can efficiently narrow down their search, saving time and frustration. This enhancement ensures users encounter NFTs that align with their interests more swiftly.

2. Revamped Asset Card Implementation: The redesigned asset cards present essential information clearly and concisely, allowing users to quickly grasp the key details of each NFT. By displaying crucial metrics and offering well-defined calls-to-action, users can efficiently evaluate collectibles and take desired actions, whether it's exploring more details or making a purchase.

3. Top Collection Feature Implementation: The inclusion of the top collection feature provides users with curated collections that showcase trending and sought-after NFTs. This not only saves users time in finding popular items but also enriches their exploration by introducing them to high-quality collectibles. This feature acts as an entry point for users to discover NFTs that resonate with their preferences, further enhancing their overall discovery journey.

05. EVALUATION

Consequently, the New Asset Card and Marketplace were conceptualized, developed, and launched within a span of three months.

Data Insights: The visibility of Asset Cards on the marketplace experienced a notable 32% surge according to heatmap analysis. A/B testing conducted through Optimizely demonstrated a 24% higher click-through rate for the new asset cards compared to the previous design group, with an 18% conversion rate stemming from the new asset card. The integration of the New Filter across the Marketplace and Collection Page led to a substantial 58% increase in usage. User feedback substantiates the improved discoverability and usability of the redesigned Asset Card and its associated pages.

Conclusion: The outcomes rooted in data affirm the accomplishment of the goals set for enhancing discovery. The redesign has effectively elevated click-through rates, enriched the discoverability and usability of the marketplace, search results, and filters, while simultaneously amplifying transaction volumes within the secondary market.

06. Conclusion

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