Context
Overview
At Network3.AI, I led the end-to-end design of the Network3 Dashboard. I responsible for the whole UXUI design and the design system design.
My Role:
UI/UX Designer, Design System Designer
Team:
Product Manager, Engineers
Timeline:
5 months: Jan 2024 - May 2024
Status:
0-1 Project; Launched
Impact
Tripled the user base in 6 months!
We over-achieved our business goal - tripped the user base in 6 months.
Reached a 16% Daily Active User (DAU) rate!
After launching our dashboard, we achieved a 16.2% daily active user rate within just three months.
Received $5.5 Million in Funding!
My designs helped secure $5.5 million in funding for the project.
Company & The Product
The Company
Network3 is a Web3 startup, currently has 206,415 active nodes, and has received $5.5 million in investment.
How does Network3 work?
"The unused bandwidth can earn you thousands of crypto tokens."
Network3 allows users to contribute their unused bandwidth for use by our VPN apps. This provides our VPN apps with free bandwidth while Network3 users can earn N3 cryptocurrency tokens (The cryptocurrency will be launched by 2026).
Requirement Gathering
The Project
Design a dashboard for the Network3 platform.
User Goal
Easily track and view their token-earning data in real time.
Business Goal
Increase user base.
Product Goal
Design two features - Data Visualization and Growth Program to achieve both user and business goals.
Data Visualization
Data Visualization at a glance
I designed three main data visualizations—Cards, Charts, and Tables.
Data Cards give quick overviews of key metrics.
Bar Charts depict daily connection earnings, allowing users to spot trends at a glance.
Tables organize referral data and connection details in a clear, comparable format.
How I get there?
Four-Step Process
The above showcases my final results, but the process was anything but easy. I went through approximately four steps to complete the design. Now, I will walk you through each step.
Data Research
Step 1:
Uncover the Earning Mechanism
My first task was to collaborate with the technical team to understand and define the earning rules. We identified two primary ways for users to earn tokens: Connections and Referrals.
1.Connections
Desktop Nodes: Users earn tokens by connecting via desktop devices.
VPN Apps: Users earn tokens through our VPN applications.
On-Chain Devices: Users can purchase a special mining device for additional token rewards.
2.Referrals
Referral Bonus: Earn 100 tokens for each successful referral.
Commissions: Receive 10% commissions from referral’s connection earnings.
Step 2:
Define the Connection Calculation Formula
Then I worked with PMs to design the calculation formula for connection earnings.
There are multiple connection earning factors
While the detailed formula is confidential and cannot be shared, the concept behind token earnings is straightforward. The number of tokens a user can earn depends on several key factors.
Time Connected
The longer a user remains connected, the more tokens they accumulate.
Bandwidth Quality
Higher network quality allows users to earn tokens at a faster rate.
Network Region
Higher network quality allows users to earn tokens at a faster rate.
Step 3:
User Research on a tight budget
Despite tight resources and limited time, I still gathered valuable insights using three main methods.
Community Listening: I reviewed conversations and comments in our Network3 communities to understand user concerns
Survey: I sent out a survey to understand specific user needs, receiving over 100 responses.
Expert Consultation: I collaborated with our technical team to identify which data points we could feasibly provide.
Community Listening
Research Outcome - Personas
Through research, I gained valuable insights and identified two primary user types.
Two Personas
Casual Earning Makers are not very familiar with Web3 or cryptocurrency. They view our platform simply as a way to earn money, so they only need an overview of their earnings.
Advanced Web3 Players have a deeper interest in crypto and Web3. They actively participate in multiple communities (including competitor platforms), and are more likely to refer others. Instead of a general summary, they seek more detailed insights.
Data Designs
Step 4:
Designing for Users' Data Needs
Designing for Tommy
Tommy, our casual earning maker persona, wants an at-a-glance overview.
Our casual earning makers aren’t deeply familiar with Web3 or crypto. They see our platform as a simple way to earn, so high-level data is enough for them.
The high-level data they value most:
High-level Data
Cards for high-level data
To highlight important metrics, I used cards that display key numbers. Placing them at the top of the dashboard ensures they are the first thing users see.
This provides Casual Earning Makers with an easy way to track lifetime earnings, connection earnings, referral earnings, and daily updates without feeling overwhelmed.
Designing for Lindsay
Lindsay, an Advanced Web3 Player, requires more specific and detailed data.
Lindsay wants to see not only general metrics but also track detailed information.
For example, she like to track daily token earnings and earnings breakdown by each device. Additionally, she likes monitoring daily changes and verifying data accuracy.
Daily Connection
Bar Charts for Daily Connections
Iterations
How to present two types of data at one time?
Our Advanced Web3 Players prioritize verifying the accuracy of their earnings. Although they don’t have access to the exact earning formula, they rely on connected time to estimate their earnings, as it is a known and dependable factor.
Proposal I
Two Separate Charts
Initially, I planned to display connection earnings and connected time as two separate bar charts stacked vertically.
However, this setup made it difficult for users to intuitively compare the two metrics.
The comparison is not straightforward enough
Proposal II
Single Combined Chart
Next, I explored combining both metrics into one chart.
When integrating the two charts, we faced an issue: the data types had different units—tokens and time. To address this, I placed the units on opposite sides of the chart and used distinct colors to differentiate the data categories and their subcategories.
However, this method had its drawbacks.
Having two different units in one chart could easily confuse users.
Combining both charts resulted in six subcategories, which could overwhelm users.
Proposal III
Integrated Toggle Feature
My final solution was to integrate both data types into a single chart using a toggle feature. When users select a data type, the units automatically switch.
Additionally, users can hover over the chart to view more detailed data breakdowns.
Clarity: Users can focus on one data type at a time, reducing confusion.
Interactivity: The toggle and hover features enhance user engagement.
Growth Program
Growth Program at a Glance
With the data visualization components fully addressed, we turned our focus to our primary business goal: user growth.
To drive this, I designed a series of bonus tasks that encourage user engagement and expansion. These tasks include:
User Referrals, Join Communities, & Social Media Promotion
Refer a Friend
First, I focused on designing the user referral system.
The referral process is straightforward: when users refer a certain number of new members, they receive additional rewards. I developed two design proposals:
Proposal I
Unlimited Referral Tasks
Users earn tokens for every referral without any upper limit. The more people they refer, the more tokens they accumulate.
This system is intended to encourage users to refer as many people as possible.
A little problem
However, the number of user referrals is limited.
In reality, the number of referrals a user can make is limited. Over time, the system loses its impact since users cannot refer an unlimited number of new members.
Only 22% of users referred more than 6 people
In reality, the number of referrals a user can make is finite. Over time, the incentive loses its impact since users cannot refer an unlimited number of new members.
Proposal II
Monthly Referral Tasks
Based on our research data, I introduced a new system with monthly referral tasks to sustain user engagement and motivation. The system follows a tiered structure, gradually increasing the challenge while keeping users invested:
Refer 1 friend: An easy and achievable first step, allowing all users to experience the excitement of earning their first reward.
Refer 3 friends: A moderate challenge that helps users build a habit of referring others regularly.
Refer 8 friends: A more demanding task that deepens user investment in the program. To sustain motivation, this tier offers a significantly more attractive reward.
User Flow for Refer a Friend
Step 1: Copy and share the referral link
Performing this referral task is also very simple for users: First, they can just copy their referral link.
Step 2: Claim Bonus
Performing this referral task is also very simple for users: First, they can just copy their referral link.
Design System
Buttons and Charts
I collaborated with engineers to update and launch the button components and bar charts.
