Xapo App 2019 Concept





UI Design, UX Design, Mobile App Design



Coggle, Figma, Paper prototyping

In late 2018, the Xapo management team decided to define a vision of the product they want achieve by 2020. The plan is to progressively morph the existing product into the new one. I worked on the first iteration of this caterpillar-to-butterfly journey, together with the PM.

The challenge this project presented was in simplifying the structure of the app, and untangling the unintuitive flows the previous app had. Because it was developed in a start-up environment, without a clear vision of what the product needs to be, it accumulated a lot of UX debt. To identify the problems, we’ve done a heuristic analysis and looked at the customer feedback we had available. Let’s dive into a few problems we targeted and the solutions we came up with.

Map the way to clarity

A redesign effort by the core team was already happening in parallel while I was working on this iteration. To help ourselves understand everything that was done and everything that was still missing, we’ve first mapped the system as it was. We’ve debated everything that we’ve thought could be improved and drawn a new mind map (the one on the right) to define what we want to build.

A useful dashboard

Much like with a physical, users are often checking it to check how much money they have. To make this information easier to find (less taps) I’ve brought together in a single screen, using a card layout, all balances of currencies, prepaid cards and savings deposits. This also allows the user to quickly navigate to any balance destination when searching for a single transaction – another very common action.

Prepaid card management

The prepaid card is the most important part of the app, is it’s the main transaction instrument. Because of this we’ve given the card a dedicated section in the bottom navigation. Here the user can easily find transactions, add or withdraw funds, and manage the card (freezing future transactions, cancelling, adjusting limits, etc).

Handy core actions

The main actions a user can take is adding money to their account, sending money to a third party, or finding a nearby place to withdraw cash. We’ve put these actions front-and-center.

From prior experience, we’ve known that the process of adding or sending money was harder for our users to comprehend. They did not easily understand the steps they need to take and what information they’re expected to provide. To make this clearer, I’ve used visual design to clearly show and group together the steps of each process.

Another problem we’ve struggled with is finding a simple way to manage money-out flows to 3 different destinations: an account within Xapo (eg: prepaid card, savings account, or balance of a different currency), an external account owned by the user, and a 3rd party. Because all these transactions are, in essence, transfers between 2 accounts, I’ve designed a single, unified, flexible flow that allows users to any source and any a destination.

Saving for a goal

Everyone wants to save money but for many, somehow it keeps sleeping through the fingers and at the end of the month, there’s little left. To help our users achieve their goals, we’ve designed a solution that allows users to create savings accounts, and add funds to them automatically, based on a set of rules. These include sending a recurring fixed amount, and transaction sweeps – rounding up each transaction and saving the excess.

Other considerations

Finding a transaction. Users assume that a transaction will be settled without any issue. Therefore, more often than note, when they need to find a transaction, it’s because they have a problem with it. Because this is a stressful situation, we’ve done a few things that not add to the pain by easily finding the needed information. We’ve grouped all transactions that require attention to the top, we’ve included a search-by-keyword feature, and added a filters drawer that makes it easy to narrow down a search whenever the user doesn’t know what keyboard to use.

Help and other features. To help users feel at ease that help is only a few taps away, we gave the Help section more visual emphasis by placing it at the top of the ‘Other’ tab. Here users can search in a knowledge base, or contact a support agent if they don’t find the right answer.

The app includes many other important features, but which are secondary to everything else. We’ve grouped all of them in this section – managing contacts, a chats log, a referral program, generating a login code for desktop, fingerprint setup, and more.


This is a unique website which will require a more modern browser to work!

Please upgrade today!