Xapo 2020

Client

Xapo

 

Team Setup

Solo designer, working with a PM and consulting with other team members

 

Capabilities

UI Design, UX Design, Mobile App Design

 

Tools

Coggle, Figma, Paper prototyping

The challenge

In late 2018, the Xapo management team decided to define a vision of the product they want to 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 a Product Owner, that had a deep understanding of the product and the fintech industry. The challenge this project presented was in simplifying the structure of the app, and untangling the unintuitive flows of the previous app.

 

Solution summary

We designed an app that built on the version we had in the Store at that time, making it more intuitive, user-friendly and useful. As with many apps developed in a start-up environment, the product was missing a clear vision of what the end goal is and thus it accumulated a lot of UX debt. To identify the problems, I’ve done a heuristic analysis while the PO looked at the customer feedback we had available from previous version of the app. Next we regrouped and pooled together all our insights to decide what to fix and what new features to add. We used Figma to work collaboratively and daily calls to review progress and keep things moving at a fast pace.

Final prototype

This is the final prototype, created in Figma. Go ahead and click through to explore the design. For a better experience, click the arrows in the top-right of the Figma embbed to open it in full-screen.

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 first mapped the system as it was. We 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 wallet, users are often checking the app to see how much money they have left. To make this information easier to find (less taps) I’ve organized in a single screen all balances of currencies, prepaid cards and savings deposits. This also helps users to with a second task they perform often – navigating to any balance/account to searching for a specific transaction.

Prepaid card management

The prepaid card is the most important part of the app, is it’s the main transaction instrument. We’ve designed a section where the user can easily find transactions, add or withdraw funds, and manage the card (freeze future transactions, cancel a card, adjust spending limits, and more).

Handy core actions

The main actions users want to take are: adding money to their account, sending money to a third party, and finding a nearby place to withdraw cash. We’ve put these actions front-and-center.

From feedback gathered in the past, we knew that the process of adding or sending money was a bit hard for our users to comprehend. They could understand at a glimpse what are all the steps they need to take and what information they’re expected to provide to send or receive funds. To make this clearer, I’ve used structured the layout to make it easier to visualize the process and understand what goes into it.

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 select any source and any a destination.

Saving for a goal

Everyone wants to save money but for many users, somehow it keeps sleeping through their fingers, leaving them with almost nothing at the end of the mont. To help them achieve their goals, we’ve designed a solution that makes it easy to create savings accounts, and automate saving by adding regularily adding money to it based on a set of rules that the user can define.

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.

FollowDribb.Ins.Lin.Tw.
...

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

Please upgrade today!