Vlad Todirut
Product Designer
INTRO
Clarifying reward mechanics for a product that grew to $150M in Total Value Locked
Mezo is a blockchain product. It’s a Bitcoin Layer 2 built to give Bitcoin a real use, not just something you hold.
To get things started and build early interest and brand equity, we launched a points program to incentivise and reward early participants. People could deposit real Bitcoin and receive virtual points in return, which we called “mats.”
At that stage, the product wasn’t ready yet, so this was a pre-launch campaign.
PRE-REQUISITE
Overview of mats
Before getting into the problems, here’s a quick explanation of mats and why people care about them. Mats were points you earned by using the platform. In web3, points usually hint that something else might come later.
You earned mats by depositing assets and locking them for a set time. The amount depended on what you deposited, how much, and how long you locked it.
You could earn more through referrals, getting a share of the mats your friends generated.
PROBLEM(S)
IA & Design Language
Our Information Architecture needed a bit of work, we kept adding features without revisiting how it all comes together for a new user. We also made some assumptions to begin with that turned out to not be as accurate as we thought.
We also took this opportunity to update our Design Language since our brand also received an update in the meantime, but it was an evolution and not a revolution.
TASK #1
Deposits
My initial assumption was that users would only deposit once or twice. Since deposits were locked for at least three months, I didn’t expect much ongoing activity. Because of that, I didn’t think deposits needed their own page, at least not at the start.
So I placed deposits on the same page as “My mats,” treating it like a control centre where users could do everything.
That turned out to be the wrong call. It added too much mental effort and made it harder to expand deposit features later. Users also behaved differently than expected. Many made multiple deposits, with different assets and bonuses tied to each one.
Solution
The solution here was quite obvious so after a quick card sorting test we came to a quick conclusion, meaning that we didn't do many explorations around it, we knew we had to remove the deposits from the My mats page and make it it's own page.
TASK #2
Referrals
Despite our best efforts and writing a couple of blog posts, there were a lot of questions on our social and community platforms on how referral works and how somebody might get the full percentage bonus.
It wasn’t clear how your friends are connected to your mats, and how they influence your mats score or ranking. So this is something we needed to tackle. We added the secondary friends as a feature after the initial launch, and although we explored some options on how to add that information, we didn’t go back wide enough to understand how it affects the entire perception of the dashboard.
Before
This was a section in a bigger page called My Mats.
Explorations
We did some experimentation around providing clarity through signals & playing around with the UI to find a solution that would cover all the user needs and not introduce any extra confusion. I'm only going to share a couple, but we went wide on this one.
Exploration #1 This was close to our old cards, but the issue was still the same, not enough clarity of what we are communicating visually here, some parts are clear, but the vertical dots seem to cause more confusion.
Exploration #2
This was a direction we tried, and although it shed some light on your secondary friends and what you would get from them, it lacked the clarity on how secondary friends actually work, or provide any hint that the 9% ones are indeed your secondary friends.
Exploration #3
This is where an idea started to form, what if we split the screen in a main content section and a sidebar with actionable items. And this card would show how many you invited, what your current boost is and how far away you are from the goal. Also added an FAQ button for extra info.
This version had some of the clarity that we were looking for, without having too much weight in terms of information overload. Progressive disclosure was the way to go. Initially we considered this as an expandable menu, but that had some unwanted behaviour with elements moving on the screen.
Final solution
With our last iteration in mind, we knew that we found the path, now we just had to iron out the UX and information architecture around it.
So we kept what we had above, but we turned it into a sidebar overlay, triggered by the Friends card, also gave us the freedom to add some FAQ directly on the page.
We still had some questions here around separating the active cards from the inactive ones, the language used with Boost and weather or not the FAQ section was enough.
We also abstracted away the focus on secondary friends that some of our previous exploration had, as this is something you don't really have control over, so it was mostly informational, with some edge-cases there.
TASK #3
Total mats + Liveliness
The solution for our referral/friends didn't come in a bubble, i thought about it in the full context of the page, and the goal of the page was to provide clarity on how your mats accumulate and how to gather more. So with that in mind i experimented with graphs and expanding the data you have for your mats.
In the old interface, you had the details on how many mats you are making from all your friends individually, but not indication of the total.
Your mats from deposits and mats from friends was also quite separated from each other, they seemed like different things that weren’t working for the same goal, this increased cognitive load and caused some confusion.
The solution to break down mats was validated, but how that translated to UI required some fun experimentation.
Explorations
The goal was simple, have 1 big number (your mats) and show a breakdown of those mats on a daily basis. We considered also showing a breakdown of your total mats, but that didn't play well with providing clarity on how your mats accumulation changes over time.
Exploration #1
With the goal in mind, i tried a couple of variations on how we might show the daily breakdown, this was just one of many. Ultimately scrapped this as visually it felt heavy and edge-cases looked a bit out of place.
Exploration #2
Who doesn't like a nice graph?, so we tried it out, ran it against our variations and edge-cases and realised this isn't going to work because most of the time this is only going to be a straight upwards line, it looked good in figma, but in reality it would have been totally different.
Exploration #3
Experimented also with making this a side bar item, but the disconnect with the big my mats number was real, so we scratched it and chose to focus keeping this in the main part of the website.
But i was close with the solution, i knew we needed something familiar, something that instantly made sense.
Final solution
Ultimately i went the path well tested, providing clarity through existing patterns and easily scannable content, is it the most sexy? it's not and it doesn't need to be, it provides the clarity that our users were expecting, so goal reached.
Final layout was the big mats number, a breakdown of how you earn daily, and than a history of how many mats you made daily.
FINAL THROUGHTS
Learnings & changes
I came into this assuming i know the user base, by this time i already had 9 year experience with fintech/crypto crowd, so i was confident in my understanding of them. Bitcoin users turned out to have a couple of particular nuances that made me rethink my approach.
What i would do different if i had to go back, i would give more thought and time on experimenting with making My Friends it's own page as well, and not just one card on the my mats page.
