Wallet Experience Breakdown

One of the major initiatives I brought to BitPay was a heavy emphasis on utilizing merchant branding wherever possible. Until recently, we never presented a merchant's logo on our payment gateway. The Directory project was the first instance of this idea so the branding work I did then laid the foundation for this project.

I knew I wanted to use even more branding for this project; imitating the look of a physical gift card turned out to be the perfect way to do this. Luckily, the Wallet app had been doing a version of this for sometime so a lot of the heavy lifting in terms of mastering assets was already taken care of.

An important thing to first note is that the overall structure of the app is broken up into 3 parts: the Wallet, Shop, and Settings tabs at the bottom. Even though users will be spending the majority of their time in the Shop tab, I wanted to deliver an amazing wallet experience that felt on-par with any major finance app.

The tip section at the top aims to be a centralized way to guide a user as they use the app. If the we detect that the user has multiple codes, then we can conveniently inform them about the Archival feature.

Alternatively, the default Shop Toast serves as simple "mission statement" of the app; reminding users of the unique capability of the extension.

When you visit a supported site and then open the app, I needed a 2 starting states. One would be utilized if the user had no available credits and the other would be the case above where we need to simply display a CTA above your available credits.

The reasoning behind this is pretty simple; we can assume that viewing already available codes is a higher priority than viewing a "Buy Now" flow. For this reason, I kept the Availability Toast very compact, sitting just above the wallet so you don't miss anything.

Gift cards can really be broken up into 3 tiers from best to worst:

1. 1
   Best: Fluid Value (Amazon)
2. 2
   Medium: Fixed Value Prepaid Card (Mastercard)
3. 3
   Blah: Fixed Value (Delta)

Fluid value gift cards basically mean that you can enter any amount within a range; for example, you can purchase an Amazon gift card for any amount between $1 and $2000 without providing any personal info. The ideal use case here is that you always purchase a gift card for the exact amount as your total, spend it immediately, and archive the code in the extension.

A another type of a gift card that is great but not as seamless as the above case, is the prepaid Mastercard which is denominated in $25, $50, $100, $250, $500, $1000 increments. This is really useful because you can spend this card with any merchant but requires you to enter more personal info than a normal gift card. I imagine that the average use case for these gift cards is that someone buys a large amount at once and uses it over time (Note: this requires keeping track of the balance).

Finally, the worst possible type of gift cards are awkwardly denominated ones that require you either purchase over or under the exact amount you need. Delta is denominated in $50, $100, $200, $250, $300, $400, $500, $1000 increments. These types are especially annoying because if you want to cover your entire total with crypto, you must purchase more than you need and then have leftovers locked up with a company.

Taking all this into mind, I crafted a compact interface with clear priorities of actions: allowing ease of redemption, archival, and editing.

The idea behind the large the pad-like areas for the claim codes seemed like an obvious choice. They were large so you're eyes are immediately drawn to them and they easily stack. The Redeem Now button is only available for brands where we can directly link the user to a redemption page. For Amazon, we actually pre-fill the code making it even easier. You can Archive a card after it is completely spent via the 3 dot menu; you can find your old archived cards in Settings.

Like I mentioned previously, one of the expected use cases for gift cards is to slowly use it over time. To optimize for this behavior, we built-in a Edit Balance function so a user can simply enter in the amount that they just spent and the app will automatically calculate the remaining balance.

Sometimes when paying peer-to-peer with BTC, you can accidentally broadcast the transaction with too low of a miner fee, requiring us to wait for a confirmation before we mark the payment as complete. When this happens, its important to make the user feel comfortable that they have successfully completed everything on their end and are just waiting for finalization.

Because we already had consumer accounts in place, I was looking for ways we could add deeper integration to create a cohesive ecosystem. Some of the ideas I had:

1. 1
   Sync gift cards across connected devices (mobile wallet)
2. 2
   Immediately push payment to wallet if connected

In the past, I have always been wary of saving data within an extension because I was worried that I could lose something in the case of accidental error. For these types of users, syncing gift cards to an account can provide a degree of comfort.