Mercata VIP Program Design
​CHALLENGE:
​
Since Blockapps is a blockchain-based tech startup, we need to launch this project quickly.
I have just two weeks to design the initial draft of the landing page and the VIP badge.
​
I joined this project at June of 2024. Our platform is seriously lacking salespeople but we are a Web3 marketplace that can buy and sell. Compare with other NFT Web3 platform, we are focusing on doing unlock real world assets on the chain. But, we don’t have enough inventory to attract customers to stay and lack brand awareness to increase new users. So we designed this reward program to solve this problem. So, yes VIP reward program is a product and but also a tool to boost sales.
​
RESULT:
​
I started to conceive and design it in July, and the entire VIP program was launched on August 26th.
​Here are a few Season 1 stats (from twitter)
• 4M+ STRATS distributed • 500K+ STRATS earned by 50+ users • 440 STRATS average per user
• 100+ RWAs bought with STRATS • 100+ items redeemed using STRATS
​
​
​
​​​​
ROLE:​
​
I am the only designer in this team, so I was responsible for all graphic design/ wireframe design / UIUX Design / Feedback Analysis / Social Media Graphic design Support and also need to create document for software engineer provide guidance for implement.
PROCESS:​
​
Define -> Ideate -> Prototype -> Test -> Feedback collection -> Iteration
FIRST STEP: Define Target Audience​
​
Platform existed users, Web3 Enthusiast, Crypto community members, and non-web3 members.
After we defined our main target audience, we needed a VIP reward badge.
​​
We consider the VIP program both a product and a service. When users purchase the VIP badge, they unlock access to exclusive events, services, weekly airdrops, and monetary rewards (STRATS).
​
SECOND STEP: IDEATE FUNCTION REQUIREMENTS
​
1. Task Completion & Rewards
Assigning small, achievable tasks and rewarding users with STRATS provides instant gratification.
Offer a one-time STRATS reward for completing challenges, introducing users to ongoing engagement features. Examples include following Mercata on social media, completing registration, visiting the marketplace, making a purchase, and setting rewards based on user engagement.
So, I designed a small pop up window to simplified and guide user to complete their tasks.
2. VIP Badge
A VIP badge visibly rewards users for their engagement. This gamified aspect, where levels or badges reflect increasing status, can turn platform interactions into a more rewarding experience.
Question: "DO WE NEED TO PUT IT INTO REAL PHYSICAL PRODUCT?" "What kind material texture that we should choose for this badge? Metal? Gold?" " What kind style?"
As a only one branding designer in this team, i decided to followed the UI design trend in 2024 and designed entire VIP card in glassmorphism style in dark purple color and with gold stroke border.​​​​
Design process and concept video
Token Design
Before I joined the team, STRAT was merely a concept, which may have caused confusion for users and customers about what STRATs actually are. As Mercata's native token (currency), I designed and transformed it into a tangible, visual product. So, it is the evolution ( design process of Mercata native token)
I designed 20 variations before the final decision. ​​​​
I made a prototype to do the testing before the product team launched this product. Soon, I and the co-founder realized it was not intuitive enough, and we wanted this product to correspond with the Nav bar icon and let the user know where to deposit the money.
NOW! PROTOTYPE!
Present a VIP Badge to Enhance Visual Appeal
Key feature and present
"How to earn Strat"
gamification feature
Pop up window
and guide user to complete their tasks
Explain what a VIP reward program is and provide another CTA to redirect users to the VIP badge purchase page.
FAQ section
Image section and an action button lead user jump back into header (save user's time on schooling all the way back)
Low- Fidelity Prototype
NEXT STEP: Branding
Initially, the marketing team decided to use gold as the primary color for the VIP program to reflect exclusivity and special status. And i followed their decision and used this color scheme to produce the first initial landing page.
However, I soon recognized there was a problem: branding inconsistency because it was a part of Mercata marketplace and its brand colors is a tech purple gradient. So, I adjusted the colors.
But, it is still a part or page under the Parent company and host by blockapps.net. So, i still have to keep it in light mode to keep brand consistency.
​
​
​
​
Video Prototype
.jpg)
annotation for front end engineer
3. Referral System
Users can generate unique referral codes from the referral program and to invite new users.When new users sign up using a referral code, both the referrer and the new user earn a designated number of STRATS tokens.​​​​
3. Push Notifications and Email Reminders
Send push notifications and email reminders to re-engage users, informing them about expiring rewards, low-inventory alerts, and new VIP benefits. and I collaborated with marketing team and design some graphic to support.
​
4. User Feedback Collection
after VIP program launched, we participated Blockchain Futurist Conference 2024 | Toronto, CA and gaiend new users. So, I decided it it time to collecting users feedback and hear user's voice. I designed a motion graphic to make entire feedback survey more friendly and fun.
​
​
5. Iteration
I soon noticed a problem: new users don't know what STRATS is, and they don't understand how to redeem their product after completing the transaction (due to the specifics of blockchain). I added a "What is STRATS?" section and designed flows for "How to Redeem Your Product" and "How to Become a Seller" to guide users in engaging with our platform
​
i designed a pop up window in the blockapps' page to increase the convert rate.
​
​
​
