☝️ How the app looked when I joined the team.
This design was working well for the last five years or so, however it falls short when trying to do things like add more networks, add a DEX and provide users more information and context around transactions.
Three main goals for the redesign:
1) Highlight the features that distinguish BitPay from other crypto apps
2) Educate new users on crypto concepts
3) Improve the information architecture around chains, networks and tokens
Our Engineering lead explains how the Bitcoin derivation path defines what we can and can’t do with wallets.
I also found this thread helpful in gaining an understanding.
One of the challenges at the heart of designing a consistent wallet experience for Bitcoin and Ethereum 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. There are several advantages to using this system, such as ease of tracing transactions and how double spending is prevented. It also allows for smart contracts to hold a balance in the same way a “normal” account would.
Because of this, each Ethereum address can have a balance, contract code and data storage, and the system allows the account balance to change with each transaction.
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 repationship with the chain
If they have a wallet on home, still show the empty state of “create/import wallet” last
If they have mastercard, only show the card with amount, not also empty state
If they have gift cards, still show empty state of gift cards last (before wallet empty state)
If theres no value in a wallet, asset, coinbase, or read only.. don’t show % increase/decrease
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:
This page did not exist on the app prior to the redesign. Since 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 chain like Bitcoin, Ethereum and Avalanche.
Or they could create three different wallets that each contain only Bitcoin, although I’m not sure why they would do that. The point is to allow for maximum flexibility.
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 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.