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
Role
UI Designer
CEO (PM)
CTO
Task
User research
Prototyping
Visual Design
Usability testing
Tool
Figma
Impact
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
Token1
Token3
Token 5
Token n
Token4
Token2
C
C
Ethereum
Freechat
Freechat originally only supported projects using the Ethereum blockchain.
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.
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.
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.
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.
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.
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.