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

Define

Based on extensive user research and usability testing, conducted in collaboration with user researchers, we've uncovered critical pain points related to the discovery experience and marketplace design.

User Pain Points:

1. Filtering Assistance: Users face difficulties efficiently filtering through the large volume of available NFTs. They are in search of a streamlined method to discover relevant NFTs within this abundance of options.

2. Access to Information: Users often encounter difficulties accessing in-depth information about NFTs of interest. They seek more straightforward routes to comprehensive data, including sales volume, artist details, provenance, and authenticity verification. This improved access to data would empower them to make well-informed decisions and evaluations.

3. Compact Asset Card: Users have shown a preference for a condensed view of the asset card. This design enables them to quickly scan through multiple NFTs without the distraction of visual clutter.

Moreover, our backend data revealed a significant trend: approximately 60-70% of users primarily access the platform via mobile devices, making the need for a more compact asset card on smaller screens a crucial requirement.

Following the research and observations mentioned earlier, I identified crucial user pain points. My focus was on enhancing two key components: revitalizing the Marketplace and proposing the addition of a new "Top Collections" feature to the roadmap. The Marketplace serves as the central hub for users to explore and potentially acquire NFTs and features two vital components - the Asset Card and Search Filters.

Both the Asset Card and Search Filters play a pivotal role across the platform. I initiated the redesign process by giving top priority to the Asset Card. It serves as a central hub guiding users from the discovery phase to the purchase and management processes. The following section outlines the process of designing the Asset Card, covering Research, Ideation, Insights, and Design Iteration.

03. Process

IA. Research - Competitive Analysis

Through a comprehensive analysis of asset cards in the marketplace, I evaluated 10 key competitors, including Niftygateway, OpenSea, LOOKSRARE, and Magic Eden. This analysis not only unveiled the diverse information presented on asset cards across platforms but also encompassed an exploration of how different platforms guide users through the NFT discovery and purchasing process.

The insights gained from this comparison helped us understand the range of information users expect and determine the appropriate level of detail for our asset cards. Additionally, it allowed us to identify common patterns in structuring the presentation of NFT discovery information and the purchasing process, ultimately enhancing the user learning curve.

I identified the critical elements that should take center stage on our asset cards. These include high-priority CTAs such as "Make Offer," "Buy Now," "Shopping Cart," and "Detailed Page Button," as well as essential information like collection name, price, chain icon, and rarity rank. These decisions were based on their popularity and primary positioning on our competitors' platforms.

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: Advanced 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.

IC. Research Takeaway

My primary focus for redesigning the Asset Card is to emphasize essential user information. To achieve this, I've categorized users into different groups based on their information preferences when purchasing NFTs. The objective is to provide users with the crucial details needed for confident decision-making. This entails reducing complexity, enhancing clarity, and offering clear CTAs that align with users' expectations.

For example, critical information such as utility, creator background, project specifics, and community elements, particularly important for users beyond the "intermediate" level, is now located on the subsequent layer (detailed page) of the design. This approach creates a more straightforward structure, guiding users seamlessly through various pages, ensuring easy access to the information they seek.

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." Primary CTAs guide users towards key interactions and transactions.

   • 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.

2. Diving into Design Exploration

   During ideation, I differentiated between primary and secondary CTAs and information elements. Primary elements need placement on the Asset Card, while additional information should possibly be placed on the secondary layer (detailed page). This approach helps streamline the design and user experience.

   Additionally, I worked on proposing possible solutions to discuss with project managers and to assess feasibility with engineers. Furthermore, mockups were provided for validation with target users.

IV. Insights

I utilized hi-fi mockups and collected quick user feedback from a diverse range of NFT users, including beginners, intermediates, and advanced users. This approach allowed us to validate the design effectively.

During testing, users were asked to choose the card that made the most sense to them and provide feedback based on their real usage scenarios. We also tested different CTAs and the accessibility of the information displayed on the cards. The results were based on user behavior from beginners to advanced users.

As a result, only critical information will be displayed on the card level, while additional details will be presented on the detailed page level. This approach caters to beginners who prefer to buy at the card level, while advanced users tend to dive deeper into the details.

Although users expressed a preference for a shopping cart, considering engineering timelines and resource availability, we plan to launch the shopping cart feature on the asset card in a future roadmap. This decision aligns with our commitment to improving the overall user experience while considering practical implementation.

V. Design Iteration and Implementation

I gathered user and stakeholder feedback to enhance the Asset Card redesign. We selected a user-preferred design, ensuring a smooth reading experience with clear CTAs.

1. Asset Card Integration 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're integrating it seamlessly with the platform's visual language, ensuring consistency throughout the platform.

2. Display Logic of Asset Card: Clear guidelines for layout, hierarchy, and interactions aid our team's collaboration in implementing the 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

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.

The changes I made:

• 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.

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.

✨ 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

🎁 Takeaway

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

By thinking bigger and considering the larger context, I was able to propose design solutions that could make a more significant impact on the overall user experience. Taking ownership of the design process and proactively seeking opportunities to contribute ideas and suggestions allowed me to drive discussions, propose new features, and collaborate effectively.

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