Add gallery of screens to the multisig case study page

_compress_images_cache.yml

@@ -655,6 +655,48 @@ assets/images/guide/getting-started/usage-life-cycle/dropoff@2x.png: dropoff@2x.
 assets/images/guide/payments/send/bitcoin-payments@2x.jpg: bitcoin-payments@2x.jpg
 assets/images/guide/payments/send/bitcoin-payments-mobile@2x.jpg: bitcoin-payments-mobile@2x.jpg
 assets/images/guide/payments/send/bitcoin-payments-social.jpg: bitcoin-payments-social.jpg
+assets/images/guide/case-studies/multisig-wallet/backup-info.png: backup-info.png
+assets/images/guide/case-studies/multisig-wallet/backup-info@2x.png: backup-info@2x.png
+assets/images/guide/case-studies/multisig-wallet/change-private-key scheme.png: change-private-key
+  scheme.png
+assets/images/guide/case-studies/multisig-wallet/change-private-key scheme@2x.png: change-private-key
+  scheme@2x.png
+assets/images/guide/case-studies/multisig-wallet/continue-later.png: continue-later.png
+assets/images/guide/case-studies/multisig-wallet/continue-later@2x.png: continue-later@2x.png
+assets/images/guide/case-studies/multisig-wallet/create-multi-key-wallet.png: create-multi-key-wallet.png
+assets/images/guide/case-studies/multisig-wallet/create-multi-key-wallet@2x.png: create-multi-key-wallet@2x.png
+assets/images/guide/case-studies/multisig-wallet/create-recovery-key.png: create-recovery-key.png
+assets/images/guide/case-studies/multisig-wallet/create-recovery-key@2x.png: create-recovery-key@2x.png
+assets/images/guide/case-studies/multisig-wallet/create-signing-key.png: create-signing-key.png
+assets/images/guide/case-studies/multisig-wallet/create-signing-key@2x.png: create-signing-key@2x.png
+assets/images/guide/case-studies/multisig-wallet/creation-complete.png: creation-complete.png
+assets/images/guide/case-studies/multisig-wallet/creation-complete@2x.png: creation-complete@2x.png
+assets/images/guide/case-studies/multisig-wallet/export-wallet.png: export-wallet.png
+assets/images/guide/case-studies/multisig-wallet/export-wallet@2x.png: export-wallet@2x.png
+assets/images/guide/case-studies/multisig-wallet/external-device-setup.png: external-device-setup.png
+assets/images/guide/case-studies/multisig-wallet/external-device-setup@2x.png: external-device-setup@2x.png
+assets/images/guide/case-studies/multisig-wallet/first.png: first.png
+assets/images/guide/case-studies/multisig-wallet/first@2x.png: first@2x.png
+assets/images/guide/case-studies/multisig-wallet/home.png: home.png
+assets/images/guide/case-studies/multisig-wallet/home@2x.png: home@2x.png
+assets/images/guide/case-studies/multisig-wallet/import-multi-key.png: import-multi-key.png
+assets/images/guide/case-studies/multisig-wallet/import-multi-key@2x.png: import-multi-key@2x.png
+assets/images/guide/case-studies/multisig-wallet/import-wallet.png: import-wallet.png
+assets/images/guide/case-studies/multisig-wallet/import-wallet@2x.png: import-wallet@2x.png
+assets/images/guide/case-studies/multisig-wallet/input-recovery-phrase.png: input-recovery-phrase.png
+assets/images/guide/case-studies/multisig-wallet/input-recovery-phrase@2x.png: input-recovery-phrase@2x.png
+assets/images/guide/case-studies/multisig-wallet/more-information.png: more-information.png
+assets/images/guide/case-studies/multisig-wallet/more-information@2x.png: more-information@2x.png
+assets/images/guide/case-studies/multisig-wallet/recover-wallet.png: recover-wallet.png
+assets/images/guide/case-studies/multisig-wallet/recover-wallet@2x.png: recover-wallet@2x.png
+assets/images/guide/case-studies/multisig-wallet/recovery-key-setup.png: recovery-key-setup.png
+assets/images/guide/case-studies/multisig-wallet/recovery-key-setup@2x.png: recovery-key-setup@2x.png
+assets/images/guide/case-studies/multisig-wallet/replace-key.png: replace-key.png
+assets/images/guide/case-studies/multisig-wallet/replace-key@2x.png: replace-key@2x.png
+assets/images/guide/case-studies/multisig-wallet/second.png: second.png
+assets/images/guide/case-studies/multisig-wallet/second@2x.png: second@2x.png
+assets/images/guide/case-studies/multisig-wallet/settings.png: settings.png
+assets/images/guide/case-studies/multisig-wallet/settings@2x.png: settings@2x.png
 assets/images/guide/private-key-management/backups/backups-mobile.jpg: backups-mobile.jpg
 assets/images/guide/private-key-management/backups/backup-table.png: backup-table.png
 assets/images/guide/private-key-management/backups/backups.jpg: backups.jpg

guide/case-studies/multisig-wallet.md

@@ -4,8 +4,33 @@ title: Checking account
 nav_order: 2
 parent: Case studies
 permalink: /guide/case-studies/multisig-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/multisig-wallet/
+images:
+    - file: first
+      alt: A mobile Bitcoin wallet landing scree.
+      caption: Cover screen with a clear statement of the application purpose.
+    - file: second
+      alt: Mobile app screen with text and user options to create or import a wallet.
+      caption: Introduction to the security concept with clear next steps.
+    - file: create-multi-key-wallet
+      alt: Mobile app screen with 3 steps to create main, signing, and recovery keys.
+      caption: A 3-step process is used to guide the user through the key setup.
+    - file: create-signing-key
+      alt: 3-step screen with the second step expanded
+      caption: The second key is created on a user-controlled external device to avoid a single point of failure.
+    - file: external-device-setup
+      alt: Mobile app screen that tells the user to connect a hardware wallet.
+      caption: Guides the user through the process of connecting a hardware wallet.
+    - file: create-recovery-key
+      alt: 3-step screen with the third step expanded
+      caption: The third key is stored on the servers of the application provider.
+    - file: creation-complete
+      alt: Mobile app screen confirming successful wallet creation.
+      caption: Let users know that the setup process was successful.
+    - file: home
+      alt: Mobile app screen for the main wallet overview
+      caption: Once the wallet is set up, users are ready to go.
 ---
 
 <!--
@@ -56,4 +81,28 @@ Should they lose either their main mobile device, or the purpose-built signing d
 - Implement thorough backup code and instructions for users
 - Usage could be simplified by having hardware device designed/customized by the software maker (compare banks and their digital token signers common in Europe)
 
+### Design details
+
+The wireframe screens below show the main onboarding sequence that guides users through the creation of multisig 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>
+
 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=6%3A9).