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.
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
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:
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
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.
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.