Redesigning Freechat Group Earnings
Make Earnings Clear. Make Withdrawals Simple.
I redesigned Freechat Group Earnings to make earnings clear and easy to manage, so group owners know what they earn, where it’s from, and how to withdraw it.
About Freechat & Group Earnings
Freechat is a Web3 social platform focused on privacy, ownership, and open expression. It offers end to end encrypted messaging, lively group chats, live streaming, and short video, all backed by blockchain.
Group Earnings is the place where a group’s revenue is collected and explained. It consolidates income from memberships, creator activity, and ads across networks like Ethereum, BNB Chain, and Base, shows totals, trends, and sources with fiat equivalents, and lets group owners withdraw to their own Web3 wallet while the system handles the correct network route and fee checks.
Timeline
Novmber 2024
(~4 weeks)
Role
Product Designer (Me)
UI Designer
CEO (PM)
CTO
Task
User research
Prototyping
Visual Design
Usability testing
Tool
Figma
Modao
(A prototyping and collaboration tool)
Impact
100%
of group owners check the new feature after launch
80% +
Engagement rate on earnings page visit
9.0
Post-launch internal satisfaction score
What's the problem?
The system scaled.
Freechat expanded from supporting only Ethereum to handling multiple blockchains like BNB Chain and Base. Group owners could now earn in more ways than ever.
Before
Now
Token1
Token3
Token 5
Token n
Token4
Token2
C
C
Ethereum
Freechat
Freechat originally only supported projects using the Ethereum blockchain.
C
C
C
C
C
Ethereum
Base
BNB Chain
Ethereum
Chain n
Freechat
Token 1
Token 2
Token 3
...
Token n
Freechat works across multiple blockchains, letting creators earn and withdraw from different networks like Ethereum, BNB Chain, and more.
Then, the experience fell behind.
While the backend supported multi-chain earnings, the interface left group owners confused. They could not easily tell where their income came from, how much they had made, and how to withdraw across chains.
Why does this matter to the business?
More Active Groups, More users, More Revenue
After analyzing the business model, I identified a risk at the Delight stage: when group owners cannot clearly see or easily withdraw their earnings, they lose motivation to grow and optimize their groups.
This slows growth, reduces member engagement, and limits the platform’s revenue potential.
Project Goal
How might we motivate group owners to actively grow and optimize their groups by making earnings easier to understand, trust, and act on?
User research results & insights
Who uses Group Earnings and what do they need to do
For active group owners on Freechat, there are two jobs when using Group Earnings.
Jobs
See what I earned and what drives it
Withdraw my earnings to my own wallet without chain knowledge.
To align the team on current user pain points, I mapped two short journeys for See Earnings and Withdraw, revealing key gaps including a buried entry, no daily view, unclear drivers, and route ambiguity, and turning them into concrete design opportunities.
See Earnings
Withdraw
Trigger
Understand
Act
Outcome
Needs a quick read on today’s earnings and what changed.
👀
Did earnings move today and which source drove it?
🤨
It looks the same as yesterday. I still do not know which source changed.
😥
Okay, I will check again tomorrow.
☹️
No daily totals or trend view, so I cannot confirm changes.
I see month to date earnings with fiat values and a clear source breakdown.
See totals, trends, and sources at a glance.
Investigate the biggest change and adjust growth tactics.
See the driver and adjust tactics with confidence.
👍
Takes four steps to reach Group Earnings.
Add a clear Withdraw entry on the group admin page.
Daily digest in inbox
Today glance card
Source breakdown with share and change, with a small sparkline
Day and month toggle with a Last 7 days chip
Drill into sources with top contributors
Action suggestions tied to the identified driver
No daily totals or trend view.
Drivers are unclear; source changes are hidden.
Cannot isolate changes by source, tier, or creator to decide what to adjust.
Cannot compare yesterday, last seven days, and month to date to test a hypothesis.
Decisions are deferred and motivation drops.
Updated data does not translate into action.
Opportunities
Painpoints
Thoughts & Feelings
User Action
Defining success metrics
How I measure whether Group Earnings motivates owners
To evaluate the redesign’s impact, I connected user jobs with emotional outcomes and measurable metrics.
Motivation, for group owners, depends on two things:
understanding how their earnings grow
feeling confident managing them.
The framework below links these experiences to quantifiable results, capturing both clarity and engagement improvements after the redesign.
Jobs
Emotional Outcomes
Measurable Metrics
See what I earned and what drives it
Withdraw my earnings to my own wallet without chain knowledge.
Task accuracy
More users correctly identify earning sources
Earnings page revisit consistency
Owners return to view earnings more regularly
Time to complete withdrawal
Users spend less time on withdrawal process
Connecting user goals with emotional and measurable outcomes
Clarity
Understand where income comes from
Motivation
Feel rewarded seeing progress
Confidence
Withdraw easily and quickly
Design process
Help group owners understand what they earned and what drives it.
Design Principles
Together with our CEO and CTO, I translated earlier user insights into four design principles that guided the new Group Earnings experience.
@Neilson
Continuity
“I check earnings daily and want to see changes over the past few days.”
Clarity
“I want to see total earnings and main sources clearly in one view.”
@RiverSynpse
@Paul
Actionability
“I want clear, accurate insights that help me act right away.”
@Toby
Accessibility
“I want to reach all my earnings data quickly from one place, no extra steps.”
Competitive analysis
Rethinking Withdrawals for Multi-Chain Clarity
To understand how leading crypto wallets handle multi-chain token visibility and withdrawals, I analyzed popular products including MetaMask, OKX Wallet, Coinbase Wallet, Uniswap Wallet, and Phantom.
My goal was to identify common UX patterns, information hierarchy, and potential gaps that could inform a more intuitive design for Freechat’s group wallet experience.
Key UX Patterns Missing in Our Experience
01
All competitors use a token icon paired with a smaller chain icon to clearly show the token’s network at a glance.
02
Most competitors show tokens and their networks in a single view. None require selecting a chain first. This reduces friction by minimizing page transitions and helps users understand the token–network relationship more intuitively.
All competitors display both the token balance and its equivalent value in USD.
03
All competitors provide a shortcut to input the maximum amount when entering withdrawal values.
Ideation
Exploring a Reusable Page Foundation for Group Wallet
During ideation, I focused on defining a reusable layout and a clear information hierarchy.
I broke down the page into core building blocks: cards, data visualizations, and supporting UI elements.
Each card is designed to adapt based on the type of earnings it represents, ensuring flexibility while maintaining consistency across different data types.
Homepage
Earning Details
Exploring Layouts for a More Actionable Wallet Overview
Based on prior research findings, I decided to design a homepage for the Group Wallet that surfaces key information at a glance, including monthly earnings and quick access to the withdrawal feature.
I explored different layout options to find a structure that best supports users’ mental models and priorities.
Check sketches
Iteration
Refining Withdrawal UX Through Two Rounds of Design
To understand how leading crypto wallets handle multi-chain token visibility and withdrawals, I analyzed popular products including MetaMask, OKX Wallet, Coinbase Wallet, Uniswap Wallet, and Phantom.
My goal was to identify common UX patterns, information hierarchy, and potential gaps that could inform a more intuitive design for Freechat’s group wallet experience.
Phase 1
Phase 2
Optimize the Existing Flow
As a quick win, I iterated on the original flow by introducing alphabetical sorting and a search box, displaying only networks with available balances at the top. In the token selection step, I further reduced friction by showing only tokens with withdrawable balances on the selected chain.
Final Solution
Whithdrawal Experience
All Earnings
Streamlined Access to Group Earnings
Group owners can now view their monthly earnings and wallet balance in just two taps. Key metrics are clearly displayed with visual priority, and the Withdraw button ensures fast access to the most important action.
Feature highlights
Result
Impact After Launch
After launching the first phase of the internal release, we received very positive feedback from both our team and several loyal users.
100%
of group owners check the new feature after launch
80% +
Engagement rate on earnings page visit
9 / 10
Post-launch internal satisfaction score
Reflection
Balancing Quality and Speed in Real-World Projects
This was my first large-scale project as a product designer, where I took the Group Wallet from concept to launch.
🤿 Deep dive into industry & backend
I built a foundation in crypto wallet UX and backend infrastructure, understanding how multi-chain earnings and withdrawals work from 0 to 1.
⏰ Limited research and testing
The most challenging part of this project was designing a high-quality, scalable experience under significant time pressure. The project didn’t allow for multiple user-testing cycles or large-scale surveys. Instead of long research cycles, I used competitive analysis and in-depth think-aloud sessions to guide my iterations and secure stakeholder approval. This allowed me to ship improvements that met user needs while fitting the tight launch schedule.
📏 Engineering and business alignment
The CEO initially requested reusing the personal wallet’s flow to save development time. To balance feasibility and UX quality, I maintained frequent check-ins with the CEO and CTO, sharing sketches and small iterations early. Regular communication allowed me to confirm technical feasibility, align with business priorities, and implement low-effort but high-impact improvements such as showing only withdrawable tokens, adding network tags, and simplifying sorting.