Cody Pellatiro Read.cv

2022 Blockchain.com

Designing a neo-bank debit card and NFT marketplace inside the wallet

In 2022 Blockchain.com set out to add new products to its existing wallet: a Visa card for spending crypto, and an NFT marketplace. I designed both experiences alongside Visa.

Company
Blockchain.com
Role
Senior product designer
When
2022
Scope
Card, NFT marketplace, research, component library
A gradient Blockchain.com Visa debit card beside a phone showing the same card inside the app.

In short

  • Two products in one year, both inside the wallet people already had.
  • Both needed to work within constraints of the existing app and external partners (Visa and Opensea).
  • The card was shelved before launch. The marketplace ran six months, then scaled back to view-only.
Crypto back on every purchase
0.5%
From start to a near-complete marketplace
6 months
Products designed inside one wallet
2

Overview

Two products, one wallet

The card would let people spend crypto anywhere and earn some back. The NFT side would let them browse and buy without leaving the wallet.

Both went into a product built around balances, so each time we had to work out how far that could stretch.

Card

What we set out to build

The card MVP had to essentially stand up an entire banking layer in the wallet, cover the card controls expected at launch, and get a physical card issued in the US with Visa.

We kicked off with research around Coinbase, Nexo and Revolut showing us how ordering, funding, controls and card states normally work. From there we began crafting our own card ordering and management experiences.

The Blockchain.com Card wordmark on a dark navy field.
The Blockchain.com Card dashboard on desktop, with asset rail, card art, payment method and recent activity, beside the same dashboard on a phone.
The card dashboard on desktop and mobile.
Five card-ordering screens: the offer, how ordering works, choosing a virtual or physical card, review and submit, and the card in the wallet.
The card ordering flow, offer to wallet.

Settlement

Transaction states

A purchase takes several steps to settle. We mapped each one, then designed its screen.

Those states had to read the same in card activity and in a wallet that only knew on-chain transfers.

Three card transaction screens showing a flagged and declined charge, a merchant cancellation, and a completed payment.
Transaction states displayed in the transaction detail sheet.

Cryptoback

Managing cryptoback

Cryptoback means giving 0.5% of every purchase, in whichever asset the cardholder picks back as a card perk.

Lifetime earnings sit at the top, split by asset. Customers can switch what they earn in at anytime and can see an overview at the top.

The Cryptoback explainer and the account screen.
A What’s New sheet explaining unified stable coins over the card dashboard, beside a payment method panel listing US Dollar, USD Coin and Bitcoin balances.
Payment method management, crypto or fiat.

NFTs

Bringing NFTs into the wallet

NFTs peaked in early 2022 and the company wanted browsing, buying and transfers inside the wallet.

I had pivoted from the debit card in parallel, so to orient myself we went through OpenSea and Rarible to learn what people would expect. This gave us product direction as we built our marketplace in the app.

The Blockchain.com NFTs wordmark on a dark navy field.
The NFT item page on web and mobile: a pixel-art Nouns character beside its collection, token ID and contract details, with a Transfer NFT action.
The item page on web and mobile.
Concept and final release side by side: an early collectibles list in the wallet, and the shipped Explore grid of NFT cards.
Early concept versus what we shipped.
The design system components built specifically for the NFT marketplace

Marketplace

What we built

We added a workspace switcher to keep the main application and the NFT marketplace independent.

Within the marketplace we built an explore page, profiles for owned NFTs and a dedicated sub-wallet for transacting.

The workspace switcher open in the NFT marketplace: a menu offering Wallet (buy, sell and swap crypto) or NFTs, with NFTs selected, over the marketplace home.
The app switcher between Wallet and NFTs.
A My Wallet sheet showing a total balance with Ethereum and Wrapped Ethereum lines and an Add Funds button, over a dimmed marketplace page.
A dedicated wallet view of limited assets inside the NFT experience.
An Owned NFTs view: a listing and price filter beside a grid of owned items marked Not For Sale.
Viewing your own NFTs in the marketplace with a custom profile

Outcome

Where they both landed

The card was shelved before launch. Market conditions ended the marketplace six months in, and we scaled back to a view-only model inside the wallet.

Being modular is what made the pivot quick: bidding lived on the item screen and could simply stop rendering. Where we hit technical limits we asked OpenSea's engineers rather than designing around them.

Adapting to shifting business needs is part of the job, even when it means shelving something that far along. When all was said and done, I still think open, de-banked tools are an inevitable future.