Dean Fankhauser
Let's build the best

Xapo Bank

I was responsible for overhauling the company's iOS, Android and website.

Additionally, I headed up something called the Xapo Design Framework. It's a framework for designers, developers and product managers to work together in a research-focused, user-centred way.

Xapo has more than 700 employees and 8 designers working completely remotely all over the world.

Summary

I was hired to overhaul Xapo's products and processes. 

Xapo is a Fintech company trying to build a mobile first banking system built on top of Blockchain and Bitcoin. It's a profitable business with hundreds of millions in funding from the world's top investors.

Established more than 4 years ago, Xapo provided a service that millions of people loved, however, their products left a lot to be desired in regards to both usability and design.

A big part of my job has been instilling a design process that integrates well with the company's engineering process. An important part of this was becoming a data-driven company to create product in a more iterative and research-driven way.

My role

  • Personas
  • Product strategy
  • UX Frameworks
  • User research & Analysis
  • Sitemaps & user flows
  • Wireframes
  • Prototyping
  • Usability Testing

Methodologies

Agile, Lean UX, UCD

Tools

Figma, Jira, Confluence, Dovetail

Defining problems & vision

Problems

Xapo was known for providing the most secure way to buy and store Bitcoin. This wasn't the vision the founders set out to have and instead they wanted to build a new banking infrastructure based on Blockchain and Bitcoin. 

This meant being able to use traditional currencies in addition to Bitcoin. Users should be able to transfer, save and spend money on cards as well.

The existing apps and website didn't allow for that and I needed to create a product that did.

Vision

Create a simple, global bank that allows people to send money around the world instantly, free and be rewarded in Bitcoin for spending. 

Research existing experience
Xapo Bank

User Survey

We wanted to test some of our hypothesis and assumptions around problems / goals, so we created a survey for 200 Xapo users.

Results:

  • 52% of users use Xapo exclusively for storing Bitcoin. Solution: We already provide a great storage solution, we need to focus on other things.
  • 38% said they would like free international transfers and earning rewards in Bitcoin. Solution: Make transfers free and build a rewards system
  • 45% said they would like to receive rewards when making purchases on their card. Solution: Make the rewards system tied to card purchases
  • 45% like having good exchange rates for currencies. Solution: Many of the users didn't even know this was a feature. We need to bring it to their attention more.

Reviews

We wanted to see what people thought of the app. The App Store had a trove of insights we went through and noted.

The reviews were mostly terrible. A lot of it were to do with service, app technical performance and usability.

Competitive analysis

Competitive analysis - Brand experiences

This was mostly done as a set of video recordings where we could replay core experiences in competing products. 

Personas
Xapo Bank

Personas

Based on the interviews/workshop we set up three personas. We referred to them throughout the entire product development process.

  • When developing the personas, we used a mixture of our user research and stakeholder insights
  • We decided we needed personas when we found ourselves referring to our own needs instead of the target customer's.
  • Once developed, it was our north star for the designers, developers and stakeholders
  • It helped give clarity to the project and remind us that we're not developing this for ourselves.

Sitemap & user flows
Xapo Bank
Xapo Bank

With the research and personas in place, we were inspired and informed enough to start creating the first ideas around sitemaps and user flows.

After our first workshop, I started developing a sitemap and user flows to reflect the scope and priority of features for this project.

Sketches & wireframing

The most important page to start with was 'My Money'. This is the page that users would arrive to when opening the app, so it was critical we got it right.

There were countless iterations, mostly based on assumptions from stakeholders with this page. We were able to test many of those iterations with users which was incredibly helpful and helped drown out opinions with more fact-based research.

Core actions

These were some of the initial ideas we had to 'My Money' and its core functionality around adding, exchange, moving and withdrawing money. Based on the research and testing we did, these were the core functions that Xapo users needed the most.

In the current app, those actions are hidden and hard to conduct. With the new design, we wanted to bring them front and centre.

Multiple accounts

While having multiple accounts was a function of only 1% of our users, it was our top 1%, so this functionality was something the stakeholders wanted to dramatically improve. 

In order to switch between accounts, it's very difficult and confusing in the existing app. We found a simple way to do that within 'My Money' that tested very well when we ran it by our users.

Xapo Bank

Onboarding

Above is an example of our onboarding flow that required a lot of testing, and iterations based on legal and compliance requirements.

End results

Web

My main priority for the web was to create something my grandmother could use. The existing website was too clever for its own good and led to confusion and distrust with the company. 


From a UX perspective, it's very much 101 with usability at its core. It tested extremely well and while we needed to optimise for web, we were able to bring a lot of the mobile design language and features across for consistency sake.

"This is so much easier! I now know how to withdraw money."
Lynne, Austin

A new homepage

In addition to the screens above, we needed a new homepage that reflected the brand's new positioning and features.

Mobile

Most of our users are mobile first. This is where most of our most bold experiments took place and the majority of our testing. 

We were able to not only introduce new UX, but a completely new design language.

We successfully aligned Android and iOS designs which makes design, development and testing so much more streamlined and successful.


This update was incredibly challenging with a fully distributed team, however, the lessons learned from process and tools were invaluable. Whether it's distributed, or onsite, I feel like I'm a significantly better maker and leader as a result.

Below is a video outlining the company's rebrand and repositioning in the marketplace.

34
Interviews
14
Usability Tests
22
Iterations
2.3m
Downloads
Learnings
  • Data is crucial – There were a lot of stakeholder and team assumptions that caused conflict and mistakes. Data doesn't lie and helps align everyone to fact-based insights that you can feel comfortable executing on.

  • Design tools are changing – We used Figma in this project. It's collaborative in real-time which opened up all sorts of powerful opportunities, but also new challenges we had never faced. If you learn how to tame this beast, it's an incredibly powerful, scalable way to build products of the future.