diff --git a/_compress_images_cache.yml b/_compress_images_cache.yml index 70ae68aea..88004e063 100644 --- a/_compress_images_cache.yml +++ b/_compress_images_cache.yml @@ -843,3 +843,76 @@ assets/images/guide/case-studies/multisig-wallet/case-current@2x.png: case-curre assets/images/guide/onboarding/getting-to-know-your-users/getting-to-know-your-users-preview.jpg: getting-to-know-your-users-preview.jpg assets/images/guide/payments/payments-preview.jpg: payments-preview.jpg assets/images/guide/private-key-management/private-key-management-preview.jpg: private-key-management-preview.jpg +assets/images/guide/onboarding/backing-up-a-recovery-phrase/verify-recovery-phrase.png: verify-recovery-phrase.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/verify-recovery-phrase@2x.png: verify-recovery-phrase@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/auto-backup-intro.png: auto-backup-intro.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/auto-backup-intro@2x.png: auto-backup-intro@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/auto-cloud-backup-select-provider.png: auto-cloud-backup-select-provider.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/auto-cloud-backup-select-provider@2x.png: auto-cloud-backup-select-provider@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/auto-cloud-backup-set-password@2x.png: auto-cloud-backup-set-password@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/auto-cloud-backup-set-password.png: auto-cloud-backup-set-password.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/auto-cloud-backup-save-password.png: auto-cloud-backup-save-password.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/auto-cloud-backup-save-password@2x.png: auto-cloud-backup-save-password@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/auto-cloud-backup-complete.png: auto-cloud-backup-complete.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/auto-cloud-backup-complete@2x.png: auto-cloud-backup-complete@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-single-word.png: copy-recovery-phrase-single-word.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-single-word@2x.png: copy-recovery-phrase-single-word@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-columns.png: copy-recovery-phrase-columns.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-columns@2x.png: copy-recovery-phrase-columns@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-reveal.png: copy-recovery-phrase-reveal.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase- reveal@2x.png: copy-recovery-phrase- + reveal@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-reveal@2x.png: copy-recovery-phrase-reveal@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-all-at-once.png: copy-recovery-phrase-all-at-once.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-all-at-once@2x.png: copy-recovery-phrase-all-at-once@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase.png: confirm-recovery-phrase.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase@2x.png: confirm-recovery-phrase@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-entry.png: copy-recovery-phrase-entry.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-entry@2x.png: copy-recovery-phrase-entry@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-entry.png: confirm-recovery-phrase-entry.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-entry@2x.png: confirm-recovery-phrase-entry@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-columns.png: confirm-recovery-phrase-columns.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-columns@2x.png: confirm-recovery-phrase-columns@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/restoring-a-wallet/import-options.png: import-options.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/restoring-a-wallet/import-options@2x.png: import-options@2x.png +assets/images/guide/onboarding/restoring-a-wallet/import-options@2x.png: import-options@2x.png +assets/images/guide/onboarding/restoring-a-wallet/import-options.png: import-options.png +assets/images/guide/onboarding/protecting-a-wallet/face-id-info.png: face-id-info.png +assets/images/guide/onboarding/protecting-a-wallet/face-id-info@2x.png: face-id-info@2x.png +assets/images/guide/onboarding/protecting-a-wallet/choose-pin.png: choose-pin.png +assets/images/guide/onboarding/protecting-a-wallet/choose-pin@2x.png: choose-pin@2x.png +assets/images/guide/onboarding/protecting-a-wallet/enter-pin.png: enter-pin.png +assets/images/guide/onboarding/protecting-a-wallet/enter-pin@2x.png: enter-pin@2x.png +assets/images/guide/onboarding/funding-a-wallet/buy-bitcoin.png: buy-bitcoin.png +assets/images/guide/onboarding/funding-a-wallet/buy-bitcoin@2x.png: buy-bitcoin@2x.png +assets/images/guide/onboarding/funding-a-wallet/redeem.png: redeem.png +assets/images/guide/onboarding/funding-a-wallet/redeem@2x.png: redeem@2x.png +assets/images/guide/onboarding/funding-a-wallet/rise-redeem-gift-cards@2x.png: rise-redeem-gift-cards@2x.png +assets/images/guide/onboarding/funding-a-wallet/rise-redeem-gift-cards.png: rise-redeem-gift-cards.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-intro@2x.png: cloud-backup-intro@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-intro.png: cloud-backup-intro.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-password.png: cloud-backup-password.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-password @2x.png: cloud-backup-password + @2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-password@2x.png: cloud-backup-password@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-service@2x.png: cloud-backup-service@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-service.png: cloud-backup-service.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-confirmation.png: cloud-backup-confirmation.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-confirmation@2x.png: cloud-backup-confirmation@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-provider@2x.png: cloud-backup-provider@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-provider.png: cloud-backup-provider.png +assets/images/guide/onboarding/funding-a-wallet/bitcoin-gift-cards.png: bitcoin-gift-cards.png +assets/images/guide/onboarding/funding-a-wallet/bitcoin-gift-cards@2x.png: bitcoin-gift-cards@2x.png +assets/images/guide/onboarding/protecting-a-wallet/hide-by-default.gif: hide-by-default.gif +assets/images/guide/onboarding/protecting-a-wallet/hide-in-settings.gif: hide-in-settings.gif +assets/images/guide/onboarding/protecting-a-wallet/hide-info-hidden-by-default.png: hide-info-hidden-by-default.png +assets/images/guide/onboarding/protecting-a-wallet/reveal-by-pin-2.gif: reveal-by-pin-2.gif +assets/images/guide/onboarding/protecting-a-wallet/hide-sensitive-information-header.png: hide-sensitive-information-header.png +assets/images/guide/onboarding/protecting-a-wallet/hide-by-eye-icon.gif: hide-by-eye-icon.gif +assets/images/guide/onboarding/protecting-a-wallet/hide-info-reveal-by-pin.png: hide-info-reveal-by-pin.png +assets/images/guide/onboarding/protecting-a-wallet/hide-by-eye-icon-2.gif: hide-by-eye-icon-2.gif +assets/images/guide/onboarding/protecting-a-wallet/reveal-by-pin.gif: reveal-by-pin.gif +assets/images/guide/onboarding/backing-up-a-recovery-phrase/copy-recovery-phrase.png: copy-recovery-phrase.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/copy-recovery-phrase@2x.png: copy-recovery-phrase@2x.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-PIN.png: cloud-backup-PIN.png +assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-PIN@2x.png: cloud-backup-PIN@2x.png diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-PIN.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-PIN.png new file mode 100644 index 000000000..ad0f9468b Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-PIN.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-PIN@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-PIN@2x.png new file mode 100644 index 000000000..e7d335cc9 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-PIN@2x.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-confirmation.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-confirmation.png new file mode 100644 index 000000000..b0be52696 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-confirmation.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-confirmation@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-confirmation@2x.png new file mode 100644 index 000000000..c326844c2 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-confirmation@2x.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-intro.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-intro.png new file mode 100644 index 000000000..fda6ea81b Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-intro.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-intro@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-intro@2x.png new file mode 100644 index 000000000..68d1260eb Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-intro@2x.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-provider.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-provider.png new file mode 100644 index 000000000..5b170c822 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-provider.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-provider@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-provider@2x.png new file mode 100644 index 000000000..a787c0df2 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-provider@2x.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-service.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-service.png new file mode 100644 index 000000000..03e4c01f4 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-service.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-service@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-service@2x.png new file mode 100644 index 000000000..9e1a22058 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/cloud-backup-service@2x.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/copy-recovery-phrase.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/copy-recovery-phrase.png new file mode 100644 index 000000000..7a7320b8d Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/copy-recovery-phrase.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/copy-recovery-phrase@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/copy-recovery-phrase@2x.png new file mode 100644 index 000000000..cdb0e310d Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/copy-recovery-phrase@2x.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-columns.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-columns.png new file mode 100644 index 000000000..0ccb21777 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-columns.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-columns@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-columns@2x.png new file mode 100644 index 000000000..e9680b722 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-columns@2x.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-entry.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-entry.png new file mode 100644 index 000000000..8220b5536 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-entry.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-entry@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-entry@2x.png new file mode 100644 index 000000000..a05e0496a Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-entry@2x.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase.png new file mode 100644 index 000000000..bc268b12b Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase@2x.png new file mode 100644 index 000000000..7c241eff1 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase@2x.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-all-at-once.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-all-at-once.png new file mode 100644 index 000000000..aa3c5f35b Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-all-at-once.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-all-at-once@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-all-at-once@2x.png new file mode 100644 index 000000000..93bc790a2 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-all-at-once@2x.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-columns.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-columns.png new file mode 100644 index 000000000..350510e9c Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-columns.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-columns@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-columns@2x.png new file mode 100644 index 000000000..a51605758 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-columns@2x.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-reveal.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-reveal.png new file mode 100644 index 000000000..fd1e59f19 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-reveal.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-reveal@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-reveal@2x.png new file mode 100644 index 000000000..8afa10e98 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-reveal@2x.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-single-word.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-single-word.png new file mode 100644 index 000000000..1a9be9fdd Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-single-word.png differ diff --git a/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-single-word@2x.png b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-single-word@2x.png new file mode 100644 index 000000000..1ebfe5598 Binary files /dev/null and b/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-single-word@2x.png differ diff --git a/assets/images/guide/onboarding/funding-a-wallet/bitcoin-gift-cards.png b/assets/images/guide/onboarding/funding-a-wallet/bitcoin-gift-cards.png new file mode 100644 index 000000000..5bf38c683 Binary files /dev/null and b/assets/images/guide/onboarding/funding-a-wallet/bitcoin-gift-cards.png differ diff --git a/assets/images/guide/onboarding/funding-a-wallet/bitcoin-gift-cards@2x.png b/assets/images/guide/onboarding/funding-a-wallet/bitcoin-gift-cards@2x.png new file mode 100644 index 000000000..f0616e040 Binary files /dev/null and b/assets/images/guide/onboarding/funding-a-wallet/bitcoin-gift-cards@2x.png differ diff --git a/assets/images/guide/onboarding/funding-a-wallet/buy-bitcoin.png b/assets/images/guide/onboarding/funding-a-wallet/buy-bitcoin.png new file mode 100644 index 000000000..aec91b227 Binary files /dev/null and b/assets/images/guide/onboarding/funding-a-wallet/buy-bitcoin.png differ diff --git a/assets/images/guide/onboarding/funding-a-wallet/buy-bitcoin@2x.png b/assets/images/guide/onboarding/funding-a-wallet/buy-bitcoin@2x.png new file mode 100644 index 000000000..e50157a93 Binary files /dev/null and b/assets/images/guide/onboarding/funding-a-wallet/buy-bitcoin@2x.png differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/choose-pin.png b/assets/images/guide/onboarding/protecting-a-wallet/choose-pin.png new file mode 100644 index 000000000..e6e2b9c1b Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/choose-pin.png differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/choose-pin@2x.png b/assets/images/guide/onboarding/protecting-a-wallet/choose-pin@2x.png new file mode 100644 index 000000000..379e1e8d8 Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/choose-pin@2x.png differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/enter-pin.png b/assets/images/guide/onboarding/protecting-a-wallet/enter-pin.png new file mode 100644 index 000000000..da11287ed Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/enter-pin.png differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/enter-pin@2x.png b/assets/images/guide/onboarding/protecting-a-wallet/enter-pin@2x.png new file mode 100644 index 000000000..75ca8db87 Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/enter-pin@2x.png differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/face-id-info.png b/assets/images/guide/onboarding/protecting-a-wallet/face-id-info.png new file mode 100644 index 000000000..9a6d9bd73 Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/face-id-info.png differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/face-id-info@2x.png b/assets/images/guide/onboarding/protecting-a-wallet/face-id-info@2x.png new file mode 100644 index 000000000..fed4dec2c Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/face-id-info@2x.png differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/hide-by-default.gif b/assets/images/guide/onboarding/protecting-a-wallet/hide-by-default.gif new file mode 100644 index 000000000..cc109e9d4 Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/hide-by-default.gif differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/hide-by-eye-icon-2.gif b/assets/images/guide/onboarding/protecting-a-wallet/hide-by-eye-icon-2.gif new file mode 100644 index 000000000..361a9b79e Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/hide-by-eye-icon-2.gif differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/hide-by-eye-icon.gif b/assets/images/guide/onboarding/protecting-a-wallet/hide-by-eye-icon.gif new file mode 100644 index 000000000..cd89fe18b Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/hide-by-eye-icon.gif differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/hide-in-settings.gif b/assets/images/guide/onboarding/protecting-a-wallet/hide-in-settings.gif new file mode 100644 index 000000000..fe26ffd3f Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/hide-in-settings.gif differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/hide-info-hidden-by-default.png b/assets/images/guide/onboarding/protecting-a-wallet/hide-info-hidden-by-default.png new file mode 100644 index 000000000..94e120825 Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/hide-info-hidden-by-default.png differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/hide-info-reveal-by-pin.png b/assets/images/guide/onboarding/protecting-a-wallet/hide-info-reveal-by-pin.png new file mode 100644 index 000000000..f93c3241a Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/hide-info-reveal-by-pin.png differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/hide-sensitive-information-header.png b/assets/images/guide/onboarding/protecting-a-wallet/hide-sensitive-information-header.png new file mode 100644 index 000000000..54f5edddf Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/hide-sensitive-information-header.png differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/reveal-by-pin-2.gif b/assets/images/guide/onboarding/protecting-a-wallet/reveal-by-pin-2.gif new file mode 100644 index 000000000..30a4a62bf Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/reveal-by-pin-2.gif differ diff --git a/assets/images/guide/onboarding/protecting-a-wallet/reveal-by-pin.gif b/assets/images/guide/onboarding/protecting-a-wallet/reveal-by-pin.gif new file mode 100644 index 000000000..e009d3aa0 Binary files /dev/null and b/assets/images/guide/onboarding/protecting-a-wallet/reveal-by-pin.gif differ diff --git a/assets/images/guide/onboarding/restoring-a-wallet/import-options.png b/assets/images/guide/onboarding/restoring-a-wallet/import-options.png new file mode 100644 index 000000000..d95931481 Binary files /dev/null and b/assets/images/guide/onboarding/restoring-a-wallet/import-options.png differ diff --git a/assets/images/guide/onboarding/restoring-a-wallet/import-options@2x.png b/assets/images/guide/onboarding/restoring-a-wallet/import-options@2x.png new file mode 100644 index 000000000..79422a65d Binary files /dev/null and b/assets/images/guide/onboarding/restoring-a-wallet/import-options@2x.png differ diff --git a/guide/onboarding/automatic-cloud-backup.md b/guide/onboarding/automatic-cloud-backup.md new file mode 100644 index 000000000..f578edb96 --- /dev/null +++ b/guide/onboarding/automatic-cloud-backup.md @@ -0,0 +1,108 @@ +--- +layout: guide +title: Automatic cloud backup +description: How to backup a recovery phrase automatically +grand_parent: Onboarding +parent: Backing up a recovery phrase +nav_order: 1 +permalink: /guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup/ +main_classes: -no-top-padding +--- + +# Automatic cloud backup + +### How it works + +The user’s key is encrypted and backed up on their respective device/cloud storage provider. If their device is lost, stolen, or broken, the user can log into their cloud storage account (such as Apple iCloud or Google Drive) to regain access to their funds. To learn more about the technical details, hop over to the [private key management]({{ '/guide/private-key-management/introduction' | relative_url }}) section on this topic. + +> Crypto rookies perceive themselves as “incapable of self-managing keys”. +> +> As researched by Abramova et al + +This method provides users with the feeling that they can rely on their cloud provider to regain access to their funds rather than putting the responsibility on themselves. + +Below is an example of what the user interface might look like for an automatic cloud backup that significantly reduces friction during onboarding. + + + +### How to discuss/explain It + +One approach is to explicitly explain within onboarding carousels that a user’s recovery phrase is stored on the cloud; this means that if they lose or break their device, they can regain access to their funds by logging into their respective cloud account on a different device. + +On a similar note, it’s crucial that you also explain that if someone else knows their cloud account information, they can gain access to their funds, too. + +{% include tip/open.html color="green" icon="check" label="Do: Inform your Users" %} + +Before automatically backing up a recovery phrase via cloud backup, make sure the user knows what they are about to do. Once the backup is complete, provide a summary and some reassurances before moving on. This is a good place for loading interactions and animation because there will likely be a few seconds between when a user clicks to upload to the cloud provider and when it completes. + +{% include tip/close.html %} + +### Tradeoffs + +By not making users manually backup, you decrease the risk of self-inflicted loss of funds. Automatic cloud backups put less pressure and responsibility on the user. + +While this is an easier way for users to set up a wallet, it brings in the potential threat of malicious third-party access. If a user’s cloud account is hacked or they forget their cloud login information, their funds could be compromised. + +By bringing cloud storage providers into the equation, we assume that users trust their providers. This also raises the question of [decentralization]({{ 'guide/foundations/principles/#decentralization' | relative_url }}): a guiding principle of the Bitcoin space and could be considered in conflict with the popular saying, “not your keys, not your coins”. + +{% include tip/open.html color="red" icon="forbid" label="Don’t: Use for High Value Amounts" %} + +Automatic cloud backups should not be considered for products with users that are storing high-value amounts. This is because there are potentially more security threat vectors. + +{% include tip/close.html %} + +To grant users some ownership of their keys, you can create an optional manual backup within settings. A great way to do this is by framing it as an extra layer of security or a good alternative in the case that the user loses access to their cloud account/if they feel uncomfortable trusting their provider. + +In the next section we will show different methods for [manual backups]({{ 'guide/onboarding/backing-up-a-recovery-phrase/manual-backup' | relative_url }}). diff --git a/guide/onboarding/backing-up-a-recovery-phrase.md b/guide/onboarding/backing-up-a-recovery-phrase.md new file mode 100644 index 000000000..ffe574836 --- /dev/null +++ b/guide/onboarding/backing-up-a-recovery-phrase.md @@ -0,0 +1,44 @@ +--- +layout: guide +title: Backing up a recovery phrase +description: Handling recovery phrases during onboarding +parent: Onboarding +has_children: true +nav_order: 3 +permalink: /guide/onboarding/backing-up-a-recovery-phrase/ +main_classes: -no-top-padding +--- + +# Backing up a recovery phrase + +When a user generates a new wallet, it creates something called a recovery phrase. A [recovery phrase]({{ 'guide/glossary/#recovery-phrase' | relative_url }}), is a group of 12 or 24 words that let users recover funds if wallet access is lost. Likewise, users who lose both their recovery phrase and wallet access permanently lose their bitcoin. Arguably, this creates one of the toughest design problems within the space. + +
+ +{% include image.html + image = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/copy-recovery-phrase.png" + retina = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/copy-recovery-phrase@2x.png" + width = 250 + height = 460 + alt-text = "Recovery phrase mobile interface" + caption = "Typical recovery phrase UI from the [UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=649%3A760)" + layout = "float-left-desktop -background -shadow" +%} + +When new users are presented with a recovery phrase, they are often asked to write 12 or 24 words on a piece of paper and store it safely. This kind of recovery scheme can create an unfamiliar and frustrating onboarding experience. It also poses potential threats to the safety of their funds, as new users may not know how to properly store their recovery phrase, increasing their risk of losing it. It also creates a decent amount of friction, ultimately driving new users away from self-custodying their bitcoin. + +Regardless of the type of scheme you decide to go with, it’s crucial to be explicit about how your product is handling key management. + +
+ +Recent [studies](https://voskart.de/pdf/bits_under_mattress.pdf) show users are often confused or unaware of where their private keys are being stored, ultimately causing inadequate risk assessment and poor storage behavior. This risk of user negligence may be avoided with transparent messaging around the scheme your wallet is using. + +> New-to-crypto users often expect a recovery mechanism that allows them to “regain access to their funds in the case that they lose their seed phrase.” +> +> As researched by Voskobojnikov et al + +In the [private key management]({{ 'guide/private-key-management/introduction/' | relative_url }}) chapter, we recommend using an automatic cloud backup for newer users. Users can simply press a button to have their recovery phrase backed up to the cloud without having to physically write down and store it. On top of this, the onboarding process is then sped up and less cumbersome. This type of gateway gives a beginner security without overwhelming them with unfamiliar onboarding actions. + +However, there may be times when it is necessary to use a manual backup alternative, as it can be low tech and easily accessible. + +The next sections will look at some UI considerations for [automatic cloud backups]({{ '/guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup' | relative_url }}) and [manual backups]({{ 'guide/onboarding/backing-up-a-recovery-phrase/manual-backup/' | relative_url }}). diff --git a/guide/onboarding/creating-a-new-wallet.md b/guide/onboarding/creating-a-new-wallet.md index 71f946007..4b5bd5014 100644 --- a/guide/onboarding/creating-a-new-wallet.md +++ b/guide/onboarding/creating-a-new-wallet.md @@ -26,14 +26,15 @@ A few different types of wallets let you send, receive, store, and manage bitcoi image = "/assets/images/guide/onboarding/creating-a-new-wallet/onboarding-welcome-screen.png" retina = "/assets/images/guide/onboarding/creating-a-new-wallet/onboarding-welcome-screen@2x.png" width = 250 - height = 250 - alt-text = "Onboarding welcome screen" + height = 541 + caption = "Cover screen from the [UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=267%3A3874)" + alt-text = "Cover screen user interface" layout = "float-left-desktop -background -shadow" %} Most wallets will begin the onboarding process by creating a new or restoring an existing wallet. New users to Bitcoin will usually be going through the flow of creating a new wallet. -Once an individual selects “create a new wallet”, you might present informational carousels that provide a high-level overview of the implications, benefits, and responsibility that comes with having a [self-custodial]({{ '/guide/glossary/#non-custodial--custodial-wallet' | relative_url }}) wallet. Here you can explain to your user that access to the wallet will not require collecting any sensitive information such as usernames and passwords, which is often the case with traditional financial products. +Once an individual selects “create a new wallet”, you might present informational carousels that provide a high-level overview of the implications, benefits, and responsibility that comes with having a self-custodial wallet. Here you can explain to your user that access to the wallet will not require collecting any sensitive information such as usernames and passwords, which is often the case with traditional financial products. Rather, the user can directly access their funds as long as they have access to the private key or recovery phrase. You should help your users understand that your team do not have the ability to recover their funds in the event they lose their private key. A self custodial wallet often means the user will have to take on greater responsibilty to safely protect their private key so they can always access their funds. @@ -91,4 +92,4 @@ Below is an example of some carousel screens that might be useful in helping a u --- -Ok, now let's look at backing up a recovery phrase (coming soon) +Ok, now let's look at [backing up a recovery phrase.]({{ 'guide/onboarding/backing-up-a-recovery-phrase' | relative_url }}) diff --git a/guide/onboarding/funding-a-wallet.md b/guide/onboarding/funding-a-wallet.md new file mode 100644 index 000000000..ec95a6552 --- /dev/null +++ b/guide/onboarding/funding-a-wallet.md @@ -0,0 +1,99 @@ +--- +layout: guide +title: Funding a wallet +description: Outline of the ways users are likely to fund a wallet +parent: Onboarding +nav_order: 7 +permalink: /guide/onboarding/funding-a-wallet/ +main_classes: -no-top-padding +--- + +# Funding a wallet + +Common problems faced by new users include buying their first bitcoin and transferring it to a new wallet. For this, most will purchase their first bitcoin from an exchange using a national or fiat currency. This generally involves providing some form of documentation (such as ID) and already having a bank account. After purchasing their bitcoin, they can then send it to an external wallet. While this works, there are better alternatives available. Understanding how your users fund their wallets can help you create more tailored and dedicated UI flows. Certain ways users fund their wallets are outlined below. + +### Earning bitcoin + +Earning bitcoin through exchange of goods and services is a great option. Some individuals and businesses have already started accepting and even paying employees in bitcoin. + +> Fun Fact 🏈: Former Seattle Seahawk Russel Okung puts half of his salary in Bitcoin and is now considered one of the highest paid players in the league. +> +> As reported by NBC Sports + +{% include fact/pros.html %} + - Privacy + - No exchange fees + - Simplifies onboarding + {% include fact/close.html %} + +{% include fact/cons.html %} + - Managing taxes + - Difficult to find businesses/individuals willing to pay in bitcoin + - Limited options for recurring payments + {% include fact/close.html %} + +### Buying bitcoin + +
+ +{% include image.html + image = "/assets/images/guide/onboarding/funding-a-wallet/buy-bitcoin.png" + retina = "/assets/images/guide/onboarding/funding-a-wallet/buy-bitcoin@2x.png" + width = 250 + height = 550 + alt-text = "Showing recovery phrase one word at a time" + caption = "Buy bitcoin screen from the [Wallet UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1228%3A28550)" + layout = "float-left-desktop -background -shadow" +%} + +As noted, most exchanges offer the option to buy bitcoin using fiat currencies. Once purchased, users can transfer those funds to a separate, external wallet. This might confuse new users who don't understand the difference between exchange wallets and personal wallets. + +Bitcoin ATMs are another great option for new users to exchange cash for bitcoin in person. These machines also let users trade their bitcoin for cash, which can be useful if they are somewhere new or foreign. + +Finally, new users can buy bitcoin directly from other bitcoin users such as friends, other users at a meetup, or intermediary services like [localbitcoins](https://localbitcoins.com/). + +
+ +{% include /tip/open.html label="Tip: Teach users how to transfer" icon="info" color="blue" %} + +Users funding new wallets from an exchange could potentially come into contact with unknown concepts, such as a bitcoin address, QR code, or transaction confirmations. This is an excellent opportunity to explain the exchange to personal wallet flow. + +{% include /tip/close.html %} + +{% include fact/pros.html %} + - An easy and popular way to acquire bitcoin +{% include fact/close.html %} + + +{% include fact/cons.html %} + - Managing taxes + - Difficult to find businesses/individuals willing to pay in bitcoin + - Hard to set up recurring payments + - Not private + {% include fact/close.html %} + + +### Redeem bitcoin using a gift card + +Gift cards allow users to buy and own small amounts of bitcoin without having to sign up for an exchange. These cards are sometimes available from local retailers. + +Users can get set up in minutes using this technique. + +{% include picture.html + image = "/assets/images/guide/onboarding/funding-a-wallet/bitcoin-gift-cards.png" + retina = "/assets/images/guide/onboarding/funding-a-wallet/bitcoin-gift-cards@2x.png" + alt-text = "Bitcoin gift cards" + caption = "Bitcoin gift card concept" + width = 800 + height = 500 +%} + +{% include fact/pros.html %} + - Gets user comfortable with scanning QR codes + - Simplifies onboarding + - No compromise on privacy +{% include fact/close.html %} + +{% include fact/close.html %} + - Low retail availability +{% include fact/close.html %} diff --git a/guide/onboarding/getting-to-know-your-users.md b/guide/onboarding/getting-to-know-your-users.md index b5f69d8d3..132edf023 100644 --- a/guide/onboarding/getting-to-know-your-users.md +++ b/guide/onboarding/getting-to-know-your-users.md @@ -22,13 +22,13 @@ image: https://bitcoin.design/assets/images/guide/onboarding/getting-to-know-you # Getting to know your users When building onboarding experiences, it is important to understand and develop knowledge about your users upfront. -Within the Bitcoin ecosystem, there is a wide range in the level of expertise. Identifying who you are building for is crucial, as these user groups value and understand varying characteristics of coin and key management tools. For example, “rookies” often favor convenient, easy-to-use wallets, while well-versed bitcoin owners tend to prioritize security[^1]. +Within the Bitcoin ecosystem, there is a wide range in the level of expertise. Identifying who you are building for is crucial, as these user groups value and understand varying characteristics of coin and key management tools. For example, [research](https://voskart.de/pdf/bits_under_mattress.pdf) suggests “rookies” often favor convenient, easy-to-use wallets, while well-versed bitcoin owners tend to prioritize security. ## Observe your potential users This observation could take the form of [user research]({{ 'guide/designing-products/user-research/' | relative_url }}), user interviews and surveys aimed at a range of participants to observe and identify what they do, how they think, and what they want. Let's consider some things you might want to ask yourself when improving the onboarding experience for new users: -* What is their perception of Bitcoin?[^2] +* [What is their perception of Bitcoin?](https://docs.google.com/forms/d/e/1FAIpQLSdzT8cb54NgT7hGUnC_5ow6rDy-A9p_CA-5ptiQxrG8wQWvzQ/viewform) * 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? @@ -50,7 +50,7 @@ For the sake of simplicity let's focus on one hypothetical user. > Joshua Akinsola is a 21-year old Nigerian studying economics in the large city of Lagos. Growing up, his family struggled to save any money due to a lack of financial education, high unemployment, and a local currency inflating at 15% per year. There is a lack of reliable [savings]({{ 'guide/designing-products/personal-finance/#savings' | relative_url }}) technology in his country, so he opts to save money for the future using bitcoin. -The uncovering of this scenario could be the result of a user interview[^3] or found in various channels such as chats, issues, or even Twitter. We can then take quotes from the participant to understand their emotions and infer their specific needs. This then helps us identify barriers and motivators. +The uncovering of this scenario could be the result of a [user interview](https://github.com/patestevao/Bitcoin-UX-interviews/blob/main/call-for-participants.md) or found in various channels such as chats, issues, or even Twitter. We can then take quotes from the participant to understand their emotions and infer their specific needs. This then helps us identify barriers and motivators. Barriers are anything that the user perceives as preventing them from achieving their desired goals. @@ -176,15 +176,8 @@ It's important to allow you and your team to be as free and creative about how y ## Prototype & Test Next, you can think about prototyping a subset of these ideas and understanding your ideas' feasibility through feedback on these prototypes. Put your prototypes in front of real users and test to verify the solution meets the users' needs. -You might choose to lean on something like the Bitcoin Wallet UI Kit[^4], which gives you several components that you can piece together for a specific [use case]({{ 'guide/case-studies/' | relative_url }}). This would allow you to prototype rapidly and get a feel for if the UI flow makes sense before committing to more detailed designs. +You might choose to lean on something like the [Bitcoin Wallet UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=616%3A0), which gives you several components that you can piece together for a specific [use case]({{ 'guide/case-studies/' | relative_url }}). This would allow you to prototype rapidly and get a feel for if the UI flow makes sense before committing to more detailed designs. Ultimately the goal of onboarding is that users trust the application, feel comfortable using it, and are set up for success. They should have an idea of how this application is going to fit into their lives and take care of certain needs. It's also ideal if they can already envision the next time they will use it. -[^1]:[Bits Under the Mattress: Understanding Different Risk Perceptions and Security Behaviors of Crypto-Asset Users](https://voskart.de/pdf/bits_under_mattress.pdf) -[^2]:[Bitcoin Perspectives Survey](https://docs.google.com/forms/d/e/1FAIpQLSdzT8cb54NgT7hGUnC_5ow6rDy-A9p_CA-5ptiQxrG8wQWvzQ/viewform) -[^3]:[Bitcoin UX interviews](https://github.com/patestevao/Bitcoin-UX-interviews/blob/main/call-for-participants.md) -[^4]:[Bitcoin Wallet UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=616%3A0) - ---- - Next, we will cover [creating a new wallet]({{ '/guide/onboarding/creating-a-new-wallet/' | relative_url }}). diff --git a/guide/onboarding/introduction.md b/guide/onboarding/introduction.md index 79f099763..1bea4ddf9 100644 --- a/guide/onboarding/introduction.md +++ b/guide/onboarding/introduction.md @@ -55,24 +55,24 @@ An overview of what information to include when creating a wallet for the first --- -### Backing up a recovery phrase (coming soon) +### [Backing up a recovery phrase]({{ 'guide/onboarding/backing-up-a-recovery-phrase' | relative_url }}) -An overview of the tradeoffs between using manual backups vs seedless backups. +An overview of the tradeoffs between using [manual backup]({{ 'guide/onboarding/backing-up-a-recovery-phrase/manual-backup' | relative_url }}) vs [automatic cloud backup]({{ 'guide/onboarding/backing-up-a-recovery-phrase/automatic-cloud-backup' | relative_url }}). --- -### Restoring a wallet (coming soon) +### [Restoring a wallet]({{ 'guide/onboarding/restoring-a-wallet' | relative_url }}) What options to consider if a user has lost their device, had it stolen or deleted and redownloaded a particular wallet application. --- -### Protecting a wallet (coming soon) +### [Protecting a wallet]({{ 'guide/onboarding/protecting-a-wallet' | relative_url }}) An overview of how to add extra layers of securtiy to protect sensitive user data. --- -### Funding a wallet (coming soon) +### [Funding a wallet]({{ 'guide/onboarding/funding-a-wallet' | relative_url }}) An overview of how users are likely to fund their wallets diff --git a/guide/onboarding/manual-backup.md b/guide/onboarding/manual-backup.md new file mode 100644 index 000000000..227d01f70 --- /dev/null +++ b/guide/onboarding/manual-backup.md @@ -0,0 +1,264 @@ +--- +layout: guide +title: Manual backup +description: How to backup a recovery phrase manually +grand_parent: Onboarding +parent: Backing up a recovery phrase +nav_order: 2 +permalink: /guide/onboarding/backing-up-a-recovery-phrase/manual-backup/ +main_classes: -no-top-padding +--- + +# Manual backup + +### How it works + +It usually requires users to manually back up their 12 to 24 word recovery phrase by writing it down on a piece of paper and storing it in a safe (but memorable location). In the case that a user’s device breaks or is stolen, the user can recover their funds and wallet by correctly entering their recovery phrase. The [private key management]({{ '/guide/private-key-management/single-user-schemes/#manual-backup--recovery-phrase' | relative_url }}) section dives further into the technical details of this scheme if interested in learning more. + +If you are designing an application that opts to use manual backups, the following sections outline how to best go about this with new users in mind. + +### When to reveal a recovery phrase + +Onboarding carousels are a great place to prep and explain to users that they will be given a recovery phrase. While some wallets skip this step, it might be appropriate to display it early on in some scenarios. Doing so in the initial onboarding process allows users to pause, internalize what a recovery phrase is, and ensures that they do not neglect this step later. + +{% include /tip/open.html label="Tip: Let users transact even when not backed up" icon="info" color="blue" %} + +If you really want to skip showing a user their recovery phrase during the initial onboarding process, create an interaction (i.e. a vibration, modal pop-up, or similar) that prompts users to “back up” their recovery phrase at a later time. Perhaps before making any transactions or after several transactions. + +{% include /tip/close.html %} + +### How to talk about a recovery phrase + +When introducing the concept of a recovery phrase within the onboarding process, be succinct and clear in explaining what it is, how to store it, and how to use it. Examples of some microcopy that you might include before unveiling a user’s recovery phrase can be found below: + +{% include dl/open.html %} + +{% include dl/item-open.html color="red" %} + +“You will be shown your recovery phrase on the next screen” + +{% include dl/item-middle.html color="red" %} + +Prepares a user for what they are about to **see**. + +{% include dl/item-close.html %} + +{% include dl/item-open.html color="orange" %} + +“Your recovery phrase is a group of 12 random words” + +{% include dl/item-middle.html color="orange" %} + +Explains to users what a recovery phrase **is**. + +{% include dl/item-close.html %} + +{% include dl/item-open.html color="yellow" %} + +“Your recovery phrase is the only way to acess your wallet if your phone is lost or stolen.” + +{% include dl/item-middle.html color="yellow" %} + +Explains to users what the **purpose** of a recovery phrase is and why it’s important. + +{% include dl/item-close.html %} + +{% include dl/item-open.html color="green" %} + +“If you lose your recovery phrase, you will no longer be able to access your wallet. Never share your recovery phrase with anyone. Anyone who has it can access your funds.” + +{% include dl/item-middle.html color="green" %} + +Explains to users what the **consequences** of their behavior is, and how it can affect the safety of their funds. + +{% include dl/item-close.html %} + +{% include dl/item-open.html %} + +“We recommend writing these words down in order on a piece of paper and storing it somewhere safe that you will remember.” + +{% include dl/item-middle.html %} + +Guides and gives users actionable items on how to safely **handle** their recovery phrase. + +{% include dl/item-close.html %} + +{% include dl/close.html %} + +Drilling in the larger consequences of what it means to interact with a self-custodial product is important during these first interactions with a wallet. Education within these beginning stages will empower users to make smart decisions, furthermore informing how they understand and handle the safety of their funds. + +{% include /tip/open.html label="Tip: Give users access to printable templates" icon="info" color="blue" %} + +Providing users with printable, designated materials to write down their recovery phrase can instill a sense of trust, organization (especially if they have multiple wallets), and guidance. It may also encourage them to treat this designated paper with importance rather than quickly scribbling it down on a random scrap. Check out an example template from the Wallet UI Kit [here](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1523%3A34106). + +{% include /tip/close.html %} + +### How to display a recovery phrase + +The goal is to encourage users to write down their recovery phrase on a physical piece of paper. You can discourage users from taking a screenshot by showing a warning modal or disabling the functionality altogether. + +{% include /tip/open.html label="Tip: Be Clear about Numbering" icon="info" color="blue" %} + +Regardless of the option you decide to run with, it’s important that you explicitly instruct users to number each word (i.e. 1. sand 2. purple 3. flower). Typically, a manual recovery phrase backup scheme will ask users to recount, for example, the fifth word. It’s a bit of a pain for users to count which word corresponds to a particular number if they are not numbered initially. + +{% include /tip/close.html %} + +
+ +{% include image.html + image = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-single-word.png" + retina = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-single-word@2x.png" + width = 250 + height = 600 + alt-text = "Showing recovery phrase one word at a time" + caption = "One by One UI from the [UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1230%3A0)" + layout = "float-right-desktop -background -shadow" +%} + +**Option 1: One by One** + +In a one by one design, users are given their recovery phrase one word at a time. Users are then prompted to swipe/click through each word to complete their viewing. + +By forcing users to go through a physical action of viewing the next word, the chance of someone accidentally skipping over a word decreases. Giving a user time on each word encourages them to ruminate on it, potentially increasing their chance of writing it down. Additionally, it discourages users from screenshotting or copying and pasting. + +This would be a time consuming step if one’s recovery phrase is 24 words. This length could cause frustration. + +
+ +
+ +{% include image.html + image = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-columns.png" + retina = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-columns@2x.png" + width = 250 + height = 600 + alt-text = "Showing recovery phrase one word at a time" + caption = "Column/Groups UI from the [UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1230%3A131)" + layout = "float-left-desktop -background -shadow" +%} + +**Option 2: In Columns/Groups** + +Another technique is to use batches or groups. In this design, the wallet splits the 12 or 24 word recovery phrase into ~3-4 groups, each group containing 3-12 words. + +If your wallet uses 24 words, splitting it into groups can be more digestible and less overwhelming. Organizing into smaller chunks could also help with word association, as a user might remember the smaller batches of words. + +Depending on how you show these groups of words, there is room for users to falsely number the order. For example, some wallets put these groups into columns, which could trip up a user if they are writing their words from left to right, or up and down. To avoid this, be sure to explicitly number the words. + +
+ +
+ +{% include image.html + image = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-reveal.png" + retina = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-reveal@2x.png" + width = 250 + height = 600 + alt-text = "Reveal option where words are not readable by default" + caption = "Hold down to reveal UI from the [UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1230%3A223)" + layout = "float-right-desktop -background -shadow" +%} + +**Option 3: Using Interactions to “Uncover” or “Reveal”** + +A clever way to give a user their recovery phrase is by creating an interaction where they have to “uncover” it. This can entail hovering over a blurred word to reveal it, or holding down a button to show it. + +By creating this design interaction, it drills in how viewing, storing, and managing recovery phrases should be a private and secret matter. + +
+ +
+ +{% include image.html + image = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-all-at-once.png" + retina = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/copy-recovery-phrase-all-at-once@2x.png" + width = 250 + height = 600 + alt-text = "Show all 12 words at once" + caption = "All words at once UI from the [UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1230%3A305)" + layout = "float-left-desktop -background -shadow" +%} + +**Option 4: All at Once** + +Lastly, another design is to give a user the words all at once. In this design, all words are shown on one screen. + + +Here, there are no surprises in how long it is and does not require them to take any further action in revealing it. + +Throwing 12 or 24 words at a user all at once can potentially overwhelm them if they are not familiar with recovery phrases in general. This also introduces the possibility of a user skipping over this one screen with contents that inherently determines the safety of their funds. + +
+ +### Confirming a backup + +This step is a great way to ensure and test that the user in question actually stored their recovery phrase in a way that allows them to access and recount it. This typically entails prompting them to recall the words, which can be done in multiple ways that are laid out below. + + +{% include /tip/open.html label="Tip: Confirm User Understanding" icon="info" color="blue" %} + +Try to make sure users understand your team cannot access their recovery phrase if they lose it. This drills in the importance of them properly and securely storing it, reiterating that access to their funds is always in their own hands. + +{% include /tip/close.html %} + +
+ +{% include image.html + image = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase.png" + retina = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase@2x.png" + width = 250 + height = 600 + alt-text = "Confirming a recovery phrase by tapping" + caption = "Word bank UI from the [UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1230%3A408)" + layout = "float-left-desktop -background -shadow" +%} + +**Option 1: Selecting Words from a Bank** + +A common design for confirming a manual backup is to present users with a scrambled word bank consisting of the words that make up their recovery phrase. Users are then prompted to select the words in the correct order. + +
+ +
+ +{% include image.html + image = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-entry.png" + retina = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-entry@2x.png" + width = 250 + height = 600 + alt-text = "Typing a recovery phrase" + caption = "Typing it out UI from the [UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1230%3A538)" + layout = "float-right-desktop -background -shadow" +%} + +**Option 2: Manually Typing it Out** + +One way to present this is by giving them numbered fields (12 or 24 words depending on the length of the respective scheme) so that users can make sure they are entering it in the correct order. + +
+ +{% include /tip/open.html label="Tip: Tell Users if they’re on the Right Track" icon="info" color="blue" %} + +Because typing each word out comes with more room for error, create a visual indicator that shows if the user is on the right track (i.e., make the box green if it is correct, make it red if it is incorrect). It can be frustrating for a user to get a general warning that a word is not correct after having them manually type it out and force them to sleuth out where a misspelled word or wrong order occurred. + +{% include /tip/close.html %} + +
+ +{% include image.html + image = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-columns.png" + retina = "/assets/images/guide/onboarding/backing-up-a-recovery-phrase/manual-backup/confirm-recovery-phrase-columns@2x.png" + width = 250 + height = 600 + alt-text = "Identify specific recovery phrase words" + caption = "Word recall from the [UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1230%3A828)" + layout = "float-right-desktop -background -shadow" +%} + +**Option 3: Recall a Random Word** + +You could also ask users to select (or manually type out) a random word from their recovery phrase. For example, you would ask them to “type out word number 5”, or “type out word number 11”. To ensure maximum security, make sure you do this with 3-4 different words. This design is less cumbersome for users, but might be a pain if they did not number the words. + +
+ +The next section will highlight some options for [restoring a wallet]({{ 'guide/onboarding/restoring-a-wallet' | relative_url }}). diff --git a/guide/onboarding/protecting-a-wallet.md b/guide/onboarding/protecting-a-wallet.md new file mode 100644 index 000000000..67740b424 --- /dev/null +++ b/guide/onboarding/protecting-a-wallet.md @@ -0,0 +1,174 @@ +--- +layout: guide +title: Protecting a wallet +description: Adding extra layers of security +parent: Onboarding +nav_order: 6 +permalink: /guide/onboarding/protecting-a-wallet/ +main_classes: -no-top-padding +--- + + + +{% include picture.html + image = "/assets/images/guide/onboarding/protecting-a-wallet/hide-sensitive-information-header.png" + alt-text = "Payment Privacy & Security" + caption = 'Person by [DrawKit](https://www.drawkit.io/illustrations/mobile-article-colour) and trees by [Flaticon](https://www.flaticon.com/free-icon/tree-with-many-leaves_25267)' + width = 1600 + height = 600 + layout = "full-width" +%} + +# Protecting a wallet + +Bitcoin wallets contain sensitive information such as recovery phrases, balances, transaction histories, and more. Therefore, it is crucial to add extra layers of security to keep private data out of bad actors' hands. Additional protection may also be necessary for users who share devices, such as parents with children. + +A common practice for wallets is to have a barrier (i.e., Touch ID, PINs, etc.) that must be unlocked to open a wallet application. Creating robust and challenging-to-crack passwords and PIN codes isn't something that everyone excels at. To decrease the chance of someone’s wallet getting hacked because of poor security decisions, you can implement the following into your design: + +## Touch ID/Face ID + +
+ +{% include image.html + image = "/assets/images/guide/onboarding/protecting-a-wallet/face-id-info.png" + retina = "/assets/images/guide/onboarding/protecting-a-wallet/face-id-info@2x.png" + width = 250 + height = 541 + alt-text = "Face ID screen" + caption = "Face ID UI from [Wallet UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1228%3A27860)" + layout = "float-left-desktop -background -shadow" +%} + +One convenient way for users to verify their identity to unlock your wallet app is with biometrics. This could take the form of either touch or face ID. + +Users of Android and iOS devices are already familiar with these motions. More importantly, using biometrics does not require the user to remember anything, decreasing their chances of getting locked out of their wallet. + +Unfortunately, biometrics are not supported on all mobile devices. Hardcore security users may be wary about giving up their biometric information. + +
+ +{% include /tip/open.html label="Tip: Be Transparent" icon="info" color="blue" %} + +Bitcoin wallet users may feel hesitant about the privacy implications of your product storing touch/face ID information. Be sure your app thoroughly relays how this information is stored. + +{% include /tip/close.html %} + +## PIN + +A PIN is one of the most common and traditional methods for securing a mobile application. This setup requires that users create a 4-6 digit PIN that must be entered when opening their wallet application or viewing sensitive information such as their recovery phrase. + + + +All devices can support the PIN-based approach, which makes it more accessible. A PIN can also be used to encrypt data within a wallet, making any locally stored information on the device inaccessible. Additionally, some users prefer this type of security measure because they use the same or similar PINs on multiple applications/devices, making it easy to remember. + +However, users with poor security practices might create easy-to-guess PINs (such as 1234), which would provide a false sense of security. This design also relies on users to remember their PIN correctly. + +{% include tip/open.html color="green" icon="check" label="Do: Educate on Good Security Practices" %} + +Within your product upon PIN creation, tell your users what a good, secure PIN is (i.e. not their birthday). Recommend against (or even make it impossible) to create a PIN such as 1234, 1111, etc. + +{% include tip/close.html %} + + +## Hiding Sensitive Information + +Imagine this scenario. Your user is in a public place, and they need to make a payment using their bitcoin wallet. They open your wallet on their phone, but they don’t feel comfortable having their address and balance information clearly visible to strangers who may be looking over their shoulder, persons lurking or video surveillance. Hence by giving users the ability to hide sensitive information in their wallet if desired, they gain an added sense of physical privacy and security when using the app in public. + +## What information is considered sensitive ? + +Sensitive information in wallet applications include the wallet balance, addresses, private keys and previous transactions information. +- Wallet Balance - shows how much is owned +- Addresses - can be used to track transaction history +- Private keys - can be used to access and transfer bitcoins + +It's more common for wallets to protect private keys, but not much is done for other sensitive information like the balance, addresses, and previous transactions. A few wallets like [Bitcoin Core](https://bitcoin.org/en/bitcoin-core/), [Wasabi](https://wasabiwallet.io/), [Wallet of Satoshi](https://www.walletofsatoshi.com/), and others have made it work, though. Below is a pattern and considerations for hiding and revealing sensitive information. + +## Quickly hide from overview screen + +The hide icon/button, which is usually displayed within close reach of the balance itself, is used to quickly and easily hide and reveal wallet information by tapping or clicking on it. + +{% include picture.html + image = "/assets/images/guide/onboarding/protecting-a-wallet/hide-by-eye-icon.gif" + alt-text = "A gif of a mobile interface for hiding user information" + width = 1600 + height = 800 +%} + +This is an easy and convenient way to switch between revealed and hidden states, but still makes it easy for anyone else to reveal user information if they have access to their device. + +## Entering a PIN to reveal information + +With this method it's as easy to reverse the hidden state as it is to enable it. This is good for convenience sake, however, for protection against unauthorized access, perhaps the user should only be able to unhide their information if a PIN or password has been entered. This could therefore reaffirm the identity of the wallet owner for extra security. + +{% include picture.html + image = "/assets/images/guide/onboarding/protecting-a-wallet/reveal-by-pin.gif" + alt-text = "A gif showing a mobile interface where hidden information is revealed with a PIN" + width = 1600 + height = 800 +%} + +In this example the risk of an unauthorized person revealing their information is minimal due to the PIN required. However, it might not be convenient for the users to repeatedly put in their PIN when ever they want to reveal their information especially if they do so often. + +## Hide if inactive + +Another solution is to invoke the wallet’s hidden state as a default when the app is opened, to protect against prying eyes during initial display. The pre-hidden state can be unveiled after a tap, PIN entry, or perhaps a short 5-second timer. + +{% include picture.html + image = "/assets/images/guide/onboarding/protecting-a-wallet/hide-by-default.gif" + alt-text = "A gif showing a mobile interface where sensitive information is hidden by default" + width = 1600 + height = 800 +%} + + +This gives users some time to assess their environment before their info is displayed but could leave them frustrated, having to wait for their information to be revealed especially in an urgent situation. + +## Making the toggle less obvious + +Having the show/hide button right on the main screen makes things quite obvious for someone who has access to a users device to press unhide. A solution would be to move the hide toggle away from the home screen and into the [app settings](https://medium.com/@olanrewajusodiq64/the-ui-ux-of-hide-balance-designing-to-improve-asset-security-e4b20668f315). This way, if someone has access to their device and opens the app, they may not immediately know how to reveal the balance, transaction and/or addresses as it is not made obvious as the previous solutions. + +{% include picture.html + image = "/assets/images/guide/onboarding/protecting-a-wallet/hide-in-settings.gif" + alt-text = "A gif showing a mobile interface where the toggle for hiding information is moved to settings" + width = 1600 + height = 800 +%} + +An advantage here is the risk of an unauthorized person revealing their information is minimal due to the fact that the toggle isn't immediately visible on the home screen. The downside is that a user cannot quickly hide their information if the need arises. + +## Why are these patterns important to designers? + +Privacy in bitcoin payments goes far beyond hiding balances and other sensitive information. The [privacy by design framework](https://www.ipc.on.ca/wp-content/uploads/Resources/7foundationalprinciples.pdf) states that privacy should be incorporated and built into products by default. This way, whether or not the user is concerned with their data privacy, they would always be protected through good UX and UI. + +By including UX patterns for hiding information pattern wallets, we give users a greater sense of control and comfort in any situation. They have the freedom to decide whether or not they want their information visible. + +Now let's look at the different ways a user might go about [funding a wallet]({{ 'guide/onboarding/funding-a-wallet' | relative_url }}). diff --git a/guide/onboarding/restoring-a-wallet.md b/guide/onboarding/restoring-a-wallet.md new file mode 100644 index 000000000..7ae12fc63 --- /dev/null +++ b/guide/onboarding/restoring-a-wallet.md @@ -0,0 +1,50 @@ +--- +layout: guide +title: Restoring a wallet +description: Options for restoring a wallet +parent: Onboarding +nav_order: 4 +permalink: /guide/onboarding/restoring-a-wallet/ +main_classes: -no-top-padding +--- + +# Restoring a wallet + +
+ +There are a number of reasons why a user might need to recover their wallet. Typically, this might be because they lost their device, had it stolen, are migrating from a different wallet or deleted and redownloaded a particular wallet application. Regardless of how it occurred, it’s important that your wallet application has clear, easy instructions that provide an easy way for users to recover their funds. There are a number of ways that a wallet recovery can be done. However, as covered in the [wallet interoperability]({{ 'guide/foundations/wallet-interoperability' | relative_url }}) section, not all wallets from one application can be recovered in another. + +{% include picture.html + image = "/assets/images/guide/onboarding/restoring-a-wallet/import-options.png" + retina = "/assets/images/guide/onboarding/restoring-a-wallet/import-options@2x.png" + width = 250 + height = 600 + alt-text = "Showing wallet import options" + caption = "Wallet import options from [Wallet UI Kit](https://www.figma.com/file/VB3GQdAnhl8yta44DY3PSV/Bitcoin-Wallet-UI-Kit?node-id=1227%3A27425)" + layout = "float-desktop -background -shadow" +%} + +
+ +### Restore from an automatic cloud backup + +As outlined earlier in the chapter, we consider an automatic cloud backup a good option, especially for beginners. One of the major UX benefits of this is a seamless recovery process. All users needs to do to gain access to their funds again is to log into their cloud storage account. + +If they aren't logged in, they only need to enter their password before the wallet can automatically access the recovery phrase stored on the user's iCloud or Google Drive account. Once the recovery phrase is located, the wallet can begin to regenerate the keys required for the user to access their funds. + +### Restore with recovery phrase + +Users of your bitcoin wallet may also have created other wallets with different providers. If this is the case, they can transfer that wallet into yours by entering their 12 or 24-word recovery phrase. There are several ways you can choose to allow a user to enter a recovery phase. These were outlined earlier in the [manual backup]({{ 'guide/onboarding/backing-up-a-recovery-phrase/manual-backup/' | relative_url }}) section of this chapter. + +### Restore from an encrypted QR code backup + +You might also provide the option for users to scan an encrypted QR code version of their recovery phrase. This has two key benefits: + +1. Switching between a mobile OS is easier. +2. It provides the option for more redundant backups. + +For a more detailed explantion of this recovery technique check out this [blog post](https://blog.keys.casa/product-update-transaction-memos-encrypted-backups/) by Casa. + +Some less popular methods include importing a file such as wallet.dat. Such a file would have all the information required to recover funds such as public keys and key metadata. In some cases you might be developing a watch-only wallet that only lets users track their bitcoin transactions. In this case you would import an extended public key, this tends to be for technically minded users however. + +The next section looks at options for adding extra layers of security and [protecting a wallet]({{ 'guide/onboarding/protecting-a-wallet' | relative_url }}).