Shop Experience Breakdown

The work to optimize the hop from crypto to store credit to redemption began several years ago in the BitPay Wallet where the emphasis was on in-app or in-store redemption.

Now with a desktop browser extension, we had a chance to do something similar with directly integrated merchants.

The Brand page for each supported site is the main entry point to the rest of the experience. In the collection above, you can see 3 types of directly integrated merchants:

1. 1
   Twitch: Discover more gaming brands
2. 2
   Wikipedia: Donate with crypto
3. 3
   APMEX: Use crypto and save

With this, we land on the 3 cores of the Shop experience:
Discover, Spend, & Save.

For this page, I placed an emphasis on keeping the user engaged and letting them organically explore. The first place I looked to for inspiration was the iOS App Store; you can see the heavy influence in the layout of the Title + Caption + Logo as well as the You Might Also Like section

We often get "I didn't know X accept bitcoin?" so for directly integrated merchants, I made Payment Instructions a first-class citizen. The details attempt to concisely describe how to find BitPay as a payment option on a given site without taking up too much space.

Optimizing for cases where there are primary Call to Actions was pretty simple: just add a big blue button. You can see the 2 different variations of CTAs I experimented with between this section and the previous: the first style being the iOS-esque slim pill near the top. I ultimately decided to keep things simple while maintaining a fallback for vertical scroll. A fixed footer button with scrolling content underneath turned out to be the only configuration that made sense.

A common way Brands promote crypto as a payment option is to run discounts that are automatically applied; similarly, BitPay runs promotions of gift cards to gain a surge in traffic. With this in mind, I knew that a Discount section would be a core piece of the page.

Inspired by the iOS App Store, the Discount pill is prominently featured right after the caption and is color matched to the brand for that extra premier look.

One of the key features I wanted for this app was mixed categories as opposed to the Website Directory where gift cards are kept entirely in a separate category. Additionally, I thought keyword search would be a neat feature that would make browsing more convenient (ex. searching "Gaming").

Making this happen came down to brute force; we ended up manually labeling each gift card with keyword tags and then composed categories from those keywords. As a result, the first thing you see on the Home page are "Curations" or featured Brands. Below this you can find an exhaustive list of categories as well as a list of all Brands we support.

The Enter Amount screen was definitely a challenge to get right. I wanted the screen to feel like something you would see on mobile while still being very responsive to keyboard input. The + and - toggles being ever present was a stylistic choice I decided to enforce; I found that any error you would make would only reinforce the denomination fluidity.

Another thing to note is that I left out currency symbols. I am entertaining the possibility of a future where you can denominate gift card payments in crypto. I think this type of usage would be interesting at the very least.

With discounts, I decided I wanted to showcase the effect rather than saving a screen and immediately launching the payment. The end result is that the user is able to review exactly how much they saved and will have to spend.

The idea that a discount can be present in the form of acquiring credits is counterintuitive but still powerful. This means you can use another app like Honey to also apply coupon codes and get extra savings.

One of the cool things you can do with a prepaid card is add it to your phone's Apple Pay or Google Pay wallet. To do this, Mastercard requires a phone number before time of purchase however you can easily skip this step and proceed to purchase.

As part of the purchase flow, I created 2 types of error styles that we could use depending on the situation. The "Toast" style error message is a flexible way to display specific errors that occur within the extension app. This could be a invalid input or something more severe.

Because the gateway to actually pay with crypto is in a separated context (we launch a BitPay Invoice in a popup window similar to PayPal), I created a simple generic "payment gateway error" style that is direct mutation of the "Pay with BitPay" button. This creates an elegant circular animation from "Pay" to "Awaiting" to "Error" back to "Pay" where you can retry.

An idea I had going into this design was to create a universally present component that looked and felt iconic. I think we accomplished this with the Extension's Control Bar. You can drag the app to anywhere on the page you like so you're never obscuring something important.

Need to review some more stuff on the page before you pay? No problem, just click the Minimize button and the app elegantly folds into slim tab that you just want to play with.