My Xapo (card) journey.
Xapo is a Digital Financial Services company, a secure, mobile-based banking account that allows you to hold, exchange, spend and transfer without fees in multiple currencies and Bitcoin.
Xapo was looking for a person with broader design experience outside of digital for their card squad. When I joined, they were going through a heavy rebrand and a huge gap has opened where they were no longer able to issue debit cards nor maintain the ones already in the hands of their customers. And people were not happy. How did we know?
Lack of a debit card feature was consistently in the top 10 complaints to Customer Support for months. A quick look at that, our personas and, to be completely fair, common sense. Brought us to our problem.
problem.
No checking account product is complete without a fully rounded payment card.
— User problem
Low Customer Lifetime Value. No card means = low number of transactions = low customer lifetime value.For this business to stay healthy we need to have a continuous flow of customer transactions.
— Business problem
challenges.
From a Product design perspective, I was facing the challenge of not only having to create a user-friendly experience but make sure we spew confidence and help regain our customers’ trust and faith in the product.
Due to the lack of a solid card product before, I needed a helper in all this as there was close to no data I could work with.
Not only that, but we were launching the product in multiple regions with the aim to create a global offering so I had to be mindful of different behaviors as well as languages.
But the biggest challenge with this was partner & card issuer limitations & specifics, not only around money in and money out operations but also in regards to how the card operates, how it can be managed, or how it works.
We had to deliver 4 very distinct experiences which was a challenge for both design and engineering as we were launching in:
US: Debit card and a USD and BTC account
Argentina: Prepaid card in Argentine pesos
Brazil: Debit card linked to the user’s BRL balance
Europe: Multicurrency debit card
OKRs.
Increase customer lifetime value by offering a comprehensive feature set and a frictionless customer experience.
Minimize friction points to ensure a smooth experience. As I said we had to focus on customer trust & not simply provide a product, but provide a product that works both in-app and outside of it.
Funnel completion of 80%.
We had to identify success areas and problems and fix them. Some customers have been waiting for this product for a long time and then it was taken away. We had to mitigate that by ensuring the smoothest experience possible. We had to think about the end-to-end experience – from ordering the card through activating it, through receiving it in the mail and beautiful design to bring the enjoyment of using it on a day-to-day basis.
Full process cycle completion – from ordering to making transactions.
We had to deliver features to the customers based on their expectations in order to be successful and build loyalty. Build a roadmap for the next releases and inform future iterations.
Prioritize feature set.
NPS over 35.
milestones&metrics.
As mentioned there were flows that had already been developed, but never tested. When starting to work on the project and shortly after I immediately identified certain friction points so I needed to arm myself with some data in order to make data- and user-driven decisions. Therefore I wanted to validate these initial ideas before we launch a BETA, which was a long-term goal, and use the Test Level Satisfaction & Customer Sentiment metrics in order to measure the overall customer satisfaction & the Net promoter score based on the overall card experience.
The reason we chose to go in that direction was we wanted to get a complete overview of the true experience gained by the end-users while experiencing the product. And we felt this was needed as we had the added aspect of physicality in the face of the plastic Xapo card.
A business goal was for 100% of our users to own a debit card.
team.
A bit about my partners in crime. On a day-to-day basis, I was working with the Product Manager on the vision & ideation.
Our researcher would help me get qualitative data and validate our decisions. I would also work with a content writer on the communication strategies & copy.
A Product Owner who would drive the communication with both backend and front end, write user stories based on PM/PD priorities and manage the dev sprints.
Along with the PM & PO, we would get an idea around technical constraints & dependencies if any.
But also by working closely with engineering. This communication I value a lot. Alignment and communication with engineering to me are key so involving them from the get-go is essential for a successful project and a respectful work environment.
Of course, collaboration with my fellow Product designers with whom we would often do a show and tell to be aligned, get feedback, and stay aligned on the Design System and different parts of the product.
On top of that, we would have Visioning meetings with the co-founder and head of product to collate their requirements.
my role.
My role was to ideate along with the Product Manager to come up with viable solutions to our problem.
Work with our researcher to gather primarily qualitative data, identify areas of the experience we wanted to user test in order to validate our ideas.
Create lo-fi, hi-fi designs and prototypes. As well as work with a content writer on the communication.
Work along with the engineering team on execution as well as maintaining our design system.
process & friction.
So After we’ve done the initial discovery and defined our problem as well as initial ideation, we decided to validate these ideas and iterate before we launch a beta and repeat. But we still wanted to launch with a relatively solid solution.
After getting the initial requirements, another one came in from the business. They wanted to act fast on the original business problem which was increasing revenue & reach the goal of 100% of Xapo customers owning a card. They wanted to push the card order the next time the user opens the app WITHOUT an option to leave the process.
Let’s circle back to our original USER problem. “No checking account was complete without a card and people need quick access to their money when they need it. Doing things that way seems to resonate with solving both problems, doesn’t it?
However, is it the best experience to push the user into doing something, and not only that, but these are my money, my savings, my investments, at this point you are building a wall before I can reach my money as one user put it? “But it’s a short process” was the answer.
more friction.
It all begins with an idea. Maybe you want to launch a business. Maybe you want to turn a hobby into something more. Or maybe you have a creative project to share with the world. Whatever it is, the way you tell your story online can make all the Xapo wanted to provide:
Security in terms of storing your financial assets
Access to your money, at any point, banking at the palm of your hand
Exchange at favorable rates between bitcoin and many fiat currencies.
And let’s not forget we are working on trust.
With the proposed solution I could identify a few friction points:
Changing my delivery address might need to be verified again and provide tons of documentation to do so. Also, it could take days
I could also not agree with Ts & Cs, or have no time at this point to go through them. But they can contain important information about fees, for instance, which our customers were highly interested in
Blocking web entry – For our web users this would have meant we are blocking their entry as 2-factor authentication was accessed within the app
So we are impacting:
Security– as I cannot reach my money
Transparency – I don’t know if my money is secure
Exchange – a good time to buy bitcoin, but I can’t reach the app
Trust – I don’t trust you anymore as you are not letting me check on my financial assets.
research.
I decided to conduct a series of moderated usability tests which proved my hypothesis that pushing a card order with no option to opt-out was not a good idea from a user perspective. If we look at Marcus for instance, who is a Finance Director for a large non-profit organization and uses Xapo for managing not only his personal account but also his clients’ assets. Sometimes he has to act fast and needs immediate access to the app. And yet here we are placing this wall in front of him.
This was the beginning of a series of moderated and unmoderated usability tests with which we wanted to test both the experience and the UI and discoverability & usefulness of certain functions.
findings.
Take important content out of the banner context and consider removing the illustration.
2/6 people mentioned they wanted to be reassured of the PIN they entered. Add a re-enter PIN section.
⅙ people mentioned choosing a date of card delivery. Consider offering elected delivery dates
Keep the hang-tight screen.
We decided to improve the UI
pitch screen & trade offs.
For instance, the Pitch screen of the card flows as we call it. Some options were too underwhelming, some seemed too overwhelming with one user saying “This is banking. This is serious. Don’t show me confetti.” Some tested well. As a trade-off, we did not immediately act on that.
Would soon become…
For the delivery address section, what we found out was people had different expectations with the delivery date shows so prominently. They needed an option to ENTER A DELIVERY DATE which we could not provide at the time. So this had to be another feature we leave for later.
However, oftentimes users would not get their card delivered due to missing information in their address due to them not inputting it in the first place, but also because they did not pay attention to the fact that their address is incomplete. To which our solution was to point out any missing information and provide an option to complete it.
delivery address.
animation.
We had a screen which despite the noise from the business that it was unnecessary in an understandable way, was welcomed by users. The problem was when a card was ordered we had to send a request to a third-party provider and await a response of “yes, we can issue a card to this user”, “no, we can’t issue a card to this user”. There were issues with calculating the average times. One provider would take 2 seconds, the other up to 2 minutes, third even more. So we used to show a lot of unnecessary statuses to the user which was causing confusion making users think they are under validation. But this animation, in particular, did make users feel special and appreciated as if we are building something for them. So we decided to leave this and still give that warm feeling of “look they are building my card”, but remove any time or unnecessary status screens.
card dashboard.
The Card dashboard was getting really busy and when we asked participants to activate their card they seem to have formed some sort of banner blindness, but also due to the amount of text or else. So we knew we had to provide them with a clear way and visible way to activate their card and set their PIN which tested really well. Also we decided to show them the delivery address in case they had make a mistake to act on it by contacting support.
trade-offs.
The delivery had to be handled as it’s important for the users to actually receive the card. So we knew we had to do improvements although there was a lot to cover still like tracking.
Confirming the PIN, we had to first eliminate some technical constraints. Looking to implement it now.
We also understood that freezing the card is a valued function as well as controlling spend limits and other card controls, e.g location-based security & freezing ATM withdrawals or payments abroad. We decided to leave the freezing function as the most basic of them all, but leave controls and spend limits out of the first MVP.
Benefits are quite an extensive work which definitely had to be left out of the MVP and we decided to work on the pitch screen when we had more to offer
beta.
After multiple iterations and after having developed most of the things in the pipeline, we ran beta campaigns in Brazil, Argentina, the US, UK, and Spain with existing customers as well as an alpha campaign internally.
My role was to design the emails as well as work closely with our copywriter to devise the whole communication strategy not only for the beta but for the BAU emails as well for all 4 regions. Also, I worked with engineering and architecture to get these out to customers.
The main objective of the Beta, was to get a complete overview of the end-to-end user experience – digital & physical by rolling out to 2% of our users.
As I said before the goal was to accelerate the adoption of the debit card among selected users and collect objective, independent information about the quality of the new card service via live transactions and customer survey feedback in a short period of time.
We would measure the Test Level Satisfaction of the end-to-end experience of our cardholder customer.
research.
We ran the beta in Brazil, the US, and Argentina. As well as an internal Alpha test in Europe. I will use the data we gathered from Brazil.
We had 30% of invitees’ participation.
The data is too big for me to cover. We did get very positive feedback with leaving our customers with a flattering feeling making them feel honored and privileged, but moreover, the flows were mostly praised for ease of use, simplicity, and speed.
challenges.
We also faced some UX/UI challenges along the way. Like merging the Account and Card tabs.
So I had to find a way to make it visually clear which balance is the card drawing from (debit vs prepaid vs debit multicurrency) and at the same time adhere to our issuers’ regulations around card design within the app. And communicate the different card statuses such as a card in delivery, card frozen, card disabled, card not activated.
ui.
I went through many iterations, some of which you can see above. What worked for one program did not work for another as they were different types and offerings. What turned out at the end is we cannot use most of them as Visa’s requirements were quite strict in regards to the way a Visa card is depicted in the app.
What you see here is the final UI design which by incorporating the balance within the card for a debit card and also a pre-paid card , but with a separate balance in the same currency, as well as a generic view for a multicurrency card was the one which worked for all variations.
finale.
We were ready for the final touches. I prepared a series of Principle prototypes and below is a snippet of the actual app developed by our iOS team. We wanted to design a smooth transition from the account tab to the card view with a good-looking animation of the card considering all of its statuses.
Unfortunately, in March 2020, Xapo went through a huge change. The product is now taking a different direction and we were unable to finish a lot of the amazing work we had started. 50% of the employees were let go and development has stopped until we work on the value proposition for the new product.
But to end on a positive note, this has been an amazing learning experience and everything we encountered along the way is now extremely helpful. And although our target audience is changing, a lot of our findings are still valid and we are using this knowledge to build an even better product.