Bitcoin UI Kit - Android
OUTLINE
Key Details
Status
Shipped-GA
Type
Open-source
My Role
Maintainer + Design Lead
Download Link
Deliverables
Exploratory concepts, High-fidelity prototypes, Interaction guide for hand-off
Overview
Bitcoin functions as a worldwide payment protocol accessible to anyone with an internet connection, enabling participation and contribution from a diverse user base. Despite its extensive range of applications mirroring its broad user demographic, developing bitcoin-based applications can present challenges.
Having understood the importance of Bitcoin and its potential to disrupt financial systems, this kit aims to assist individuals in navigating the complexities of designing for this technology, irrespective of a users’ location or occupation. While this kit may not anticipate every potential use-case or scenario, the goal is to support users in constructing solutions tailored to their specific needs by providing ready-to-use foundation for bitcoin applications.
Problem
The challenge lies in navigating the complexities of developing bitcoin applications amidst its global accessibility and diverse user base, requiring a solution to assist individuals in overcoming these hurdles regardless of their geographical location or professional background.
Solution
An Android bitcoin UI kit that removes the pressure and guesswork when trying to create bitcoin-specific applications; this kit is replete with flows, screens and potential use cases.
Why Bitcoin is Unique?
The Internet enables individuals from any location to easily and quickly share ideas and information across the globe. Bitcoin extends this capability by providing a universal mechanism for storing and transferring value seamlessly online.
a) Bitcoin is money - digital money.
There are six basic properties that determines whether or not anything can function as money. These are:
- 1. Durability
- 2. Portability
- 3. Fungibility
- 4. Scarcity
- 5. Divisibility
- 6. Recognisability
And for anything to be used as money, it must be:
- 1. A medium of exchange
- 2. A unit of account
- 3. A store of value
Bitcoin being entirely digital meets all criteria of what makes something money. Rather than depending on tangible assets such as gold and silver, or centralised entities like government-backed fiat currencies, bitcoin operates on the backbone of the world's most robust computer network and it relies on this powerful network to mathematically enforce the rules that make it the first truly digital form of cash.
b) There’s a limited supply
The total supply of bitcoin will always be capped at 21 million. Every new generation of bitcoin follows a precise mathematical formula and is strictly governed by the bitcoin network. This contrasts with fiat currencies, which can undergo supply changes driven by government policies, leading to diverse impacts on economies and financial behaviours. In the case of bitcoin, as an autonomous, worldwide asset, its fixed supply dynamics offer significant advantages by fostering reliability and trust.
c) You own it
Bitcoin merges the security advantages of physical cash with the ease of online banking and payment systems. Unlike traditional banks, bitcoin has never been compromised by hacking attempts. Therefore, with proper management of your private keys, you not only possess full control over your bitcoin but also ensure that no one can seize them from you
d) It is open-source
Few financial institutions allow universal participation and contribution. Therefore, it's apt that bitcoin largely relies on the collaboration of volunteers from around the world to sustain and advance its operations.
Bitcoin Design Principles
Bitcoin, a new technology, enables a decentralised financial system where everyone is encouraged to
share in the
network’s security, fostering equal access to economic opportunities without intermediaries.
Supporting core Bitcoin
design principles is crucial.
The UI kit adheres to the following basic design principles guiding the creation of Bitcoin:
Self-custody
Lets users control their private keys, with no risk for seizure or freezing of funds
Security
Provide appropriate and progressive security for all types of users
Inclusion
Build borderless products without location, language or social barriers
Interoperability
Enable import and export of wallet data, maximise backwards compatibility, and use open standards
Decentralisation
Design products that encourage people to run a full bitcoin node
Privacy
Minimise collection of personal information, and maximise financial transaction privacy
Bitcoin User Personas
Before creating personas for potential user, we observed them using research, interviews and surveys to thoroughly grasp and identify what they do, how they think, and what they want. Some things you might want to ask yourself when improving the experience for new users:
- - What is their perception of bitcoin?
- - Why do they intend to use bitcoin? Investment, savings or spending?
- - Where do they prefer to store most of their value, mobile or desktop wallets?
- - Where do they experience frustration?
- - Where does the first experience take place?
- - Do first-time users have specific needs or goals?
- - What motivated you to start using the bitcoin wallets?
- - How long have you been using bitcoin wallets?
Courtesy of Patrícia Estevão, several personas have been developed based on 1:1 interview sessions, and these personas can be adapted as a foundation in your work. See the full process here.
“The perception that Bitcoin is too technical to use can be misleading and scare people away unnecessarily.”
~ Musa, Bitcoin user
Kit
Elements
These contains Colors, Text styles and other details that makes up the smallest part of the UI kit. Users can customise as they see fit and the changes are automatically applied to all other components.
Components
The kit comprises a lot of foundational elements, ranging from universal UI components such as buttons and inputs, to bitcoin-specific features like balance display and address input.
Design Explorations
250+ screen mock-ups are included. Home, transactions, settings, cloud backup,
checklists, wallet
creation, onboarding,
sending, receiving, and other typical user interactions are clearly outlined with accompanying
explanations, allowing
for straightforward customisation.
Get
UI
kit here
A few screens
New user
Default landing screen when a new user launches the app.
Existing user
The user already has an account and has the option to log in or reset the wallet.
Existing user, PIN entry
If the app is protected by a PIN, it can also navigate there directly for existing users.
Product benefits
Explain the main purpose of the application.
Unique features
Highlight unique features that users should know about.
User actions
Let users know what they should do next in order to get the most our of the application.
Intro
Explains the purpose and benefit of cloud backups.
PIN entry
A PIN is required for encrypting the stored data to prevent third-party access.
Password entry
As an alternative to a PIN, you may also require users to enter a password.
Password manager
PIN and passwords could be saved to a local password manager.
Service
Platform-specific options for cloud storage.
Information
Provide users with background information on how their data is stored.
Cloud service provider login
Cloud storage often have custom login and permission flows to allow the app to read and store data.
Confirmation
Final confirmation that the backup was successful.
Intro
Explains the purpose and benefit of cloud backups.
Recovery Phase
The user is asked to write down the backup phrase.
Validation Intro
Introduces the verification process.
Validation, Start
The words are shown in scrambled order and the user is asked to tap them in the correct one.
Validation, Progress
Direct feedback is provided when tapping the words.
Backup Successful
A final confirmation that the backup has been completed.
Home Screen
Payment flows can be entered from the home screen in multiple ways - entering an amount, contacts, and scanning a QR code.
Home Screen Input
In this scenario, the user enters an amount and hits pay. Next, they will choose a recipient from contacts or enter an address.
Empty Send Screen
If the user has not entered an amount on the home screen, tapping “Pay” leads them to a blank send form.
Contact
The contact list to choose a recipient from for initiating a transaction.
Partially Filled Send Screen
The use has entered an amount and chosen a recipient to make a lightning payment to.
Completed Send Screen
In addition to the basic information, the user has also entered a description and added tags.
Confirm Fees
For onchain transactions, users can also choose the urgency. The less urgent, the lower the fee.
Processing
The transaction is being sent. For lightning, this should be a very short time until completion.
Processing Delay
The interface updates users if transaction processing takes longer than expected.
Onchain Processing
An onchain transaction takes ~10 minutes to receive a first confirmation.
Home Amount Input
Basic amount input with the option of entering via the local currency. This requires the application to know the current exchange rate.
Combined payment request
The QR code includes both an onchain address and a lighting invoice. Users can swipe left and right to navigate the details and options screens (indicated by the dots).
Lightning payment request
Visual feedback is provided (also for screen readers for improved accessibility) when copying the payment information.
Payment request detail variation
A completed detail screen for a lightning transaction that requires a new channel to be opened.
Payment request options
Additional options for payment requests for specific scenarios.
On-chain payment request options
For on-chain requests, it may be helpful to allow users to choose an address type, especially during standards transition periods.
Activity
Default transaction information is not helpful in understanding the payment purpose.
Annotated activity
Users should be able to enrich transactions with useful information like sender/receiver, purpose and categories/tags.
Non-payment activity
Activity can also include user actions related to unique features of the wallet.
Micropayments, grouped
Micropayments can be grouped together to clean up the list.
Activity, tips
Pinned entries can be used for various purposes, like incentivizing users to organize their activity.
Activity, search & export
The search icons lets users access this screen for filtering and exporting activity.
Budgeting
This overview provides better insight for budgeting and accounting purposes.