How can web 3 beginner can start easily their web3 journey?

Overview

This project has been developed for the Glitch Hackathon, the first Asian multi-blockchain web3 hackathon. Our team focused on driving widespread adoption of web3 by creating a user-friendly block explorer for new users in Near Protocol Blockchain.

👋 Block explorer: a tool that allows you to search for transaction records and block(Chained data bundle) information in the digital world, enabling you to verify the transparency and reliability of the blockchain.

Location

Remote
Seoul, South Korea

Tools

Figma, illustrator,After effect

Role

UXUI Designer
BI Design

Timeline

Overall +1month

Challenge for this project

  1. Translate complexity to simplicity

    To understand the infrastructure of Web3 for beginner, it is necessary to convey complex information in a simple and concise manner.

2. Short time line to align and proceed project

It was important to plan and ensure that the project manager's proposal could be refined into a product that could be implemented within the short two-week timeline.

Discover

What are the issues encountered by beginners when using a blockchain explorer?

#Research

By collaborating with team members and sharing our real experiences as new users of Web3 and the blockchain scanner, we decided to refocus the project towards a more concise and clear structure.

In discussing the blockchain scanner with other new Web3 users, we discovered that the difficulty lies not in the specific terms of Web3, but rather in the fact that the concept itself is more of a pain point due to its ambiguity. These concepts are abstract, making it difficult to figure out how to approach them in terms of a mental model.

Ethscan site is quite hard to understand for beginner

Develop

Ultimately, the question arose of how to naturally teach and make these pain points more accessible. At that time, the idea of a blockchain scanner integrated with a community emerged.

Market Research

The scan website shares data-driven information. I found an example of a community application in the stock section of the Toss app, where users could exchange opinions on each stock. I suggested creating a community for each smart contract address in the Dapp, allowing users to share their opinions.

Toss application_stock community part

*Toss is User-friendly fintech product in south korea

A sense of homogeneity where similar individuals gather

To activate the community, it is important for users to be able to identify and connect with each other. Similar to Reddit, users are divided into categories.

By accessing profiles, one can see frequently used Dapps, and colored badges indicate missing aspects of Web3 (NFT, DeFi, Gaming, etc.). After further research on development, we proceeded with the categories NFT, DeFi, and Others.

Information Architecture

Through these discussions, We have developed the following proposal for the information architecture.

Design system

Light and joyful!

I planned this contrary to the existing block explorer's user interface, which seemed challenging for new users. A lighter version of the user interface was configured to help users feel less burdened.

BI Concept

Using a light and cheerful tone, I created an animated block character named 'Blocky' to make the interface more user-friendly and eliminate the fear and resistance to the overwhelming amount of new information. Blocky, the block-shaped character in vibrant colors, represents the vitality of the blockchain scanner and its users (communities).

Deliver

To final version, we could get those web site features.

Main page

On the new homepage, the service first provides information that sparks user interest and is accessible with a low entry barrier, rather than immediately providing a large amount of information.

Overview page

For those unfamiliar with Web3, I designed a clear explanation of the section using illustrations with characters, as well as an explanation of terms, to facilitate understanding of what this section does as a whole.

Account page

On the account page, users can manage their activities and profile, and when they view other users' profiles, they can identify similarities with themselves in terms of a tribe in web3.

Contract page with community

On the Contract page, users can view information related to that contract and share their opinions with other users through the community.

Prototype

Lesson & Lesarn

First hackathon experience,
lessons on time management and prioritization

"Due to the limited time of the hackathon, we focused more on the core features, and as a result, only the main, profile, and contract pages were implemented. Therefore, the second objective of the challenge failed due to insufficient development. The feedback we received on demonstration day was that the project was too ambitious for a hackathon.

I realized that in future time-constrained projects, we should focus on the features we really want to showcase and develop them. If we had a bit more time, I would have liked to collaborate more on the initial project by narrowing down the scope more clearly. Most of the team members were newcomers to Web3, and initially, our lack of knowledge felt like a barrier. However, I believe that if we had gathered data representing Web3 newcomers and collected more opinions from within the team, we could have planned more effectively to create an infrastructure that is more user-friendly for Web3 newcomers.