Add gallery of screens to the upgradeable wallet case study page

_compress_images_cache.yml

@@ -29,10 +29,6 @@ assets/images/guide/case-studies/case-cash-mobile.png: case-cash-mobile.png
 assets/images/guide/case-studies/case-cash-mobile@2x.png: case-cash-mobile@2x.png
 assets/images/guide/case-studies/case-cash.png: case-cash.png
 assets/images/guide/case-studies/case-cash@2x.png: case-cash@2x.png
-assets/images/guide/case-studies/case-current-mobile.png: case-current-mobile.png
-assets/images/guide/case-studies/case-current-mobile@2x.png: case-current-mobile@2x.png
-assets/images/guide/case-studies/case-current.png: case-current.png
-assets/images/guide/case-studies/case-current@2x.png: case-current@2x.png
 assets/images/guide/case-studies/case-shared-mobile.png: case-shared-mobile.png
 assets/images/guide/case-studies/case-shared-mobile@2x.png: case-shared-mobile@2x.png
 assets/images/guide/case-studies/case-shared.png: case-shared.png
@@ -41,10 +37,6 @@ assets/images/guide/case-studies/case-studies-mobile.jpg: case-studies-mobile.jp
 assets/images/guide/case-studies/case-studies-mobile@2x.jpg: case-studies-mobile@2x.jpg
 assets/images/guide/case-studies/case-studies.jpg: case-studies.jpg
 assets/images/guide/case-studies/case-studies@2x.jpg: case-studies@2x.jpg
-assets/images/guide/case-studies/case-upgradeable-mobile.png: case-upgradeable-mobile.png
-assets/images/guide/case-studies/case-upgradeable-mobile@2x.png: case-upgradeable-mobile@2x.png
-assets/images/guide/case-studies/case-upgradeable.png: case-upgradeable.png
-assets/images/guide/case-studies/case-upgradeable@2x.png: case-upgradeable@2x.png
 assets/images/guide/case-studies/page-case-studies.jpg: page-case-studies.jpg
 assets/images/guide/case-studies@2x.jpg: case-studies@2x.jpg
 assets/images/guide/contribute/content-guidelines-preview.jpg: content-guidelines-preview.jpg
@@ -766,3 +758,42 @@ assets/images/guide/payments/receive/transactions-no-label-context.png: transact
 assets/images/guide/payments/receive/transactions-no-label-context@2x.png: transactions-no-label-context@2x.png
 assets/images/guide/payments/receive/transactions-with-label-context.png: transactions-with-label-context.png
 assets/images/guide/payments/receive/transactions-with-label-context@2x.png: transactions-with-label-context@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/advanced-options.png: advanced-options.png
+assets/images/guide/case-studies/upgradeable-wallet/advanced-options@2x.png: advanced-options@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/backup-info.png: backup-info.png
+assets/images/guide/case-studies/upgradeable-wallet/backup-info@2x.png: backup-info@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/change-private-key scheme.png: change-private-key
+  scheme.png
+assets/images/guide/case-studies/upgradeable-wallet/change-private-key scheme@2x.png: change-private-key
+  scheme@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/export-wallet.png: export-wallet.png
+assets/images/guide/case-studies/upgradeable-wallet/export-wallet@2x.png: export-wallet@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/first.png: first.png
+assets/images/guide/case-studies/upgradeable-wallet/first@2x.png: first@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/home.png: home.png
+assets/images/guide/case-studies/upgradeable-wallet/home@2x.png: home@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/import-wallet.png: import-wallet.png
+assets/images/guide/case-studies/upgradeable-wallet/import-wallet@2x.png: import-wallet@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/input-recovery-phrase.png: input-recovery-phrase.png
+assets/images/guide/case-studies/upgradeable-wallet/input-recovery-phrase@2x.png: input-recovery-phrase@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/more-information.png: more-information.png
+assets/images/guide/case-studies/upgradeable-wallet/more-information@2x.png: more-information@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/recovery-phrase.png: recovery-phrase.png
+assets/images/guide/case-studies/upgradeable-wallet/recovery-phrase@2x.png: recovery-phrase@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/second.png: second.png
+assets/images/guide/case-studies/upgradeable-wallet/second@2x.png: second@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/settings.png: settings.png
+assets/images/guide/case-studies/upgradeable-wallet/settings@2x.png: settings@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/change-private-key-scheme.png: change-private-key-scheme.png
+assets/images/guide/case-studies/upgradeable-wallet/change-private-key-scheme@2x.png: change-private-key-scheme@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/upgradeable-wallet-preview.jpg: upgradeable-wallet-preview.jpg
+assets/images/guide/case-studies/cloud-backup/cloud-backup-preview.jpg: cloud-backup-preview.jpg
+assets/images/guide/case-studies/multisig-wallet/multisig-wallet-preview.jpg: multisig-wallet-preview.jpg
+assets/images/guide/case-studies/upgradeable-wallet/case-upgradeable-mobile.png: case-upgradeable-mobile.png
+assets/images/guide/case-studies/upgradeable-wallet/case-upgradeable-mobile@2x.png: case-upgradeable-mobile@2x.png
+assets/images/guide/case-studies/upgradeable-wallet/case-upgradeable.png: case-upgradeable.png
+assets/images/guide/case-studies/upgradeable-wallet/case-upgradeable@2x.png: case-upgradeable@2x.png
+assets/images/guide/case-studies/multisig-wallet/case-current-mobile.png: case-current-mobile.png
+assets/images/guide/case-studies/multisig-wallet/case-current-mobile@2x.png: case-current-mobile@2x.png
+assets/images/guide/case-studies/multisig-wallet/case-current.png: case-current.png
+assets/images/guide/case-studies/multisig-wallet/case-current@2x.png: case-current@2x.png

guide/case-studies/cloud-backup.md

@@ -4,7 +4,7 @@ title: Daily spending
 nav_order: 1
 parent: Case studies
 permalink: /guide/case-studies/cloud-backup/
-image: https://bitcoin.design/assets/images/guide/getting-started/getting-started-preview.jpg
+image: https://bitcoin.design/assets/images/guide/case-studies/cloud-backup/cloud-backup-preview.jpg
 image_base: /assets/images/guide/case-studies/cloud-backup/
 images:
     - file: first

guide/case-studies/multisig-wallet.md

@@ -4,7 +4,7 @@ title: Checking account
 nav_order: 2
 parent: Case studies
 permalink: /guide/case-studies/multisig-wallet/
-image: https://bitcoin.design/assets/images/guide/getting-started/getting-started-preview.jpg
+image: https://bitcoin.design/assets/images/guide/case-studies/multisig-wallet/multisig-wallet-preview.jpg
 image_base: /assets/images/guide/case-studies/multisig-wallet/
 images:
     - file: first
@@ -62,10 +62,10 @@ Should they lose either their main mobile device, or the purpose-built signing d
 
 {% include prototype.html
    link = "https://www.figma.com/proto/SRWlaxbDulsacpPQn2TTri/Case-study-prototypes?node-id=6%3A11&viewport=333%2C41%2C0.37497082352638245&scaling=scale-down"
-   image = "/assets/images/guide/case-studies/case-current.png"
-   retina = "/assets/images/guide/case-studies/case-current@2x.png"
-   mobile = "/assets/images/guide/case-studies/case-current-mobile.png"
-   mobileRetina = "/assets/images/guide/case-studies/case-current-mobile@2x.png"
+   image = "/assets/images/guide/case-studies/multisig-wallet/case-current.png"
+   retina = "/assets/images/guide/case-studies/multisig-wallet/case-current@2x.png"
+   mobile = "/assets/images/guide/case-studies/multisig-wallet/case-current-mobile.png"
+   mobileRetina = "/assets/images/guide/case-studies/multisig-wallet/case-current-mobile@2x.png"
    alt-text = "Image of case study prototype"
    width = 800
    height = 500

guide/case-studies/upgradeable-wallet.md

@@ -4,8 +4,24 @@ title: Upgradeable account
 nav_order: 3
 parent: Case studies
 permalink: /guide/case-studies/upgradeable-wallet/
-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/upgradeable-wallet/
+images:
+    - file: first
+      alt: App landing screen
+      caption: A cover screen should offer clear options to create and import wallets.
+    - file: second
+      alt: App screen with text information about key storage mechanisms
+      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: home
+      alt: Wallet home screen with a balance and send and receive buttons
+      caption: Due to the default use of automatic cloud backup, users can quickly reach the wallet home screen
+    - file: settings
+      alt: App settings screen
+      caption: Changing the key management scheme is accessed via settings.
+    - file: change-private-key-scheme
+      alt: Private key security options screen
+      caption: Schemes are clearly explained and changes should guide users through the steps involved.
 ---
 
 <!--
@@ -27,10 +43,10 @@ The solution in this case could be a wallet that enables the user to upgrade the
 
 {% include prototype.html
    link = "https://www.figma.com/proto/SRWlaxbDulsacpPQn2TTri/Case-study-prototypes?node-id=15%3A270&viewport=861%2C146%2C0.44897958636283875&scaling=scale-down"
-   image = "/assets/images/guide/case-studies/case-upgradeable.png"
-   retina = "/assets/images/guide/case-studies/case-upgradeable@2x.png"
-   mobile = "/assets/images/guide/case-studies/case-upgradeable-mobile.png"
-   mobileRetina = "/assets/images/guide/case-studies/case-upgradeable-mobile@2x.png"
+   image = "/assets/images/guide/case-studies/upgradeable-wallet/case-upgradeable.png"
+   retina = "/assets/images/guide/case-studies/upgradeable-wallet/case-upgradeable@2x.png"
+   mobile = "/assets/images/guide/case-studies/upgradeable-wallet/case-upgradeable-mobile.png"
+   mobileRetina = "/assets/images/guide/case-studies/upgradeable-wallet/case-upgradeable-mobile@2x.png"
    alt-text = "Image of case study prototype"
    width = 800
    height = 500
@@ -43,4 +59,28 @@ The solution in this case could be a wallet that enables the user to upgrade the
 #### Technical considerations
 - Need to handle many schemes; automatic cloud backups, recovery phrases, external signing devices, multi-key
 
+### Onboarding & upgrading
+
+The screens below show how this architecture allows users to get onboarded quickly with upgrade options easily accessible.
+
+<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>
+
 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=15%3A269).