Updates to First use and Create Wallet flows (#109)

* Updates to First use page

Updates based insights from user testing of onboarding flow

* Delete workspace.json

* Update to Milestone 1.4: Wallet creation

Updates describing single-sig wallet creation flow introduced after user testing of the flow

* Updates to First use and Create wallet pages

Moves back IBD and notifications to First use and adds updated Milestone image

* Image cleanup

- Moving some images from the create wallet page back to the first use page, since they belong into that flow and are used in that page.
- Adding some missing image extensions.
- Fixing some image sizes.

---------

Co-authored-by: GBKS <[email protected]>

.gitignore

@@ -3,4 +3,9 @@ _site
 .jekyll-cache
 .jekyll-metadata
 vendor
-.DS_Store
+.DS_Store
+pages/.obsidian/core-plugins.json
+pages/.obsidian/core-plugins-migration.json
+pages/.obsidian/appearance.json
+pages/.obsidian/app.json
+pages/.obsidian/workspace.json

pages/first-use.md

@@ -28,32 +28,34 @@ Ideally, users already clearly understand the application benefits and unique fe
 	big = "/assets/images/first-use/info-big.png"
 	alt-text = "Info screens to explain the app purpose and essential features"
 	width = 800
-	height = 417
+	height = 418
 %}
 
 Since the application requires a lot of storage, we may want to offer users some simple options, particularly on smart phones. Ideally, the application detects available drives and space, and makes an appropriate recommendation that the user only needs to confirm.
 
-{% include picture.html
-	image = "/assets/images/first-use/storage-location.png"
-	retina = "/assets/images/first-use/storage-[email protected]"
-	big = "/assets/images/first-use/storage-location-big.png"
-	alt-text = "Screen for choosing default or custom storage location"
-	width = 800
-	height = 417
-%}
-
-This where the user chooses between pruning and storing all downloaded blocks. They also have the option to customize the maximum amount of storage to use. Also see [storage settings]({{ '/settings/storage/' | relative_url }}).
+First, the user chooses between pruning and storing all downloaded blocks. They also have the option to customize the maximum amount of storage to use. Also see [storage settings]({{ '/settings/storage/' | relative_url }}).
 
 {% include picture.html
 	image = "/assets/images/first-use/storage-amount.png"
 	retina = "/assets/images/first-use/storage-[email protected]"
 	big = "/assets/images/first-use/storage-amount-big.png"
 	alt-text = "Screens for choosing between pruned or full block data storage"
 	width = 800
-	height = 417
+	height = 418
+%}
+
+Then the user decides where to keep downloaded data. They can easily choose desired storage location if the default one is not preferred or has not enough space available. 
+
+{% include picture.html
+	image = "/assets/images/first-use/storage-location.png"
+	retina = "/assets/images/first-use/storage-[email protected]"
+	big = "/assets/images/first-use/storage-location-big.png"
+	alt-text = "Screen for choosing default or custom storage location"
+	width = 800
+	height = 418
 %}
 
-The first use ends with the initial block download. It's a time-consuming activity that users are typically not familiar with from other applications. The following screen ensures that they understand what will happen next, when they will navigate the application independently.
+After that, user can continue to [create wallet]({{ '/milestones/1-4-create' | relative_url }}), where at the end of the process they begin initial block download. It's a time-consuming activity that users are typically not familiar with from other applications. The following screen ensures that they understand what will happen next, when they will navigate the application independently.
 
 Bandwidth may also be limited or expensive for the user, particularly on mobile. The initial block download is particularly problematic, so we may want to ensure that users are guided towards the best option. Also see [connection settings]({{ '/settings/connection/' | relative_url }}).
 
@@ -63,7 +65,7 @@ Bandwidth may also be limited or expensive for the user, particularly on mobile.
 	big = "/assets/images/first-use/ibd-and-connection-big.png"
 	alt-text = "Screen that prepares the user for the initial block download, as well as connection settings"
 	width = 800
-	height = 417
+	height = 418
 %}
 
 On Android, a persistent system notification is required to prevent the operating system from pausing the node. This screen explains that to users and prepares them for making an informed decision about accepting or rejecting notification permissions. "Enable" then presents the user with the OS permission request. This can be changed later in OS settings (not in application settings).
@@ -74,7 +76,7 @@ On Android, a persistent system notification is required to prevent the operatin
 	big = "/assets/images/first-use/notifications-big.png"
 	alt-text = "Screen explaining the rationale and use of notifications"
 	width = 800
-	height = 551
+	height = 418
 %}
 
-After these onboarding steps, users are navigated to the [block clock]({{ '/block-clock/' | relative_url }}), which then connects to the network and starts the initial block download.
+After these steps, users are navigated to the [block clock]({{ '/block-clock/' | relative_url }}), which in case of first use then connects to the network and starts the initial block download.

pages/milestones/1-4-create.md

@@ -18,30 +18,76 @@ In this milestone, we add the wallet creation flow. This will only include singl
 	image = "/assets/images/milestones/1-4-create.png"
 	retina = "/assets/images/milestones/1[email protected]"
 	big = "/assets/images/milestones/1-4-create-big.png"
-	alt-text = "A visual map of which screens will be added in the 1.3 milestone"
+	alt-text = "A visual map of which screens will be added in the 1.4 milestone"
 	width = 800
 	height = 384
 %}
 
-The onboarding flow will be updated to include information about wallet features.
+Below is an iteration of the wallet creation flow, including single-key, multi-key, view-only, and custom paths. Many details need to be refined. Click to see it larger.
+
+{% include picture.html
+	image = "/assets/images/create-wallet/flow.png"
+	retina = "/assets/images/create-wallet/[email protected]"
+	big = "/assets/images/create-wallet/flow-big.png"
+	alt-text = "User flow mock-ups for creating a new wallet."
+	width = 800
+	height = 415
+%}
+
+## Create single-sig wallet
+During the onboarding flow, the user is informed that only single-sig wallets are currently available, but that other options will be added in future implementations.
 
 {% include picture.html
 	image = "/assets/images/create-wallet/onboarding-wallet-features.png"
 	retina = "/assets/images/create-wallet/onboarding-[email protected]"
 	big = "/assets/images/create-wallet/onboarding-wallet-features-big.png"
 	alt-text = "An informational screen describing supported wallet features"
 	width = 800
-	height = 711
+	height = 417
 %}
 
-Below is an iteration of the wallet creation flow, including single-key, multi-key, view-only, and custom paths. Many details need to be refined. Click to see it larger.
+Creating single-sig wallet starts with a screen that introduces user to the concept of wallet stored on user's hard drive with option to protect it with a password.
 
 {% include picture.html
-	image = "/assets/images/create-wallet/flow.png"
-	retina = "/assets/images/create-wallet/flow@2x.png"
-	big = "/assets/images/create-wallet/flow-big.png"
-	alt-text = "User flow mock-ups for creating a new wallet."
+	image = "/assets/images/create-wallet/wallet-info.png"
+	retina = "/assets/images/create-wallet/wallet-info@2x.png"
+	big = "/assets/images/create-wallet/wallet-info-big.png"
+	alt-text = "An informational screen describing introducing single-sig wallet"
 	width = 800
-	height = 415
+	height = 417
+%}
+
+Next step is to come up with wallet name, that will also be used as the name of the .dat file stored on user's hard drive.
+
+{% include picture.html
+	image = "/assets/images/create-wallet/name.png"
+	retina = "/assets/images/create-wallet/[email protected]"
+	big = "/assets/images/create-wallet/name-big.png"
+	alt-text = "Screen prompting user to input wallet name"
+	width = 800
+	height = 418
+%}
+
+Now it's time to decide, If the wallet should be encrypted by a password. This step is critical, because in case of loosing the password, restoring the wallet is virtually impossible. That's why this step is forcing users to slow down a bit and confirm they understand the significance of this by using a toggle, which enables them to continue the flow. Users can also skip this step to create a wallet without encryption.
+
+{% include picture.html
+	image = "/assets/images/create-wallet/password.png"
+	retina = "/assets/images/create-wallet/[email protected]"
+	big = "/assets/images/create-wallet/password-big.png"
+	alt-text = "Screen that allows to encrypt the wallet with a password"
+	width = 800
+	height = 417
+%}
+
+Moving forward, private keys are generated in the software and the wallet has been created. Immediately after that, the user is encouraged to create a backup copy of the wallet .dat file. 
+
+{% include picture.html
+	image = "/assets/images/create-wallet/wallet-created.png"
+	retina = "/assets/images/create-wallet/wallet-[email protected]"
+	big = "/assets/images/create-wallet/wallet-created-big.png"
+	alt-text = "Screens showing wallet creation confirmation and encouragement to back up wallet file"
+	width = 800
+	height = 417
 %}
 
+After these steps, users are navigated to the [block clock]({{ '/block-clock/' | relative_url }}). If IBD already has occurred, users can immediately start using their new empty wallet.