Shop Experience Breakdown
Making spending crypto fun
The utility of this app at its simplest form is to simply alert the user if BitPay is available as a payment option. So we have 3 major pieces from this premise:
- 1A page to view info about the page you're on
- 2A list of all websites we support
- 3Store credit purchase flow (if applicable)
A BitPay supported Brand can come in 2 forms: either a direct integration (Newegg, AT&T, Microsoft), or through a third-party reseller via gift cards (Amazon, Delta, DoorDash). A directly integrated merchant has a relationship with BitPay where we take a share of their checkout payment options and accept crypto on their behalf, settling the next day in fiat. Because the initial setup for any integration has a non-zero overhead, many times payment processors clump into aggregators to make selling integrations easier. Similarly, gift card aggregators allow an array of payment methods, BitPay being one of them.
A compact display of essential info
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:
- 1Twitch: Discover more gaming brands
- 2Wikipedia: Donate with crypto
- 3APMEX: Use crypto and save
With this, we land on the 3 cores of the Shop experience:
Discover, Spend, & Save.
Discover Related Brands
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.
Donate or Spend
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.
Save with Crypto
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.
Directory: Browsing Made Simple
100+ supported sites at your fingertips
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.
Amazon Cart Detection
The magic of custom-value gift cards
Since the origins of the gift card program, the idea of pre-filling the amount to match your Cart Total exactly has always been enticing. It was never truly possibly from the mobile app; the in-store purchase flow was seamless enough but you still had to type in the amount. With a browser context, the feature suddenly became a possibility. We have built an expansive index of auto-fill capability for many of the gift cards we support.
This makes the experience as simple as:
- 1Proceed to checkout
- 2Open the app & click "Pay with BitPay"
- 3Pay with crypto to see your voucher
- 4Apply your code & checkout
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.
Custom Integration Handling
Amazon gift cards are especially unique because an email address must be passed in at time of payment generation. This basically means that we need to prompt for an email address before a user can click the "Pay with BitPay" button.
The input fields in the extension are especially designed to always allow for a helper text to be associated with the field. In this case, we explain why the email is needed. We then reuse this email for future payments because BitPay also requires an email address before actually paying. You can change your email or pair your BitPay account at any time from Settings.
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.
Minimize & Drag
Take control of your experience
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.