diff --git a/_compress_images_cache.yml b/_compress_images_cache.yml index 762ccabe7..93346505e 100644 --- a/_compress_images_cache.yml +++ b/_compress_images_cache.yml @@ -1429,3 +1429,7 @@ assets/images/guide/glossary/signature@2x.jpg: signature@2x.jpg assets/images/contribute/alby.png: alby.png assets/images/contribute/bitcoin-smiles.png: bitcoin-smiles.png assets/images/contribute/hello-bitcoin.png: hello-bitcoin.png +assets/images/guide/designing-products/wallet-interoperability/hardware-wallets.jpg: hardware-wallets.jpg +assets/images/guide/designing-products/wallet-interoperability/hardware-wallets@2x.jpg: hardware-wallets@2x.jpg +assets/images/guide/designing-products/wallet-interoperability/user-interface.jpg: user-interface.jpg +assets/images/guide/designing-products/wallet-interoperability/user-interface@2x.jpg: user-interface@2x.jpg diff --git a/assets/images/guide/designing-products/wallet-interoperability/hardware-wallets.jpg b/assets/images/guide/designing-products/wallet-interoperability/hardware-wallets.jpg index 75ba597e2..c6666512a 100644 Binary files a/assets/images/guide/designing-products/wallet-interoperability/hardware-wallets.jpg and b/assets/images/guide/designing-products/wallet-interoperability/hardware-wallets.jpg differ diff --git a/assets/images/guide/designing-products/wallet-interoperability/hardware-wallets@2x.jpg b/assets/images/guide/designing-products/wallet-interoperability/hardware-wallets@2x.jpg index 654d5ee14..d32ed411a 100644 Binary files a/assets/images/guide/designing-products/wallet-interoperability/hardware-wallets@2x.jpg and b/assets/images/guide/designing-products/wallet-interoperability/hardware-wallets@2x.jpg differ diff --git a/assets/images/guide/designing-products/wallet-interoperability/user-interface.jpg b/assets/images/guide/designing-products/wallet-interoperability/user-interface.jpg index 97f0c7dcc..ae0073a35 100644 Binary files a/assets/images/guide/designing-products/wallet-interoperability/user-interface.jpg and b/assets/images/guide/designing-products/wallet-interoperability/user-interface.jpg differ diff --git a/assets/images/guide/designing-products/wallet-interoperability/user-interface@2x.jpg b/assets/images/guide/designing-products/wallet-interoperability/user-interface@2x.jpg index 57dd2edb0..8f6db3021 100644 Binary files a/assets/images/guide/designing-products/wallet-interoperability/user-interface@2x.jpg and b/assets/images/guide/designing-products/wallet-interoperability/user-interface@2x.jpg differ diff --git a/guide/designing-products/common-user-flows.md b/guide/designing-products/common-user-flows.md index d65f7813f..6bb7c01c4 100644 --- a/guide/designing-products/common-user-flows.md +++ b/guide/designing-products/common-user-flows.md @@ -2,7 +2,7 @@ layout: guide title: Common user flows description: Overview of the most common user activities in Bitcoin applications. -nav_order: 7 +nav_order: 8 parent: Designing Bitcoin products permalink: /guide/designing-products/common-user-flows/ main_classes: -no-top-padding @@ -567,11 +567,11 @@ This can be a tricky experience to address. For one, non-custodial cryptocurrenc --- -On to [wallet interoperability]({{ '/guide/designing-products/wallet-interoperability/' | relative_url }}) which is essential for smooth interaction and migration between Bitcoin products. +On to [interoperability]({{ '/guide/designing-products/wallet-interoperability/' | relative_url }}) which is essential for smooth interaction and migration between Bitcoin products. {% include next-previous.html - previousUrl = "/guide/designing-products/personal-finance/" - previousName = "Personal finance" + previousUrl = "/guide/designing-products/getting-to-know-your-users/" + previousName = "Getting to know your users" nextUrl = "/guide/designing-products/wallet-interoperability/" - nextName = "Wallet interoperability" + nextName = "Interoperability" %} diff --git a/guide/designing-products/design-resources.md b/guide/designing-products/design-resources.md index c200cc0d7..d108ea1c7 100644 --- a/guide/designing-products/design-resources.md +++ b/guide/designing-products/design-resources.md @@ -2,7 +2,7 @@ layout: guide title: Design resources description: Design files by and for the Bitcoin Design Community -nav_order: 9 +nav_order: 10 parent: Designing Bitcoin products permalink: /guide/designing-products/design-resources/ main_classes: -no-top-padding diff --git a/guide/designing-products/designing-products.md b/guide/designing-products/designing-products.md index 8fb06229e..606163ebc 100644 --- a/guide/designing-products/designing-products.md +++ b/guide/designing-products/designing-products.md @@ -70,13 +70,19 @@ If we consider Bitcoin money, we need to consider how Bitcoin users think about --- +### [Getting to know your users]({{ '/guide/designing-products/getting-to-know-your-users/' | relative_url }}) + +This section will give you some tips on how best to understand and develop knowledge about your users. + +--- + ### [Common user flows]({{ '/guide/designing-products/common-user-flows/' | relative_url }}) Most Bitcoin applications share certain user activities, from initial setup to making a transaction. It is vital to follow users' expected patterns and behaviors to reduce mistakes and enable seamless switching between products. --- -### [Wallet interoperability]({{ '/guide/designing-products/wallet-interoperability/' | relative_url }}) +### [Interoperability]({{ '/guide/designing-products/wallet-interoperability/' | relative_url }}) Get to know the points of interaction and overlap connecting payment links, wallet recovery, node configurations, and more. diff --git a/guide/onboarding/getting-to-know-your-users.md b/guide/designing-products/getting-to-know-your-users.md similarity index 80% rename from guide/onboarding/getting-to-know-your-users.md rename to guide/designing-products/getting-to-know-your-users.md index 8f923ea58..529e727c4 100644 --- a/guide/onboarding/getting-to-know-your-users.md +++ b/guide/designing-products/getting-to-know-your-users.md @@ -2,13 +2,23 @@ layout: guide title: Getting to know your users description: How best to understand and develop knowledge about your users. -parent: Onboarding -nav_order: 1 -permalink: /guide/onboarding/getting-to-know-your-users/ +parent: Designing Bitcoin products +nav_order: 7 +permalink: /guide/designing-products/getting-to-know-your-users/ main_classes: -no-top-padding image: https://bitcoin.design/assets/images/guide/onboarding/getting-to-know-your-users/getting-to-know-your-users-preview.png --- + + {% include picture.html image = "/assets/images/guide/onboarding/getting-to-know-your-users/getting-to-know-your-users.png" retina = "/assets/images/guide/onboarding/getting-to-know-your-users/getting-to-know-your-users@2x.png" @@ -21,12 +31,12 @@ 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, [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. +When building Bitcoin applications, 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, [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: +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 experience for new users: + * [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? @@ -176,17 +186,17 @@ 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](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. +You might choose to lean on something like the [Bitcoin Wallet UI Kit](https://www.bitcoinuikit.com/), 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. +Ultimately the goal of getting to know your users is to build trust in 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. --- -Next, we will cover [creating a new wallet]({{ '/guide/onboarding/creating-a-new-wallet/' | relative_url }}). +Next, we will cover [common user flows]({{ '/guide/designing-products/common-user-flows/' | relative_url }}). {% include next-previous.html - previousUrl = "/guide/onboarding/introduction/" - previousName = "Onboarding" - nextUrl = "/guide/onboarding/creating-a-new-wallet/" - nextName = "Creating a new wallet" + previousUrl = "/guide/designing-products/personal-finance/" + previousName = "Personal finance" + nextUrl = "/guide/designing-products/common-user-flows/" + nextName = "Common user flows" %} diff --git a/guide/designing-products/personal-finance.md b/guide/designing-products/personal-finance.md index 8c2d9c0d0..e4588d3f4 100644 --- a/guide/designing-products/personal-finance.md +++ b/guide/designing-products/personal-finance.md @@ -263,11 +263,11 @@ Considering your product, ask yourself these questions: --- -Looking closer at these use cases, we can identify a series of user actions, as outlined in [common user flows]({{ '/guide/designing-products/common-user-flows/' | relative_url }}). +Next we will look at why it is important to [get to know your users]({{ '/guide/designing-products/getting-to-know-your-users/' | relative_url }}) when desiging Bitcoin applications. {% include next-previous.html previousUrl = "/guide/designing-products/usage-life-cycle/" previousName = "Usage life cycle" - nextUrl = "/guide/designing-products/common-user-flows/" - nextName = "Common user flows" + nextUrl = "/guide/designing-products/getting-to-know-your-users/" + nextName = "Getting to know your users" %} diff --git a/guide/designing-products/wallet-interoperability.md b/guide/designing-products/wallet-interoperability.md index 785da23cb..f7398a737 100644 --- a/guide/designing-products/wallet-interoperability.md +++ b/guide/designing-products/wallet-interoperability.md @@ -2,7 +2,7 @@ layout: guide title: Interoperability description: Designing for seamless experiences across Bitcoin applications. -nav_order: 8 +nav_order: 9 parent: Designing Bitcoin products permalink: /guide/designing-products/wallet-interoperability/ main_classes: -no-top-padding diff --git a/guide/onboarding/backing-up-a-recovery-phrase.md b/guide/onboarding/backing-up-a-recovery-phrase.md index 180da6710..97043e0d7 100644 --- a/guide/onboarding/backing-up-a-recovery-phrase.md +++ b/guide/onboarding/backing-up-a-recovery-phrase.md @@ -4,7 +4,7 @@ title: Backing up a recovery phrase description: Handling recovery phrases during onboarding. parent: Onboarding has_children: true -nav_order: 3 +nav_order: 2 permalink: /guide/onboarding/backing-up-a-recovery-phrase/ main_classes: -no-top-padding image: https://bitcoin.design/assets/images/guide/onboarding/backing-up-a-recovery-phrase/backing-up-a-recovery-phrase-preview.png diff --git a/guide/onboarding/creating-a-new-wallet.md b/guide/onboarding/creating-a-new-wallet.md index 74731dd0e..2c430165f 100644 --- a/guide/onboarding/creating-a-new-wallet.md +++ b/guide/onboarding/creating-a-new-wallet.md @@ -3,7 +3,7 @@ layout: guide title: Creating a new wallet description: Steps to take when creating a new wallet, and tips for a great user experience. parent: Onboarding -nav_order: 2 +nav_order: 1 permalink: /guide/onboarding/creating-a-new-wallet/ main_classes: -no-top-padding image: https://bitcoin.design/assets/images/guide/onboarding/creating-a-new-wallet/creating-a-new-wallet-preview.png @@ -107,7 +107,7 @@ 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.]({{ '/guide/onboarding/backing-up-a-recovery-phrase/' | relative_url }}) {% include next-previous.html - previousUrl = "/guide/onboarding/getting-to-know-your-users/" + previousUrl = "/guide/onboarding/introduction/" previousName = "Getting to know your users" nextUrl = "/guide/onboarding/backing-up-a-recovery-phrase/" nextName = "Backing up a recovery phrase" diff --git a/guide/onboarding/funding-a-wallet.md b/guide/onboarding/funding-a-wallet.md index 946b037d3..15da06ff4 100644 --- a/guide/onboarding/funding-a-wallet.md +++ b/guide/onboarding/funding-a-wallet.md @@ -3,7 +3,7 @@ layout: guide title: Funding a wallet description: Outline of the ways users are likely to fund a wallet, from direct purchase to bitcoin gift cards. parent: Onboarding -nav_order: 7 +nav_order: 5 permalink: /guide/onboarding/funding-a-wallet/ main_classes: -no-top-padding image: https://bitcoin.design/assets/images/guide/onboarding/funding-a-wallet/funding-a-wallet-preview.png diff --git a/guide/onboarding/introduction.md b/guide/onboarding/introduction.md index 9c965e6a4..eccdd99d0 100644 --- a/guide/onboarding/introduction.md +++ b/guide/onboarding/introduction.md @@ -43,12 +43,6 @@ Remember: Onboarding should not be a crutch for bad design. Avoid trying to expl --- -### [Getting to know your users]({{ '/guide/onboarding/getting-to-know-your-users/' | relative_url }}) - -This section will give you some tips on how best to understand and develop knowledge about your users. - ---- - ### [Creating a new wallet]({{ '/guide/onboarding/creating-a-new-wallet/' | relative_url }}) An overview of what information to include when creating a wallet for the first time. @@ -82,6 +76,6 @@ An overview of how users are likely to fund their wallets {% include next-previous.html previousUrl = "/guide/designing-products/design-resources/" previousName = "Design resources" - nextUrl = "/guide/onboarding/getting-to-know-your-users/" - nextName = "Getting to know your users" + nextUrl = "/guide/onboarding/creating-a-new-wallet/" + nextName = "Creating a new wallet" %} diff --git a/guide/onboarding/protecting-a-wallet.md b/guide/onboarding/protecting-a-wallet.md index 2046c7381..af7e298d8 100644 --- a/guide/onboarding/protecting-a-wallet.md +++ b/guide/onboarding/protecting-a-wallet.md @@ -3,7 +3,7 @@ layout: guide title: Protecting a wallet description: How extra layers of security can be added to Bitcoin applications via PINs, Face Id, and other techniques. parent: Onboarding -nav_order: 6 +nav_order: 4 permalink: /guide/onboarding/protecting-a-wallet/ main_classes: -no-top-padding image: https://bitcoin.design/assets/images/guide/onboarding/protecting-a-wallet/protecting-a-wallet-preview.png diff --git a/guide/onboarding/restoring-a-wallet.md b/guide/onboarding/restoring-a-wallet.md index 69f6d57aa..d4382d75d 100644 --- a/guide/onboarding/restoring-a-wallet.md +++ b/guide/onboarding/restoring-a-wallet.md @@ -3,7 +3,7 @@ layout: guide title: Restoring a wallet description: Options for restoring a wallet, from automatic cloud backup to recovery phrases, and more. parent: Onboarding -nav_order: 4 +nav_order: 3 permalink: /guide/onboarding/restoring-a-wallet/ main_classes: -no-top-padding image: https://bitcoin.design/assets/images/guide/onboarding/restoring-a-wallet/restoring-a-wallet-preview.png