Dashboard with profile and active quest on desktop and mobile

The main dashboard, where users can connect up to ten wallets, fill out their profile, and view their gallery of community tokens.

The challenge

CPG needed a custom product that would help them manage their web3 community. They wanted to:

Users can log into a branded dashboard, create a profile, and stake community tokens. The app supports tokens on Ethereum, Polygon, and POAPs. Staking works like collecting interest in a bank account—by staking their tokens, members earn community points, accumulating daily. They can then use these points for rewards like physical merch, access to events, and early or exclusive access to product releases.

A video demo from an early build of the app.

Mockups of a social feature to follow other community members

The MVP of a social feature allowing users to find and follow other community members. It also provides an incentive for users to add their Twitter to their profile in order to be displayed. Starting with Twitter, this could be expanded to include other data—like tags for location, profession, and links to other social profiles—to serve as a directory and communication hub for members.

Empty states of the gallery

Graceful empty states for the profile. To view their gallery, users needed to “complete” their profile by adding an email address (left). If a user had no community tokens, they’d be presented with ways they could participate (right).

CPG’s community has three tiers, with membership held by NFTs:

We wanted to make sure the most valuable members felt the weight of their membership in their rewards points, but at the same time, allow anyone who cared to participate in free community events to sign up and be eligible for awards. As a result, higher tiered tokens earn significantly more points than free tokens.

Leaning into the points system, we added gamification features, like the ability to complete quests to earn additional points, and introduced levels to give a sense of progress and achievement.

Examples of quests

Examples of potential quests.

Design explorations of quests feature

Design explorations of how to display new quests.

Design explorations of points and leveling

Design explorations of how to display points and level progression.

Balancing web2 and web3 experiences

To reduce technical complexity and avoid security risks, we decided to go with a soft-staking approach. Traditional staking often requires multiple on-chain interactions that cost the user gas fees. More importantly, it also puts their NFTs at risk by locking them into a contract, out of their custody. If that contract were to be compromised, they’d lose their assets. Instead, users would soft-stake simply by issuing a gas-free signature using their wallet(s) that held the appropriate NFTs. This accomplished the goal of proving token ownership, but with a smoother staking experience.

Screenshots of WalletConnect customization

WalletConnect’s default dialog (left), customized to fit the CPG brand (right).

Add wallet flow

Users can add up to ten wallets. All they need to do sign a message proving ownership.

Delete wallet flow

Flow to unlink wallets, with additional friction added to ensure users understand the consequences of deleting.

Admin dashboard and points management

Community managers needed a way to manage their rewards program within the app, so we built an admin dashboard for them.

Here, they can add and remove tokens that are supported by the app, and importantly, manage the rewards structure around specific tokens. As they experimented with token drops and ensuing rewards, we learned a great deal about what works and what doesn’t—in particular, we learned about ways users could abuse rewards, and so we built safeguard features to prevent undesired behavior.

Adding a new collection from the admin dashboard

Adding a new collection that users can to earn points for holding. After entering the contract address, we automatically pull the remaining on-chain data to help the user verify they’ve entered the correct address.

UI of different ways to customize point rewards

Admins can customize how collections earn points, and add in safeguards to prevent misbehavior.

We added multiple levers for them to customize the rewards experience:

Viewing POAP details from the admin dashboard

Admins can add POAPs by their Event ID, and view details for POAPs they’ve already added.

While CPG would occasionally release free new token collections, these were often high-effort productions. For recurring events like their weekly guest speaker series, they would more commonly issue POAPs, which made perfect sense as a lightweight solution. This allowed them to quickly give users an on-chain proof of attendance, and reward community participation. Rather than treating each POAP as its own collection, we lumped them into one collection that could be managed together.

Administrators can also download a raw data export of user data and their points, to be used for marketing segmentation, points analysis, or community events like raffles and giveaways.

Managing another admin’s permissions

Admins can invite other teammates, and manage their permissions.

Blanklabel customization

Member engagement is valuable to every web3 community. Because of this, we built the product with blanklabeling in mind. By allowing for a simple swap of colors and background assets, the app could be repurposed to fit any brand. This also opened doors for new revenue opportunities to sell the app as a loyalty SaaS.

Example mockups of blanklabeled app for other NFT communities

Examples of branded blanklabel opportunities for other NFT communities.