A Simple Cryptocurrency Wallet.
This freelance UX project is, like Metra, related to the NFT & cryptocurrency space.
My role in the Simple Wallet (SW) team was researching & designing the front-end web experience.
Working with this innovative start-up was a great chance for me to use and expand my knowledge of online accessibility.
A wallet that helps regular people,
who don't want to mess with cryptocurrency,
to buy and enjoy NFTs,
simply by connecting their credit card.
I conducted 2 rounds of competitive analysis for this project.
The first compared the overall brand identities of leading cryptocurrency wallets.
Use the arrows to see 4 crypto-wallet brands, with snapshots of their interface, menus, icons, and colors.
Based on these competitors, I compiled a few design recommendations for SW's developing brand identity:
For the 2nd round of competitive analysis, I compared the checkout processes of 5 different marketplaces.
The goals of this exercise were:
to better understand the NFT checkout experience
to understand how a walletless user might navigate a first-purchase experience
to see how different wallets integrate with different marketplaces
to see which marketplaces supported Wallet Connect
Through this process, it was discovered that:
👍 Most marketplaces support Wallet Connect
👍 New users might discover SW through Wallet Connect's desktop tab
👎 Certain marketplaces only support a single type of wallet
Before starting the wireframing process, we created a couple user flows to illustrate how a user might access the Simple Wallet software, and use it to buy an NFT:
These flows helped us to understand which features would be most important to simulate in the prototype.
WIREFRAMES & PROTOTYPE
At this point in the process, the SW team decided to pursue designing a desktop / web-browser version first, leaving the possibility for a mobile application down the line.
I was tasked with creating the very first mocks for what this website would look like.
I started by creating a sample NFT checkout flow, using Opensea as an example:
This gives the product context, and shows how someone might first discover the SW site.
While simulating an Opensea checkout, I designed the landing page, or home page:
Wireframes are typically designed without real text, color or images.
The paragraph of text above was just a placeholder, to be later replaced with a higher-fidelity version:
WALLET CREATION FLOW
After the homepage, the first order of business was designing the wallet creation flow.
This flow needed to include these steps:
collect & verify email
collect & verify phone
collect credit card information
agree to terms & conditions
To experience this flow, use the arrows to click through:
With the wallet creation process designed out sufficiently for the time being, I moved on to finish the simulated checkout experience:
This version of the confirm checkout pop-up was heavily based on Metamask's chrome plugin.
The next iteration used the Simple Wallet site (in a separate browser tab) to get user confirmation:
The NFT image was opensourced from Unsplash.
The Title & Creator were randomly chosen based on the image.
The price was chosen specifically to portray the NFT as valuable, yet still affordable.
Notice how the SW site shows the price in the USD amount, not ETH; This aligns with SW's commitment to keeping users free to browse and buy art without worrying about cryptocurrency.
Next, I added a simple version of the User Login flow: