xapo app motion design

Xapo

 

Xapo is a new breed of banking – bitcoins, no fees, and an ingenious solution for using bitcoins with a real plastic card. They are bringing the digital currency into the real world. To show they meant business a beautiful mobile app was needed. After their designers laid out the visual design, I came on to bring them to life.

xapo startup animation

Bitcoin Graph

 

When you first launch the Xapo app, you are presented with a realtime chart of the Bitcoin price. Although we could get the new bitcoin price very quickly, we opted to update the animation every two seconds. Updating it longer than that and it seemed unresponsive. Any quicker and it felt too erratic. This money is essentially in a checking account directly tied to your Xapo card, we don’t want it to feel like your balance is fluctuating rapidly.

xapo wallet motion design

Xapo Wallet

 

The flagship feature of Xapo is the Wallet. This is where users can access their bitcoins and tie them to their physical card.

 

I had some fun with the PIN entry and morphed the blank spaces into asterisks. Once the right PIN is entered, a subtle ‘nod’ animation reinforces the user’s actions. Then we can flip the card around and reveal all their personal data. Since this represents a physical card I decided to give the card a very physical felling to strengthen that link.

xapo correct password
xapo incorrect password

Vault

 

The vault is the secure bitcoin storage and insurance. The transition needs to reflect that secure feeling.

 

I put the insurance card behind multiple layers and gave all the pieces a back and forth ‘unlocking’ animation. Now the Xapo insurance is securely behind the vault.

xapo password entry

On most apps, password entry is boring, this is the perfect time to surprise the user with some delightful animations.