Crypto Baddies

September 16, 2022
OVERVIEW

Project Brief

Crypto Baddies, it's a web3 community to empower women and no-binary through mentorship sessions, talks, and project launchpads. The process of becoming a Crypto Baddie and getting access to the conferences supposes the mint of an NFT.

The problem

Everybody is talking about how to build on the web3 ecosystem and also, everybody wants that more people to get involved with this space and use it. But for non-technical people isn't easy always.

The Goal

Bring the opportunity to learn about the web3 minting its NFT access, guiding our users through each step.

Role

Tools

Company

Timeframe

UX , UI, Fronted Developer

Miro, Figma, SCSS, NextJS, ether.js

Ceercle Project

Jul-Sept 2022

EMPATHIZE

All starts with a little empathy

I began the process of identifying which will be our users and their capabilities, pains, interests, and goals. Our users are beginners and this may be considered its first approach to web3, in this order of ideas, I wanted to build its minting process as accompanied as possible and avoid all the frustration that perhaps could happen when we don't understand what we're doing wrong.

cb-empathize-persona

Just to synthesize the previous research about our users, I created a user persona. This persona served as a continuous reminder of the characteristics of the kind of people who may use Crypto Baddies.

DEFINE

The journey to Mint your first NFT

Using the research findings and user persona, I was then able to chart a wireflow. The flow below shows all the possible errors that might be found by a beginner. I found that to accomplish our objective the users will need to pass across three (03) stages:

  • Metamask

  • Create | Connect the wallet

  • Minting process

wireflowCB
IDEATE

Metamask

Metamask is one of the most popular wallets on web3, but that doesn't mean that everybody knows about it. When someone is launching metamask might find three (03) typical issues:

cb-ideate-errors
  • Browser incompatibility

  • Extension not installed

  • Not logged account (even not created account)

To enhance our users' experience, I designed all the possible errors with a focus on two aspects: explaining the meaning of the error and providing guidance on how users can overcome it. For the first aspect, I opted for simple language, avoiding any technical jargon like 404 error. As for the second aspect, I decided to provide links to the official documentation, which I believe is both reliable and comprehensive.

PROTOTYPE

Create | Connect the wallet

Our users have already created an account, but they could face another possibles issues:

  • Incorrect network

  • Not funds

cb-prototype-messages

That's why in the front end, I request information about the connected wallet, its network, and the current balance. This helps prevent users from encountering messages like, 'Hey friend, you don't have any funds or the balance is insufficient. Please fund the wallet!' Additionally, it avoids unnecessary execution of the smart contract.

PROTOTYPE

My precious...Minting process

Alright, our user has a wallet connected to the right network and has some money to mint the NFT! Only left the minting process in itself, I think that every action of the user, requires at least minimal feedback, that's why I focus this last steps on what's happening and the result gets us to the openSea to watch the NFT that we've made.

cb-prototype-final

I had learned from some courses how to integrate the front end with smart contracts, but this was my first experience designing for a web3 integration, so grateful for me.

And yep! I designed and coded the Crypto Baddies site.

© Gitmel Gutierrez / Made with ❤️ in Next / 2023