Add gallery of screens to the daily spending case study page

_compress_images_cache.yml

@@ -595,6 +595,37 @@ assets/images/guide/getting-started/common-user-flows/sending-ui-basic.png: send
 assets/images/guide/getting-started/common-user-flows/[email protected]: [email protected]
 assets/images/guide/getting-started/common-user-flows/sending-ui-complex.png: sending-ui-complex.png
 assets/images/guide/getting-started/common-user-flows/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/First.png: First.png
+assets/images/guide/case-studies/cloud-backup/advanced-options.png: advanced-options.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/backup-info.png: backup-info.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/balance.png: balance.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/change-private-key-scheme.png: change-private-key-scheme.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/export-wallet.png: export-wallet.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/home.png: home.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/import-wallet.png: import-wallet.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/input-recovery-phrase.png: input-recovery-phrase.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/more-information.png: more-information.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/recovery-phrase.png: recovery-phrase.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/second.png: second.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/settings.png: settings.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/first.png: first.png
+assets/images/guide/case-studies/cloud-backup/case-cash-mobile.png: case-cash-mobile.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
+assets/images/guide/case-studies/cloud-backup/case-cash.png: case-cash.png
+assets/images/guide/case-studies/cloud-backup/[email protected]: [email protected]
 assets/images/guide/onboarding/getting-to-know-your-users/banner.jpeg: banner.jpeg
 assets/images/guide/onboarding/getting-to-know-your-users/[email protected]: [email protected]
 assets/images/guide/onboarding/getting-to-know-your-users/banner-mobile.jpeg: banner-mobile.jpeg

guide/case-studies/cloud-backup.md

@@ -4,8 +4,31 @@ title: Daily spending
 nav_order: 1
 parent: Case studies
 permalink: /guide/case-studies/cloud-backup/
-main_classes: -no-top-padding
 image: https://bitcoin.design/assets/images/guide/getting-started/getting-started-preview.jpg
+image_base: /assets/images/guide/case-studies/cloud-backup/
+images:
+    - file: first
+      alt:
+      caption: Offer clear options to create and import wallets.
+    - file: second
+      alt:
+      caption: Explain what is about to happen. Be transparent about how the private key is stored and the risks. Advanced options can be placed on a separate page.
+    - file: more-information
+      alt:
+      caption: Explain how private keys are managed if you cannot fit it all on the previous screen. Link to general Bitcoin information to help users get up to speed.
+    - file: balance
+      alt:
+      caption: As key creation and backup is automated, users can immediately be navigated to the home screen.
+importImages:
+    - file: import-wallet
+      alt:
+      caption: Explain what importing a wallet means and what is required. Point out features or functions your wallet does not support if users may expect them.
+    - file: input-recovery-phrase
+      alt:
+      caption: Let users enter one word at a time and make it easy to see what order they should go in.
+    - file: backup-info
+      alt:
+      caption: Inform the user about how the private key is managed, and if you have options let users decide here.
 ---
 
 <!--
@@ -22,10 +45,10 @@ A single-key scheme with [automatic cloud backup]({{ '/guide/private-key-managem
 
 {% include prototype.html
    link = "https://www.figma.com/proto/SRWlaxbDulsacpPQn2TTri/Case-study-prototypes?node-id=1%3A3&viewport=1357%2C576%2C1&scaling=scale-down"
-   image = "/assets/images/guide/case-studies/case-cash.png"
-   retina = "/assets/images/guide/case-studies/[email protected]"
-   mobile = "/assets/images/guide/case-studies/case-cash-mobile.png"
-   mobileRetina = "/assets/images/guide/case-studies/[email protected]"
+   image = "/assets/images/guide/case-studies/cloud-backup/case-cash.png"
+   retina = "/assets/images/guide/case-studies/cloud-backup/[email protected]"
+   mobile = "/assets/images/guide/case-studies/cloud-backup/case-cash-mobile.png"
+   mobileRetina = "/assets/images/guide/case-studies/cloud-backup/[email protected]"
    alt-text = "Image of case study prototype"
    width = 800
    height = 500
@@ -42,4 +65,52 @@ A single-key scheme with [automatic cloud backup]({{ '/guide/private-key-managem
 - Additional user authentication to consider: biometrics, pin
 - Upgrade-path to other schemes if funds stored increase
 
+### Onboarding experience
+
+The wireframe screens below show the main onboarding sequence that guides users through the creation of the wallet.
+
+<div class="image-slide-gallery">
+
+{% for item in page.images %}
+
+{% capture imageURL %}{{ page.image_base }}{{ item.file }}.png{% endcapture %}
+{% capture imageURLRetina %}{{ page.image_base }}{{ item.file }}@2x.png{% endcapture %}
+
+{% include picture.html
+   image = imageURL
+   retina = imageURLRetina
+   alt-text = item.alt
+   caption = item.caption
+   width = 250
+   height = 541
+   layout = "shadow"
+%}
+{% endfor %}
+
+</div>
+
+### Importing a wallet
+
+The import sequence guides the user through entering the recovery phrase, which is then also encrypted and saved to cloud storage.
+
+<div class="image-slide-gallery">
+
+{% for item in page.importImages %}
+
+{% capture imageURL %}{{ page.image_base }}{{ item.file }}.png{% endcapture %}
+{% capture imageURLRetina %}{{ page.image_base }}{{ item.file }}@2x.png{% endcapture %}
+
+{% include picture.html
+   image = imageURL
+   retina = imageURLRetina
+   alt-text = item.alt
+   caption = item.caption
+   width = 250
+   height = 541
+   layout = "shadow"
+%}
+{% endfor %}
+
+</div>
+
 You can find a prototype for this case study linked in the image above, and a Figma file with [outline designs here](https://www.figma.com/file/SRWlaxbDulsacpPQn2TTri/Case-study-prototypes?node-id=0%3A1).