Xapo Prepaid Card

Client

Xapo Inc.

Capabilities

Product planning, Rapid prototyping, UI design, UX design

Tools

Coggle, Figma, Pen and paper

Xapo is an e-wallet and vault that can hold Bitcoin and ~150 fiat currencies. Until 2016 Xapo had a debit card but due to a faulty partner company the card program was cancelled. Now, with new, top-tier partners, Xapo created a new program for prepaid cards. I worked closely with the PMs and developers to get this new card in the hands of consumers in the US and Europe. This was a challenge due to some limitations imposed by our partner companies or laws in each region.

Defining the concept

We started by defining the product we want to build. During a series of meetings we’ve built and refined a mindmap that lays out logical elements and features, and suggests how they’re connected. To help think through all the complexity, I’ve also done simple paper sketches in parallel.

The right UI solutions

After agreeing on the mind map, we had a clear understanding of what we want to build, and great team alignment. Next, we went through an exploration process by wireframing different solutions and debating them in regular meetings. I’ll mention below a few problems we encountered.

Unavailable card data. Because the company wasn’t PCI compliant at the time, we couldn’t show card data in our app. Only our card issuing partner could display them. We decided to open a stylized web-view of the partner portal, in order to make the experience as integrated and as seamless as possible. Unfortunately, this requires the user to be connected to the internet.

Owning multiple cards. Because we were issuing a prepaid card, we had to group each card with it’s complete history of transactions. To solve this, we’ve used a carousel across the top of the page that brings in focus one card at a time. It acts as a tab head. Below, there’s plenty of space to show the CTAs and the latest transactions. When scrolling down, the header collapses but keeps the essential card information visibile.

Frictionless top-ups. The main issue with a prepaid card is that you have to constantly add funds to it. To help with that, we’ve used a simple top-up flow, and planned a feature that allows users to schedule recurring card top-ups.