Inheritance wallet - Chapter 2 - Cosigner onboarding

[rabbitholiness]

This PR adds a new page to the inheritance wallet reference design. It covers how Alice imports the family savings wallet to her app and enables her signing device to sign transactions.

👀 Preview link 👀

It also updates the landing page to reflect the final structure of the reference design.

[netlify]

✅ Deploy Preview for bitcoin-design-site ready!

Name	Link
🔨 Latest commit	a37a631
🔍 Latest deploy log	https://app.netlify.com/sites/bitcoin-design-site/deploys/671665d7da21390007ef9885
😎 Deploy Preview	https://deploy-preview-1100--bitcoin-design-site.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[GBKS]

Looking good. It took me some re-reading to piece together the full logic of the interaction rounds:

• Bob created wallet template and shares it
• Co-signers create keys and give them to Bob
• Bob finalizes the wallet config and shares it with co-signers
• Co-signers import the wallet config and connect it to their keys

A diagram could help give that big picture overview before the user digs in, and the sub-pages could reference the diagram to show which step they illustrate. What do you think?

[mouxdesign]

Nice work Michael, I second Christophs suggestion here to add in a high level overview of the user flow. It seems from reading through the co-signer onboarding there are the following steps. Some are on the side of Bob and some on the side of Alice. Then there are some actions where they are interacting.

One symbol or color could be used for Bob, one for Alice and one for the interaction.

The process as I understood it:

Part 1: Bob: Initiating Cosigner Onboarding

1. Bob selects "onboard cosigner" task in his app
2. Bob's app generates a QR code or exportable wallet configuration

Part 2: Bob and Alice: Sharing Wallet Configuration

3. Bob shares the QR code/configuration with Alice

Part 3: Alice: Importing Wallet

4. Alice opens her app and selects "Recover an existing wallet"
5. Alice scans the QR code or imports the configuration
6. Alice reviews the wallet configuration
7. Alice confirms and adds the wallet

Part 4: Alice: Setting Up Signing Device

8. Alice connects her BitBox device to her app
9. Alice exports the wallet configuration to her BitBox
10. Manually checks off the "signing devices enabled"

Idea to expand on the conclusion at the end:

• Both Bob and Alice now have access to the shared wallet
• Both can view the wallet and its balance in their respective apps
• Both can initiate and sign transactions using their respective devices

Error messages

Something that might come up for a UX designer using this to design the wallet are error messages.
What error message would they see when:

1. The QR code scan fails
2. There are incompatible wallet configurations

[rabbitholiness]

Thanks for the feedback, @mouxdesign and @GBKS . I added a short process overview section and a diagram at the beginning of the wallet creation page.

I also added a dedicated section at the bottom of the cosigner onboarding page, as @mouxdesign suggested.

[mouxdesign]

LGTG, just one minor suggestion. Thanks so much for all your work Michael.

[danielnordh]

I made a bunch of individual code suggestions, hoping that's the least work for you.

A general style point that I did not make suggestions for as it is page wide:

• Bulleted lists should not end lines with punctuation

[rabbitholiness]

Thanks for the helpful feedback, @danielnordh . I just pushed a revision that should address all of the feedback.

[GBKS]

Looks super good. Almost there. I found one issue with numbering in text and illustration not matching.

Some of the inheritance wallet sub-pages are also missing preview images.

The purpose of editor's notes at the top is to describe writing decisions that may not be obvious, but that would be helpful for future changes. For example, if you made a specific decision about the tone you use, or the order of things. Just repeating the title/purpose of the page is not helpful and I'd just remove it if there's nothing unique to say.

Did not look through all the image stuff, since I am a bit tired of that at this very moment 🤪

[mouxdesign]

Some minor copy tweaks as suggested.

[GBKS]

Looks great. Had some minor tweaks around image paths. And please take a look at the overview header and preview images, there's some unnecessary white space (likely caused by the drop shadows in Figma).

[rabbitholiness]

@GBKS should be fixed now.

[GBKS]

ACK. Thank you for addressing all the feedback. Let's go.