Network3

Network3

Web3 Dashboard

Web3 Dashboard

Data Visulization

Data Visulization

Web3

Web3

Network 3 is a web3 application platform where our users can earn crypto tokens by contributing unused bandwidth. Our platform currently has 206,415 active nodes and has received 5.5 millions of dollars in investment.

Network 3 is a web3 application platform where our users can earn crypto tokens by contributing unused bandwidth. Our platform currently has 206,415 active nodes and has received 5.5 millions of dollars in investment.

Network 3 is a web3 application platform where our users can earn crypto tokens by contributing unused bandwidth. Our platform currently has 206,415 active nodes and has received 5.5 millions of dollars in investment.

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

  1. 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.

  2. 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:

1

Total Earnings

Lifetime Earnings

Life-long Connected Time

1

Total Earnings

Lifetime Earnings

Life-long Connected Time

1

Total Earnings

Lifetime Earnings

Life-long Connected Time

2

Connection Earnings

Node Earnings

App Earnings

On-chain Device Earnings

2

Connection Earnings

Node Earnings

App Earnings

On-chain Device Earnings

2

Connection Earnings

Node Earnings

App Earnings

On-chain Device Earnings

3

Connection Earnings

Referral Bonus

Referral Commissions

3

Connection Earnings

Referral Bonus

Referral Commissions

3

Connection Earnings

Referral Bonus

Referral Commissions

4

Daily Updates

Daily Earnings Updates

Daily Connected Time Updates

4

Daily Updates

Daily Earnings Updates

Daily Connected Time Updates

4

Daily Updates

Daily Earnings Updates

Daily Connected Time Updates

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.


I like to monitor the daily changes in my connections.


I like to monitor the daily changes in my connections.


I like to monitor the daily changes in my connections.

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.


I check my connected time every day to verify if my token number is correct.


I check my connected time every day to verify if my token number is correct.


I check my connected time every day to verify if my token number is correct.

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.

User Flow

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.