top of page
Screenshot 2024-08-19 at 4_edited.jpg

Building Froopyland: 

From Zero to One

How did Froopyland evolve from a casual coffee chat concept into a fully realized and innovative project?

In the summer of 2021, fresh off my time at Temasek, NFTs were becoming a hot topic. Intrigued by this emerging field, I reached out to an alum to learn more. That afternoon, we met at Bird in Hand, my all-time favorite coffee shop in Baltimore near campus. Over coffee, he shared a recent project idea with me. I immediately thought, "This sounds amazing - basically GitHub for NFT creators!"Excited by the concept, I offered to create a quick wireframe. And with that, the Froopyland project was set in motion.

​

 During my time on the team, I collaborated closely with engineers on the product design & engineering prototype and with the business team to develop the pitch deck, which helped secure $750k in funding from investors like Eternal Capital, Klayton, NFTfi, and Formless. I left the project to start my master's program.

 

Since then, Froopyland has undergone a strategic transition to make it easier for builders and creators to connect with communities and NFT holders, working together to create endless utilities for scaling Web 3 social networks.

 

Today, Froopyland has grown to 14.9k followers on Twitter.

Project
Background 

ROLE

Founding Team Member

METHODS & TOOL 

User Research and Personas, Wireframing and Prototyping, Agile Development, Stakeholder Collaboration, User Journey Mapping, Visual Design and Branding, Business Pitch & Litepaper

DATE

June 2021 - September 2022

PRACTICES

 Product Design, Cross-Departmental Communication, Project Management

EVENT

Startup Project

Project Context

As NFTs transition from simple collectibles to complex assets representing rights and utility in intellectual property, the need for platforms that support co-creation and co-ownership in the evolving Metaverse has become critical.​

​

Froopyland was conceived to address this emerging need by serving as a vertical classifier for the Open Metaverse. It aims to bridge the gap between creators and NFT holders, enabling them to collaboratively build and scale Web 3 social networks.

Process

Build something from zero to one.

As one of the founding team members, I played a critical role in taking Froopyland from concept to reality 1.0. In an agile environment, I established a tight schedule to guide the development process, ensuring we stayed on track and met our goals.


I collaborated closely with cross-functional teams, including engineers, designers, and business strategists, to create a clear roadmap. This involved defining Froopyland's strategic position, setting up iterative design sprints, conducting regular team meetings, and maintaining open lines of communication to quickly address challenges and make necessary pivots.

​

One of the key aspects of our process was the emphasis on rapid prototyping and feedback loops. By frequently testing and refining our product, we were able to identify and resolve issues early, ensuring that each iteration brought us closer to a market-ready solution. 

Positioning Froopyland

Foopyland - the Vertical Classifier of Metaverse

NFTs are gradually evolving from collectibles to right and utility ownership in an IP’s master rights. This enables creators to co-create and co-own the creator economy while NFTers grow the Metaverse through an explosion of transformative content and social adoption. They will both gain in the mutual successes of the Metaverse and the Creator Economy.

​​

"The Bottom up Approach to building the Open Metaverse"

- Frank the Tank, Founder of Froopyland

 

Froopyland connects the Creator Economy with the Open Metaverse by creating a vertical classifier that allows easy co-creation and co-ownership of NFT value creation chains. You can think of Froopyland as the incentivisation linkage between NFT owners and content creators, providing transformative content creators the legitimacy of co-creation, and directing incentives from transformative work to original NFT holders.
 

The Current State of the Metaverse and NFT Space

The year of 2021 has seen a breakout of the NFT space and the Metaverse as the barrier for retail investors and typical web 2 users to enter the NFT space is much lower than entering  DeFi. Furthermore, celebrities and brands have been testing water in the NFT space, and companies such as Meta have dived head first into the Metaverse conception to create a VR/AR immersive social network that NFT powers

 

While the current NFT market size if $7B, much smaller than the $160B DeFi market, there is little doubt that overtime the size of the NFT market will overtake that of the DeFi market due to regulatory oversight in the DeFi space and the ease of understanding and accessibility of NFTs for the typical user coming from Web 2. 

 

Play2Earn GameFi represented by Axie Infinity and status-proof NFT pfp sets such as BAYC and Cryptopunk had captured people’s attention due to the phenomenal growth they had presented.The fundamental hypothesis for them revolves around creating a gated garden, setting up entry barriers through the cost of entries and creating scarcity. 

 

Recently, Axie Infinity has seen the income of its scholars plummet below the minimum wage in the Philippines. Cryptopunk and BAYC have seen stagnation in growth. The limitations are apparent, while gated gardens create digital scarcity directly, without innovation in incentive distribution and content creation incentivization, the rest of the world will not be fully engaged, organic demand will not increase. 

 

The expansion of value consensus around NFT Metaverse relies on much broader narratives than status symbols and play2earn. Fundamentally, demand for Metaverse is driven by fun and actual ownership where every NFT is right and content, and the further evolution of the Metaverse revolves around molding interactive experiences that are fun and rewarding for anyone, with collective value aggregating to NFTs as scarce vertical value co-creation chain rather than horizontal sets.

 

Additionally, the nature of on-chain data almost guarantees that the most value-generating system of the NFT Metaverse should be taking full advantage of pan-Metaverse value co-creation through NFT composability, interoperability, and transformation. 

 

Froopyland seeks to build the vertical classifier for the Open Metaverse as a means to greatly simplify the process and reduce the cost of community-driven NFT co-creation.

The Impact of Classification on the Creation of the Metaverse

Every NFT is uniquely identifiable on-chain; therefore, creating value consensus and liquidity for every NFT independently is very difficult. As a consequence, NFT collections become the main anchors for value consensus to form around. This leads to better liquidity for all NFTs in the set. Because every NFT in the set is equal to one another in terms of functionality and relation, such a set can be called a horizontal set. In this way, all NFTs can be classified as a part of a horizontal set in which every NFT is created by the same digital entity and variationsto the same concept. 

 

This way of classification leads to the creation of DAOs and communities by the NFT owners based on the NFT collections. They then seek to create more utility and value for the NFT owner community, such as making games and NFT drops.

 

So far, such NFT drops and games have been ineffective in bringing value to the original NFT set, and for a good reason, they are catering to the same group of holders and not expanding value consensus outwards and attracting more people. Following the horizontal classification of NFTs, the Metaverse will be a bunch of independent NFT set communities that are gated, all competing for limited amounts of attention and capital to make the value of their own NFT set go higher.

Froopyland the Vertical Classification and NFT Composability

Alternatively, NFTs can be classified based on vertical value flow and transformative creation. Every NFT is a piece of content as well as a piece of asset. Content can be transformed and modified to create additional utility for the owner of the NFT. For instance, a Cryptopunk can be transformed into a Sandbox compatible content piece that the owner can experience the Sandbox Metaverse together with. Content can also be combined or split up, for instance, combining ship with gears and character into one NFT. Content can be highly composable and transformative.

 

On the other hand, NFTs are a digital asset. NFTs can be vested with rights that can be valuable, just like those of fungible tokens. NFTs also allow any piece of content to be uniquely identifiable. Combining these, we can make any piece of content into a digital asset, and we can slice and dice rights into ever more granular rights to get more and more people participating in collective content creation while getting a portion of the total value created. In this way, every fan and creator can help create value through transformative work for others, expand the metaverse of a specific NFT or NFT collection, etc. NFT is vertically classified through value creation chains, referencing NFT as a transformation, composition or decomposition of the referenced NFT. This opens up a myriad of better ways of growth for the Open Metaverse as well as better ways to create utility for not just NFT holders and users (demand), but also creators (supply), inducing exponentially more demand for NFTs through NFT composability to speed up the growth of the Open Metaverse.

 

To facilitate this development, Froopyland seeks to build the Metaverse infrastructure that will enable vertical classification for NFT in three modules so as to incrementally increase the scale of the dual sided marketplace between creatives and NFT users.

Three Modules of 
Development

Module 1 - NFT Request Marketplace

The demands for new NFT are significantly impacted by the performance of the crypto market. However, demands for expanding the utilities of NFT were more about having more fun experience, and therefore should be the more non-cyclical types of demand for NFT. Coincidentally, the request marketplace is also intuitive for creators to understand and participate in, and can create quick utility for NFT holders who want to do more with their favorite NFTs or create whole new NFTs. This is a good way to onboard creators and creators DAOs on one side and nft holders and DAOs on the other.

 

The requested NFT can be a transformation that references NFTs on other chains. The referencing is recorded by an oracle and stored in a low-cost decentralized storage that is secure for future referencing and use. One immediate use of referencing is to help NFT holders direct bounties to creators who are the best fits, and vice versa. This will contribute to a reputation system that considers the types of past requests they have taken, their preferences and their performances, etc.

 

This module focuses on creating product-market fit and serves as a ready entry point for any new creators to come onboard the Open Metaverse and start doing stuff that has an immediate impact. It is the point of contact between the Metaverse and the Creator Economy

Module 2 - Reference and Income Sharing 

While Module 1 establishes referencing as a means to establish the relationships between NFTs and provide data points for creator reputation and track record, Module 2 further builds upon the referencing system and makes the holder-maker relationships gradually emerge on-chain with ne of the most critical relationship types being income sharing/value flow.

 

Module 2 seeks to make content and value co-creation simple and clear. Any creator can create an NFT that references other NFTs. By referencing another NFT, the newly minted NFT can be used for both non-profit and r commercial purposes, such as be sold or be leased for profit. However, in the case of commercial profit, they need to share a portion of the proceeds to the holder of the referenced NFT. 

 

Through Module 2, any transformation of content can bring value to the entire community contributing to the same reference tree, and directly benefits the holder of the original NFT. NFT can, thus, serve as an anchor of value for content creators. This allows creators to be a part of any value creation chains, and to contribute content to any house of content knowing that not only have they contributed to a Metaverse community that they like, but they can also monetize their works for others to use or further develop. 

 

NFT holders can also collaborate with creators to push community engagements and exposures to their NFTs through content creation. Through NFT and token economics, NFT holders and creators can collaborate in one big positive sum game where everyone has a stake in the growth of the house of content. This will enable multi-level co-creation and value sharing, and easily incentivize more creators to pitch in while still being able to claim a stake in the expanding house of content.

 

Module 2 centers around the scalability of proven mechanisms to really help bring about a new and effective paradigm for quickly scaling a new wave of crypto native IPs that is community driven and developed.

Module 3 - NFT Fractalization

Whereas Module 1 and Module 2 provide simplicity for creators to jointhe Metaverse and offer the communities a convenient incentive structure to co-create, Module 3 revolves around the needs of the world’s top creators. 

​

Top creators such as Tarantino can mint a full digital ownership NFT and create derivative right NFTs from the original NFT which then can be either auctioned off or given to community members who have shown the strongest willingness and capabilities to develop the IP in the Metaverse. These community members can then start to develop IPs on their own or create their own DAOs and studios as well as further drive rights and issue to their community members and partners to co-create content.

User Research
& Personas

To effectively support the diverse needs within the Froopyland ecosystem, we identified FOUR key personas that drive the platform's collaborative and co-creative processes.

​

Individual NFT Holder

The Individual NFT Holder can authorize Froopyland to commercialize the rights vested in their NFT by allowing others to create legitimate and scarce derivative works. They provide Froopyland with details about specific GameFi projects, chains, or elements they wish to integrate or combine. The holder can then post a Holder Bounty for derivative NFT creation, review content creators' applications, and release funds upon satisfactory completion of the work.

NFT Collection Creator

The NFT Collection Creator can collaborate with Froopyland to co-create derivative projects for their entire collection. By posting a Collection Bounty, they can enlist creators to work on traits or, in the future, full artwork modes. The collection creator provides necessary project details and assets, and Froopyland facilitates the creation of new digital assets or NFTs.

GameFi Team

GameFi Teams can engage with Froopyland to integrate individual NFTs or entire collections into their projects. By posting a Project Bounty, they can partner with content creators to expand their projects (e.g., character, land, weapon). GameFi teams can recruit creators through open applications, seek recommendations, and directly connect with creators for collaboration.

Content Creator

Content Creators can establish their profiles on Froopyland, showcasing their previous work and contact information. They can link profiles from other platforms, and Froopyland can import their existing portfolios. Creators can view and apply for open bounties, submit drafts, and communicate with bounty posters. Upon acceptance of their final work, they receive the bounty reward in their wallet.

Brainstorm & Define the Bounty Marketplace

The Bounty system in Froopyland is designed to match the right content creators with the specific needs of NFT holders and projects across various blockchains. This system supports the creation of new or derivative NFTs, facilitating collaboration and innovation within the Metaverse.

​​

A bounty market could be posted by multiple end users.  

  • Holder Bounty: Created by an individual NFT holder for derivative NFTs based on their owned assets. This could support a specific game or collaborative project.

​

  • Collection Bounty: Initiated by NFT collection creators, this bounty aims to generate a derivative collection or new assets, either for supporting another project or expanding an existing collection.

​

  • Project Bounty: Posted by GameFi teams or other projects to connect with NFTs or collections. This bounty facilitates collaboration for project expansion, such as integrating characters, lands, or other assets.

​​​​

Brainstoming information needed for bounty market...  

Screenshot_2024-08-19_at_11.59_edited.pn

Three Epics

These three Epic Journey encompasses the entire process within Froopyland, from the initial creation of a bounty to the final reward, showcasing the collaborative efforts that bring ideas to life and expand the possibilities of the Open Metaverse. Each epic is supported by detailed user stories, ensuring a clear and structured approach to development.

Epic 1 - Bounty Creation and Management

Users start their journey by creating and posting bounties, specifying details like type, category, blockchain, and reward.

 

This epic covers the entire lifecycle of a bounty, from creation to completion.

Epic 2 - Profile and Reference Management

Creators and bounty posters manage their profiles, ensuring their past work and reputation are visible to others in the market.

 

This epic also includes verifying identities and managing references.​

​

​

Epic 3 - Derivative NFT Smart Contract Standard

As part of the journey, Froopyland is developing a standard for derivative NFT smart contracts, ensuring seamless and secure transactions across different projects and blockchains.​

​

Sketching the Vision

The design process for Froopyland started with rough sketches, where ideas first took shape. These early drafts laid the groundwork for the platform’s layout and user interface. Sketching allowed us to quickly explore different concepts, make adjustments, and fine-tune the design. Building on these sketches, we developed the first set of designs in Figma.

Screenshot 2024-08-20 at 12.36_edited.jp

Marketplace Gallery Listing 

The Gallery Listing allows users to browse and explore a curated selection of NFTs.

 

With intuitive filters and search options, this section is designed to help users efficiently locate NFTs of interest.

Screenshot 2024-08-20 at 12.39_edited.jp

NFT Details & Purchase

The NFT Details & Purchase section provides users with comprehensive information about each NFT, including its history, ownership, and any associated licenses.

 

This section also facilitates the purchasing process, allowing users to seamlessly acquire NFTs directly from the platform.

Screenshot 2024-08-20 at 12.39_edited.jp
Screenshot 2024-08-20 at 12.39_edited.jp
Screenshot 2024-08-20 at 12.45_edited.jp

My NFT Center

The My NFT section provides an organized overview of their collection.

 

Users can access the My NFT under the My Account section.  Additional options include Manage, Burn, My License, and History, allowing users to efficiently handle all aspects of their NFT portfolio.

Screenshot 2024-08-20 at 12.50_edited.jp

My NFT Manage

The NFT Manage section allows users to perform various management actions. Users can stake/unstake, sale/unsell, view active/inactive, and burn.

This section is designed to provide comprehensive control over NFTs, ensuring users can efficiently manage and optimize their assets within the platform.

Screenshot 2024-08-20 at 12.51_edited.jp
Screenshot 2024-08-20 at 12.51_edited.jp
Screenshot 2024-08-20 at 12.51_edited.jp
Screenshot 2024-08-20 at 1.06_edited.jpg

NFT Burn 

The NFT Burn section enables users to remove an NFT from their collection.

Screenshot 2024-08-20 at 1.09_edited.jpg
Screenshot 2024-08-20 at 1.08_edited.jpg

My License

The My License section offers detailed insights into the licenses associated with each NFT. Users can manage and review the rights they hold or have granted, ensuring transparency and control over their NFTs.

 

The licenses can be sorted by various criteria, including recently received, ending soon, price low to high, and price high to low, allowing users to efficiently organize and prioritize their assets.

Screenshot 2024-08-20 at 1.18_edited.jpg

My History

The History section features a clear and organized table that tracks events such as minting, transfers, and sales, along with the associated prices, originating addresses, dates, and time remaining for relevant actions.

 

Users can filter through the history for specific events or details, making it easy to locate past activities. Additionally, the section allows users to toggle between viewing sales records and purchase records, offering a comprehensive overview of their NFT interactions within the platform.

Visual Identity Guidelines

With the initial sketches laying the groundwork for Froopyland’s design, the next step was to establish a strong visual identity that would unify and elevate the platform’s look and feel. This involved creating consistent guidelines for logo usage, color palettes, typography, and overall visual elements to ensure that every aspect of Froopyland’s design reflected its core values and brand personality.

Logo

The horizontal logo was a modification of its original letters, with a little purple thing to enhance the funny & mysterious vibe of the brand. It is preferred to use this style of logo for most of the time. â€‹

 

 

 

 

​

 

​

​

​​

​

​

It is also important to maintain proper spacing around the logo to avoid overcrowding. 

Screenshot_2024-08-20_at_3.05_edited.png
Screenshot 2024-08-20 at 3.02.08 PM.png

​The single icon could be used at browser, as an icon before website's title. It can also be used at where the horizontal logo could not perfectly fit. â€‹â€‹

Screenshot 2024-08-20 at 3.05.05 PM.png
Screenshot 2024-08-20 at 3.05.12 PM.png

Color Pallete

Screenshot 2024-08-20 at 3.23.25 PM.png
Screenshot 2024-08-20 at 3.23.35 PM.png
Screenshot 2024-08-20 at 3.23_edited.jpg

Typography

Screenshot 2024-08-20 at 3.27_edited.jpg
Screenshot 2024-08-20 at 3.27_edited.jpg

Illustration and Graphics Elements

Screenshot 2024-08-20 at 3.30.36 PM.png

The graphic elements include minimalistic shapes and lines that add subtle visual interest without overwhelming the design. Each element will be  strategically placed to guide the user’s attention and enhance the overall aesthetic of the platform.

Illustrations in Froopyland are designed to bring a sense of fun and creativity to the user experience. The whimsical character illustrations, add a layer of storytelling, inviting users to explore and interact with the platform in a more engaging way.

 

These illustrations are consistent with the brand’s tone, ensuring a cohesive visual experience across all touchpoints.

Screenshot 2024-08-20 at 3.30.47 PM.png

From Mid-Fi
to High Fidelity

With the foundational elements in place, including detailed sketches and a clear user interface design, we progressed to the mid and high fidelity prototype stage. During this process, we reached out to relevant stakeholders and investors of interest for iterative feedback, ensuring that the design aligned with both user needs and business goals.

 

​

Below are a few quick snapshots of the Mid-Fi prototype.​

​

Screenshot 2024-08-20 at 3.41.55 PM.png
Screenshot 2024-08-20 at 3.42.29 PM.png
Screenshot 2024-08-20 at 3.42.05 PM.png
Screenshot 2024-08-20 at 3.42.21 PM.png

The design was iterated to provide a more polished and intuitive journey across the platform.

​

Key improvements include a more cohesive color scheme that aligns with the brand's identity and a clearer visual hierarchy to guide users through key actions such as minting, staking, and managing their NFT collections.

In this iteration, we rolled out a vibrant landing page designed to make a strong first impression and clearly communicate Froopyland’s value.

 

We also refined the Marketplace to offer a more detailed and user-friendly browsing experience, with smoother navigation and easy access to key features.

 

However, some user testing and stakeholder feedback pointed out that the design felt a bit too cartoonish, so we'll be aiming for a more professional and cooler look in the next round.

Screenshot 2024-08-20 at 3_edited.jpg
Screenshot 2024-08-20 at 3.51.18 PM.png
Screenshot 2024-08-20 at 3.53.41 PM.png
Screenshot 2024-08-20 at 3.48_edited.jpg

The High Fidelity Prototype

The final high-fidelity prototype included designs for various platforms, covering website, iPad, and phone views. This comprehensive approach ensured that Froopyland would deliver a seamless experience across all devices. The full design could be viewed @ Figma

Marketplace Gallery Listing 

Screenshot 2024-08-20 at 4.21.38 PM.png

When users first enter the Marketplace, they start by connecting their wallet in the top right corner.

 

To help them find exactly what they’re looking for, they can use the filters on the left side of the screen. For specific license details and more information, they just need to click on the NFT image that catches their eye.

(website)

Screenshot 2024-08-20 at 4.21.54 PM.png

(tablet)

Screenshot 2024-08-20 at 4.24.46 PM.png
Screenshot 2024-08-20 at 4.25.05 PM.png

(phone)

View & Purchase NFT

After clicking on an NFT, users can view its specific details and purchase a license for minting. To see detailed information about the license, users can click on "View Details."

 

The item activity section will display the transaction history for the license associated with that NFT.

Screenshot 2024-08-20 at 4.41_edited.jpg
Screenshot 2024-08-20 at 4.42.41 PM.png
Screenshot 2024-08-20 at 4.43.16 PM.png
Screenshot 2024-08-20 at 4.42.50 PM.png

Account Management: My NFT & 

License Managment

Under the "My Account" area, the "My NFT" section provides a comprehensive overview of your digital assets. Within this section, the "Available NFTs" tab displays NFTs that are ready to be minted. The "Commercialized NFTs" tab showcases NFTs that have already been licensed for commercialization.

​

To turn an NFT into a commercial asset, simply click the "Start Licensing" button. This feature streamlines the process of commercializing your NFTs, making it easy to unlock additional value and opportunities from your digital assets.

​

​In the License Management section, users are prompted with the option to "Approve Your License Contract" to stake their NFT. Once approved, users can proceed by clicking the "Stake" button to initiate the creation of licenses for their NFT. The licensin process is designed to be straightforward and intuitive, ensuring a seamless experience for users, as shown on the right.

Screenshot 2024-08-20 at 5.17_edited.jpg
ezgif-4-c898caba17.gif
Screenshot 2024-08-20 at 5.33_edited.jpg

NFT Burn 

Users can choose to burn individual NFTs by clicking the "Burn" button beneath each asset, or they can opt to burn all NFTs at once using the "Burn All" option at the top.

My License

Users can easily sort their licensed NFTs by various criteria, such as recently received, ending soon, or price. By clicking on an individual NFT, users can access detailed information about the license, including the start date, expiry date, and any associated terms and conditions. This section is designed to give users full control and visibility over their licensed NFTs, ensuring they can manage their assets effectively.

ezgif-4-252e443b07.gif
Screenshot 2024-08-20 at 5.41_edited.jpg

My History

The "My History" section provides a detailed record of all actions and transactions related to your NFTs.

​

The Pitch

Here is our pitch deck.

The pitch was developed alongside the product, allowing us to build an investor network and continuously gather feedback from them throughout the process. Click  below to view one of our old pitch decks.

Screenshot 2024-08-20 at 5.55.11 PM.png

Reflection

Working at a startup is like wearing multiple hats

You have to be adaptable, quick on your feet, and ready to tackle challenges from all angles. 

​​

​

​One of the biggest lessons I’ve learned is the importance of a lean process. With limited resources and time, it’s all about focusing on what really matters and being able to pivot quickly when needed.

 

Continuously gathering user feedback has been another key part of our approach. It’s easy to get lost in the excitement of creating something new, but real insights from users keep us grounded. Listening to their feedback has not only helped us improve our product but also ensured we’re creating the right product.

What I learn ...

Balancing the need to design with perfect details while managing priorities

... has been an ongoing challenge. There is a fine line between striving for perfection and knowing when to move forward. I’ve realized that sometimes, good enough is good enough—especially when it allows us to test, learn, and iterate faster.

©2024 by Xi He.

bottom of page