Context & Background

Cryptoverse Wars is a gamified learning and interactive platform to help students get started on their journey to become Blockchain Developer.

It uses a play-to-learn-to-earn model to incentivize developers to pick new skills and benefit in the long run.

New to Blockchain, NFT's?

Here's an intro video I made to give you a gist of the project

Before I dig into the case study I am dropping here links to some of the jargons I'll use around the the Case Study, I have tried my best to make it clear for the reader ( trying & learning to be a better writer 😅🖊).

• NFT's (Non Fungible Tokens) - NFT Explainer Article
• Cryptobots - These are the NFT's which users get rewarded after completing a module on Cryptoverse Wars. More Here

Project Goal

The main aim of this project was to reduce the friction of onboarding new developers onto the Tezos ecosystem by creating an interactive code school that teaches students basics & intermediate skills to develop apps on Tezos.

Phase 1 of cryptoverse wars was targeted towards fundamentals of blockchain technology and smart contracts and with the phase 2 we wanted to

1. Create more modules/topics that focuses on Intermediate Blockchain development skills.
2. Incentivize users for completing modules by giving them NFT's.
3. Create a marketplace so that users are able to showcase & trade their NFT's.

User Reviews

Our phase 1 traction & feedback gave us enough confidence + data to build the phase 2 of the project, here are some of the feedbacks.

Role

My role was of UX Engineer where I was responsible for

• Designing the revamped platform for Phase 2.
• Research & Code out how we will let users create customizable 3D NFT's (which we call as Crypto bots) on the Web Browser.
• Help Development team with the frontend.

Process & Behind the scenes

Here's a small snippet of behind-the-scenes research which consisted of but was not limited to

• Competitive analysis of various NFT platforms.
• Exploring Coding and Learning platforms.
• Exploring other Blockchain platforms to understand various UX patterns of Decentralized Apps.
• Feedback chats with a few of the users.

I won't talk much about the process & will dive right into the visuals and explain my reasoning along the way.

Solution

Home Page

The homepage answers three main questions for the users when they enter our platform.

1. Why should I need to become a blockchain developer in 2020/2021.
2. What should I build in the idea maze of Blockchain and what do we offer.
3. How are we a reliable source to learn blockchain.

Core Product Flow

The Core product flow includes the Ideal flow for a user who clicks start learning at the homepage to completing first modules & its chapters to customizing their 3D Cryptobot to acquiring them as an NFT.

Home Page to Learning Interface

This video shows the flow from homepage to the Learning interface.

Learning Interface to Customizing Cryptobot NFT's

This video shows the experience of 3D Customizer where users can customize their cryptobot after completing a Module of the course as an incentive for putting in the work.

Later they can showcase their Cryptobot in the marketplace, where they can make it open for sale or just showcase it.

We made this prototype using React + Three JS and is live at www.cryptocodeschool.in

Acquiring Cryptobot Flow

This video shows the flow of after customizing the cryptobot, when user acquires the cryptobot in their Crypto Wallet.

Marketplace

It lists all the cryptobots where users can buy, sell and showcase their Cryptobots.

Users or NFT Collectors who are just interested in owning the cryptobot NFT, can directly buy it from the marketplace.

Cryptobot Single Page Design

The left side is an Interactive 3D Viewer of Cryptobot.

• We wanted the experience with the 3D cryptobot to be as immersive as possible.
• It also has a full screen button, where users can checkout their cryptobot in Full Screen.

The right side of the webpage :

• Shows all the data related to the Cryptobot.
• Let's the user share and flex their cryptobot on one Click.

Some of the States of this Page are :

• When Cryptobot is on Sale.

• When Cryptobot is not on Sale

• Users who claimed a cryptobot after completing a module can make their cryptobot open for sale by clicking on the Sell Now button.

Impact

Finally, we tested the platform with some of our users from the telegram community and smoothened out few minor tweaks and UX issues and later launched the phase 2.

Few of the feedbacks from users after few weeks of launch 🙏.

Twitter Launch Thread

Learnings & Closing Notes

• From learning the pure basics of what is blockchain to deep-diving into NFT's, this project acted as my entry to the Blockchain world & blew my mind in multiple dimensions.
• Before starting this project one thing that I had heard a lot about was how much UX sucks in the blockchain apps & I finally understood that the technology is at its very nascent stage. Our aim was to smoothen out the UX as much as possible & reduce the friction of onboarding new developers into the blockchain space.
• UX Engineer role suits me, while should designers code is a whole different debate, I love converting my Designs into code. Also, Tailwind CSS is ❤.