Web3 messages aggregated tool

NetEase, June ’22

Overview

MetaPush is a browser extension designed to aggregate valuable Web3 messages. It monitors multiple websites to push notifications related to your wallet address and Discord account. These notifications include updates on airdrops, project announcements, NFT allowlists, mint dates, DAO proposals, ENS expiration, OpenSea offers, and more.

Duration

2 months

(discontinuous)

Role

UXUI designer

Tool

Figma

Status

Updated in March 2023

Achievement

In 2022, MetaPush was listed on the browser stores for Chrome, Brave, and Edge (Chrome Web Store - Extensions and Edge Add-ons). As of December 2023, it has amassed 3,126+ users in the stores with an impressive rating of 4.8 out of 5.

Official Link

3126

User

Google Chrome

Microsoft Edge

4.8

out of 5

Timeline

This project started in June 2022, and the first version (v0.5) was released two months later. The latest version, v0.8, was released in March 2023, with a total of four versions released during this period. The diagram below illustrates the distribution of time spent on design work.

Collaboration

This project is a collaborative effort between Metalist Lab and Thunderfire UX, with my role as the primary designer. I had occasional assistance from other non-permanent designers and was involved in all design aspects, including user experience, visual design, and the creation of promotional materials.

Highlights Highlights Highlights Highlights Highlights Highlights Highlights Highlights Highlights Highlights

Highlights

Components

Web Page

Extension pages

Motivation Motivation Motivation Motivation Motivation

Motivation

In 2022, Web3 gained significant attention, leading to the emergence of various platforms. More and more people started engaging in transactions and trading on different platforms. However, users found themselves needing to visit multiple websites to stay updated on various relevant information, such as NFT new project announcements, NFT allowlists.

That's where MetaPush comes in. It was designed as a browser extension to allow users to receive real-time updates from these platforms. This way, users can stay informed about the latest news, without having to visit multiple webpages.

Context

Web3 and NFTs garnered significant attention in 2022, as depicted in the Google Trends chart on the right, illustrating the search volume for NFTs.

“NFT” in Google Trend during 2020/2/1 to 2022/2/1

Problem

Users need to manually open multiple webpages to obtain Web3-related information.

Information Fragmentation

As an NFT buyer, there are many different platforms to keep track of, and various pieces of information come from different websites.

Many Valueless messages

Different websites provide different information, and the majority of it may not be what users are looking for.

Goal

Design a push-notification product to aggregate Web3 value messages and enhance the efficiency of users receiving these messages.

Definition Definition Definition Definition Definition Definition Definition Definition

Definition

Alpha version / v0.5

The initial version will target PREMINT users, providing them with a service to aggregate relevant and useful information. Subsequently, support for different WEB3 platforms will be added.

The NFT allowlist (raffle) Tool

PREMINT is an innovative tool regulating the creation of unique digital assets known as NFTs. It functions like a VIP pass, allowing creators or platforms to control and approve who can produce these exclusive digital items, ensuring a safe and controlled environment for their creation.

Why PREMINT?

Premint is highly popular within the NFT community.

PREMINT acts as a tool that regulates and manages the creation of NFTs, ensuring that the minting process remains controlled, compliant, and secure within the specified NFT environment.

Using Premint as the first platform addresses the cold start problem for our product.

TOM Cat NFT will conduct activities on premint.xyz in late June. This is a great opportunity to address the cold start issue for our product.

PREMINT Flow

Design a Browser Extension

Opening PREMINT through a computer browser is a more mainstream scenario.

Users are required to utilize Metamask in order to connect their wallet for logging into PREMINT.

Therefore, a Browser Extension can fulfill these functions.

Embed a button on another website.
Display a pop-up message to notify users.
Have a UI to aggregate the messages.
Crawl project information.

Overall Experience Overall Experience Overall Experience Overall Experience Overall Experience

Wireframe

Just defined the main process; now, we need to design the entire product flow, starting from the installation process.

for the first time

Website

for managing, editing

Website

for daily usage

Browser Extension

Connect Wallet and Add Account

After installing MetaPush from the store, you'll need to connect your wallet and create an account. This step is only required during the initial setup. Once completed, you will be guided to the management page to add subscriptions.

Management System

Add and Manage Subscriptions
The main features of the management system include managing subscriptions, adding new subscriptions, and editing accounts.

III

Extension - Receiving Notification

When there are new messages in the channels subscribed by users, notifications will appear in the browser. Users can click on the notification to navigate to the relevant page.

Detailed Task Flow Detailed Task Flow Detailed Task Flow Detailed Task Flow Detailed Task Flow Detailed Task Flow

Detailed Task Flow

Design Design Design Design Design Design Design

Design

Sign Up

Each page has only one button, allowing users to clearly know what to do next.

Management System

Overall Iteration

Wireframe of the Homepage

Navigation Bar

Competitor - Subscription Platform

If we set aside the direct functionalities like Web3, its fundamental nature is, in fact, a platform similar to subscribing to books, receiving emails, and so on

Distinct Positioning: MetaPush diverges from competitors. Unlike competitors who display subscribed channels in their navigation bars for users to navigate and complete operations within the product, MetaPush focuses on a different approach.

Simplified Mission: MetaPush's mission is simpler. Message viewing occurs within the extension, streamlining tasks, especially related to the initial subscription. Subsequent actions are efficiently carried out within the extension.

Efficient Sidebar Functions: Initially, there was an attempt to create an integrated platform like competitors, but after understanding user tasks, the functions of adding and managing were directly placed into the sidebar, simplifying the user experience.

Too much empty space on the left and right

Competitor-liked Nav

Simplified Mission

Second Level Menu

In the secondary menu, channels are displayed using chips instead of tabs. This allows for the addition of more channels without running out of space.

v0.5

Tabs

Too many options may not fit in one row.

v0.6

Chips

Support more options

v0.8

Chips with Icon

Adding a logo will make it easier to find.

Card

v0.5

Width: 100% of the content

Too scattered, hard to read.

Banner Decoration

Using only the webpage's main color theme is a bit dull.

Width: 800px fix

More focused information for easier readability.

Banner Decoration

Enhance its features by using the project's primary color palette.

Layout of "Add subscriptions"

Add subscriptions - Other Monitor

Display different channels using a card format, adapting within a 12-column grid system.

v0.5

Unclear Hierarchy

The title and content lack a clear hierarchy or relationship.

Clear Hierarchy

III

Extension - Notification

De-emphasize profile pictures and names.

Taking inspiration from social media notifications, although the content is similar, they emphasize user avatars and names. In our case, we prioritize the message itself, so we have de-emphasized profile pictures and project names.

Notification

Primarily display notifications to keep users focused on their messages. Additional management features will be guided to the management system.

Branding & Visuals Branding & Visuals Branding & Visuals Branding & Visuals Branding & Visuals Branding & Visuals

Branding & Visuals

Blue is acclaimed as one of the best colors for enhancing productivity and increasing user focus. As MetaPush is a tool product, we have chosen the color blue.