☝️ How the app looked when I joined the team.
Goals for the project
This design was working well for the last five years or so, however it fell short when trying to do things like add more networks, add a DEX and provide users more information and context around transactions.
Three goals for the redesign:
1) Surface the ability to manage multiple wallets
2) Create a visual treatment for assets held on different networks
3) Educate new users on crypto concepts
Figjam on derivation paths and wallet models
Our Engineering lead explains how the HD wallet derivation path defines what we can and can’t do in the UI.
I also found this thread helpful in gaining an understanding.
MetaMask has Accounts as the first level, then networks, then assets.
TrustWallet lets you manage multiple seed phrases in settings.
BitPay let’s you manage multiple seed phrases “keys” on the wallets page.
Challenge of designing crypto wallets
One challenge of designing a consistent wallet experience for Bitcoin and Ethereum/ EVM chains in the same UI is that they operate differently when transactions are sent or received.
On Bitcoin, when you send coins from one address to another, you typically send the entire balance. The amount you specify goes to the receiving address and the remainder goes to a secondary, or “change” address. This is called an Unspent Transaction Output (UTXO).
The balance you see on your “account,” is actually all the UTXOs added up.
Ethereum, on the other hand uses an account-based system where each account directly spends or receives value. It has a different way of tracing a transaction and a different way of preventing a double spend.
It also allows for smart contracts to hold a balance in the same way an account does. Each Ethereum address can have a balance, contract code and data storage, and the system allows the account balance to change with each transaction.
New Wallet Taxonomy:
Keys are now called wallets
Create as many wallets as you want, back them up individually
Wallets have custom names and card designs
Add as many assets (used to be wallets) as you want to a wallet (used to be key)
Asset names are customizable
Assets can be coins (self contained chains)
Or tokens. which have a parent/ child relationship with the chain
Prototype:
Rules for Home Card States
If they have a wallet on home, still show the empty state of “create/import wallet” last
If they have debit card, only show the card with amount
If they have gift cards, still show empty state of gift cards last (before wallet empty state)
If theres no value in a wallet, don’t show % change or graph
With graphs
Without graphs (fallback)
Many many coins
Empty states
Different scenarios
If you have a wallet, show the empty state of “create/import wallet” last:
If you have mastercard, only show the card with amount, not also empty state:
If you have gift cards, show gift cards and not the empty state:
If you have Coinbase, only show the card with amount, no empty state:
Wallet detail page
Each wallet card represents a key, the wallet can contain any asset regardless of what assets are contained in other wallets.
For example, a user can create a different wallet for each network and name them Ethereum, Solana, BSC, etc. Or they could create/ restore three different wallets that each contain only Bitcoin.
The point is to allow maximum flexibility.
Prototype
Card sort test for wallet page
To get a better sense of what information people expect to see their on crypto transactions, I conducted a card sort survey.
I listed out all the information I could think of that might appear on a transaction line item or on a transaction detail page and asked participants to rank the information by importance. I specified that there was no right or wrong answers, its was purely their opinion.
I did two surveys, one to BitPay users and one to a general audience of crypto holders on usertesting.com. As you can see, there was a fair amount of similarities between the two groups:
BitPay users:
General crypto users:
The results…
The results are displayed above as a similarity matrix, which is a representation of pair combinations intended to give insight into the pieces of information the participants gave the same rank the most often. The darker the blue where two pieces of information intersect, the more often they were paired together by the participants.
It also clusters related pair combinations together: the strongest pair is grouped next to the second-strongest pair that either of the first pieces of information have, and so on. Clusters are presented in the same shade of blue.
Onboarding flow
The new onboarding flow includes educational info, wallet creation, asset selection and seed phrase backup.