Project overview

Goals

Metaverse and NFT communities are driven by user activity. Thus, designing a UGC feature is a great way to encourage users - creators, and collectors - to participate in the environment. In this way, we can achieve an ideal where the developers are building the systems, and users are actively contributing to building the ecosystem.

Design Process

Competitive analysis - Craft design ideas - Design implementation - Review & Document

Project Results

Two weeks of work resulted in a design concept of NFT in the form of User Generated Content (UGC) where users can create customized wearable NFTs and the collectors can use them in the MetaNesia metaverse platform.

Problem Statement

MetaNesia as a metaverse platform needed to encourage user activity in the metaverse. Since metaverse and blockchain are user-driven systems, the products still need the participation of users to build the system and environment in harmony.

Background Story

The NFT-Metaverse integration idea is coming from my product manager who found the needs to catch the trend of metaverse gamification. Since we are building MetaNesia as a consumer product, we need to focus towards user-owned model which has been popularized among the Web3-based platform since the end of 2021. The idea is to integrate our two developed product: MetaNesia metaverse and Market Metanesia (NFT Marketplace), into one ecosystem.

Competitive Analysis

The idea has been around recently where metaverse is treated as a "new" model of gaming platform with NFT as the backbone technology. Some examples of these products are The Sandbox which is still in alpha phase at the moment, and the other one is Decentraland which has been already running for some time.

The Sandbox & Decentraland: the earliest and most well-known metaverse platform backed up with the blockchain technology.

I take the Decentraland NFT-metaverse system integration as the primary source of benchmark analysis. It is because they already have full documentation, especially for the end user who take part in the NFT wearables creation. Their comprehensive documentation can be a perfect example to start building our design ideas of the NFT-metaverse integration feature.

Crafting Design Ideas

The original idea is to make a customizable NFT that is fully in user's control. The scope of work is making a category of wearables that can be both traded in the marketplace, and used in MetaNesia, our metaverse "game" platform.

Creating custom NFT

The first thing we want to build of course is the system to integrate our NFT created in the marketplace with the MetaNesia system. With this in mind, ideas can be so broad about how we make the NFT as an exclusive asset in the metaverse environment. Taking the Decentraland wearables system as a reference, we want to build a similar system where third-party creator is freely making their customized NFT wearables and everyone in the ecosystem can utilize it both as an collectible NFT and a "skin" in the metaverse.

The idea is to insert the NFT customization interface in the NFT Marketplace creation screen. Some variables will be added in the NFT creation screen, such as wearables categories and gender, downloadable template and custom texture.

Wearables categories and gender is used to filter out the type of wearables and which gender of avatar can utilize it in the MetaNesia. The categories is divided into Head, Torso, Leg and Foot. In this way, user can choose which kind of wearables they are making and for which gender of avatar it is made

Wearables categories (some graphic assets are taken from Decentraland's library due to the needs of quick concepting)

Since MetaNesia is built on 3d environment, the NFT can be customized by changing its 3d model and texture. For now, changing the texture is sufficient enough while the 3d model can be saved for later. I found the downloadable template in the Decentraland's UGC system is useful. The template can be downloaded and edited by the user to easily change the texture of the wearable NFT. Thus, i adopted this downloadable template concept to our design.

Decentraland's template asset is stored in the Googl Drive folder

Market Metanesia's template can be directly downloaded from the NFT creation screen (with a help of a tooltip)

The last thing to be added is the interface to adjust the custom texture of the wearable NFT. This interface also contains some variables, such as item view, position adjuster and camera adjustment. The goal of this interface is to show the live change of custom texture so user can get the hint of how it will be displayed in the MetaNesia later.

MetaNesia integrated NFT is a new feature that needs to be developed both type of end users: creator and collector. The design ideas for the creator's side is practically completed. Yet, we also need to design the collector's side, which are the users who browse and collect NFT; the buyer.

We need to display theinformation that some of our NFTs in the marketplace is integrated and useable in the MetaNesia metaverse. The simplest way to do this is to show a tag-like information of MetaNesia integration into each items. In this way, the current NFT card will be containing MetaNesia logo in its card and a brief explanation in its description.

Left: item card with MetaNesia tag in the bottom-left (shown on explore page). Right: Item description is added with MetaNesia tag and brief explanation (shown on item detail page)

Implementation

The design ideas are mostly done and the next thing we need to do is craft and integrate the design ideas into Figma.

The integration of NFT and MetaNesia is an addition feature to the current NFT item creation process in the NFT marketplace. Design-wise, we don't have to design this feature from scratch, but by inserting it in the NFT creation screen and adjusting its flow if necessary.

Final design concept of NFT item creation screen after added with MetaNesia integration feature

The other things to be done are tweaking the explore page and NFT detail page with information of MetaNesia-NFT integration, which is done simply by putting logo and brief description. When every page is done, the last thing to do is to connect the pages into a logical flow of MetaNesia NFT creation; from creator perspective and also the process of buying MetaNesia NFT in the marketplace; from buyer perspective.

Final overview of the NFT-MetaNesia integration both from creator and buyer's perspective

Review and Documentation

The design part is done and then it is ready to be reviewed together along with the product manager and developers. We propose the design solution to the product manager to evaluate its business value and presenting it to the developers to understand its feasibility and challenge.

This feature is not live on the website yet. But it is a completed design that will be developed in the future. In that case, the design is documented in Notion. We specify each part of the design process in this document with the goals that future designers and developers will come back to it and effortlessly put the design into reality.

End of the line

The design of the NFT-Metaverse integration system is a complex process of referencing, crafting, and iterating. Even though we started with the best practice in the field - Decentraland wearables -, there are still a lot of things to be considered based on our product uniqueness. In the end, the design process is also a learning process; learning the user needs, technical difficulties, and a neverending cycle of iteration that make our product becomes better over time.

MetaNesia: NFT-Metaverse Integration