Network Metrics Dashboard

Design SubQuery Network metric dashboard

My Role

UX Design, User Research,  
Prototyping, Visual Design

Context

This case study outlines the UX design process for creating a network data metric dashboard for SubQuery. The focus was on developing a user-friendly, efficient, and insightful dashboard to assist users in involving and analyzing network performance.

Objectives

Design a comprehensive dashboard for SubQuery to display key network and useful data to people that are not indexers or logged in, e.g. the current Era state.

We are missing key Network metrics which can include:

  • Remaining hours in the Era
  • Percentage staked of circulating supply staked or delegated
  • Total rewards over time

Indexers:

  • total active count
  • total staked tokens
  • total rewards over all time

Delegators:

  • total active count
  • total staked tokens
  • total rewards over all time

Research + Iteration

Target User: Network participants: Indexers, Delegators, Web3 consumers,

Competitor Analysis

Key Competitors: The graph https://thegraph.com

Key Findings:

Users needed quick, real-time access to network data, customizable views, and the ability to easily interpret complex data.

Problem needs to solve

  • The profile page(Indexer list) is currently so hidden that nobody can find it.
  • Some data on it is useful to people that are not indexers or logged in.
  • We are missing Key network metrics that are important for new and existing users to understand the activity of the subquery network

Design

The final UI design featured a clean and modern look, with a focus on ease of use. Data visualization was made a priority, with graphs and charts designed for quick comprehension. Streamlined interactions with tooltips, a better segmented control date selection for user to check historical data.

Prototyping

  • High-Fidelity Prototypes: Developed using Figma.
  • Focus Areas: Layout, Data cards design, Graph design, Mobile version

Challenges

Complex Data Presentation: Designing a way to present complex network metrics in a manner that is easily understandable, even to users who may not have a technical background.

Real-Time Data Handling: Ensuring the dashboard can handle and display real-time data accurately and efficiently, which involves both design and technical challenges.

Responsive and Accessible Design: Creating a design that is responsive across various devices and accessible to all users.

Live view Subquery.network/dashboard