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

Overview

이 프로젝트는 첫 번째 아시아 멀티 블록체인 웹3 해커톤인 Glitch Hackathon을 위해 개발되고 있습니다. 우리 팀은 Near Protocol Blockchain에서 신규 사용자들을 위한 사용자 친화적인 blockchain scanner를 만들어 웹3의 광범위한 채택을 촉진하는 데 집중했습니다.

👋 blockchain scanner: 디지털 세계에서 거래 기록과 블록(연결된 데이터 묶음) 정보를 검색할 수 있는 도구로, 블록체인의 투명성과 신뢰성을 확인할 수 있게 해줍니다.

Location

Remote
Seoul, South Korea

Tools

Figma, illustrator,After effect

Role

UXUI Designer
BI Design

Timeline

Overall +1month

Challenge for this project

  1. 복잡함을 단순함으로 바꾸다

    웹3의 인프라를 초보자가 이해하려면 복잡한 정보를 간단하고 간결하게 전달하는 것이 필요합니다.

2. Short time line to align and proceed project

프로젝트 매니저의 제안을 2주라는 짧은 타임라인안에 실행 가능한 프로덕트로 구체화하여 구현할 수 있도록 기획하는 것이 중요했습니다.

Discover

blockchain scanner를 사용할 때 초보자들이 겪는 문제는 무엇인가요?

#Research

팀원들과 협력하고 웹3와 blockchain scanner의 신규 사용자로서 우리의 실제 경험을 공유한 결과, 프로젝트의 방향을 더 간결하고 명확한 구조로 재조정하기로 했습니다.

다른 신규 웹3 사용자들과 blockchain scanner에 대해 논의하면서, 어려움이 웹3의 특정 용어에 있는 것이 아니라 오히려 그 개념 자체가 모호하다는 사실이 더 pain point로 다가온다는 것을 알게되었습니다. 이 개념들이 추상적으로 다가오기에 어떻게 mental model을 고려해야 할지 파악하기 어려운 상황이었습니다.

Ethscan site 은 초보자가 이해하기 매우 어렵게 구성되었습니다.

Develop

결국 이런 pain point들을 어떻게 자연스럽게 학습을 시키면서 쉽게 다가갈 수 있게 하는 것일까에 대한 문제가 대두되었는데, 당시에 커뮤니티를 접목한 blockchain scanner에 대한 아이디어가 나왔습니다.

Market Research

유사한 케이스를 리서치를 하던 중 Toss 앱의 주식 섹션에서 사용자가 각 주식에 대해 의견을 교환할 수 있는 커뮤니티 애플리케이션 예시를 발견했습니다. 이를 바탕으로 Dapp에서 각 스마트 계약 주소에 대해 사용자들이 의견을 공유할 수 있는 커뮤니티를 만들자는 아이디어를 제안했습니다.

Toss의 주식 커뮤니티

공통관심사를 가진 사람들이 모여 형성되는 동질감

커뮤니티를 활성화하려면 사용자가 서로를 인식하고 연결할 수 있는 것이 중요합니다. Reddit과 유사하게 사용자는 카테고리별로 나누어집니다.

프로필에 접근하면 자주 사용되는 Dapp을 확인할 수 있으며, 색상 배지는 Web3의 부족한 부분(NFT, DeFi, Gaming 등)을 표시합니다. 개발에 대한 추가 리서치를 진행한 후, NFT, DeFi, 그리고 Others 카테고리로 진행하기로 했습니다.

Information Architecture

이러한 논의를 통해 IA (Information Architecture) 에 대한 다음과 같은 제안이 됬고 개발이 진행됬습니다.

Design system

Light and joyful!

기존의 블록체인 스캐너 사용자 인터페이스가 신규 사용자에게 도전적으로 보였던 점을 반영하여 이를 반대로 기획했습니다. 사용자들이 덜 부담스럽게 느낄 수 있도록 더 간소화된 버전의 사용자 인터페이스를 구성했습니다.

BI Concept

가볍고 즐거운 톤을 사용하여, 인터페이스를 더 사용자 친화적으로 만들고 수많은 새로운 정보들에 대한 두려움과 거부감을 없애기 위해 'Blocky'라는 애니메이션 블록 캐릭터를 만들었습니다. 활기찬 색상의 블록 모양 캐릭터인 Blocky는 blockchain scanner와 사용자(커뮤니티)의 활력을 나타냅니다.

Deliver

Final features


Main page

새로운 홈페이지에서는 즉시 많은 정보를 제공하기보다는 사용자들의 관심을 유도할 수 있는 정보부터 제공하며,
낮은 진입 장벽으로 접근할 수 있도록 구성되었습니다.

Overview page

Web3에 익숙하지 않은 사용자들을 위해, 이 섹션이 전체적으로 어떤 역할을 하는지 이해할 수 있도록 캐릭터와 일러스트를 사용한 명확한 설명과 함께 용어에 대한 설명도 디자인했습니다.

Account page

계정 페이지에서는 사용자가 자신의 활동과 프로필을 관리할 수 있으며,
다른 사용자의 프로필을 볼 때 웹3에서 자신과 비슷한 관심사를 가진 다른 유저를 확인할 수 있습니다.

Contract page with community

Contract 페이지에서는 사용자가 해당 계약과 관련된 정보를 확인하고, 커뮤니티를 통해 다른 사용자들과 의견을 공유할 수 있습니다.

Prototype

Lesson & Lesarn

첫 해커톤 경험, 시간 배분과 Priotization에 대한 교훈

짧은 해커톤의 시간이었기에 메인 기능에 더 초점을 맞춰서 메인, 프로필, 계약 페이지만 구현되었습니다. 따라서 도전 과제의 두 번째 목표는 개발 미비로 인해 실패하게 되었습니다. 시연 날 받은 피드백은 이 프로젝트가 해커톤에는 너무 야심 차다는 것이었습니다.

앞으로 시간에 제한이 있는 프로젝트에서는 우리가 정말로 보여주고 싶은 기능에 집중하고 이를 개발해야 한다는 것을 깨달았습니다. 만약 시간이 좀 더 있었다면, 초기 프로젝트에서 범위를 더 명확하게 좁혀 팀원들과 더 많은 협업을 하고 싶었습니다. 대부분의 팀원들이 Web3의 신규 사용자였고, 처음에는 우리의 지식 부족이 장벽처럼 느껴졌습니다. 그러나 Web3 신규 사용자를 대표하는 데이터를 모으고 팀 내에서 더 많은 의견을 수렴했다면, 더 효과적으로 계획을 세워 Web3 신규 사용자에게 더 친숙한 인프라를 만들 수 있었을 것이라고 생각합니다.