087-wallet-onboarding.rst (3771B)
1 DD 87: Wallet Onboarding Experience 2 ################################### 3 4 Summary 5 ======= 6 This document proposes a design for the wallet onboarding experience. It defines what Android, iOS and WebExtension 7 should follow in order to have a coherent onboarding experience between platforms. 8 9 Motivation 10 ========== 11 We want user to have smooth onboarding experience independent of the platform they are using. 12 This includes first informational screem and choosing payment service (exchange) for first withdrawal of digital cash. 13 14 Requirements 15 ============ 16 List of trusted payment services (exchanges) should be preloaded in the wallet and user should be able to choose one of 17 them for first withdrawal of digital cash. 18 19 Proposed Solution 20 ================= 21 22 Empty Wallet 23 ------------ 24 This is the screen user will see when they open the wallet for the first time, before withdrawing any digital cash. 25 26 .. image:: wallet-designs/empty-wallet-mobile.png 27 28 .. image:: wallet-designs/empty-wallet-webex.png 29 30 On top of the screen is logo: 31 - Logo for: `light mode png file <wallet-designs/taler-logo-light.png>`_, 32 `light mode svg file <wallet-designs/taler-logo-light.svg>`_ 33 - Logo for: `dark mode png file <wallet-designs/taler-logo-dark.png>`_, 34 `dark mode svg file <wallet-designs/taler-logo-dark.svg>`_ 35 36 Withdrawal of real cash and demo cash is separated for two cards. 37 38 First card: 39 - Text: "**Welcome to Taler Wallet!** 40 To make your first payment withdraw digital cash." 41 - Button: "Withdraw digital cash" 42 43 * For deployment only with CHF use text "Withdraw CHF" instead of "Withdraw digital cash". 44 45 Second card: 46 - Text: "Get digital cash to experience how to pay with money of future." 47 - Button: "Get demo cash" 48 49 Penpot design file is available `here <https://penpot.taler.net/#/workspace?team-id=826af720-982c-8096-8006-0dbdd6a758c1&file-id=29e68e1b-4b36-81a2-8007-9ca27b475c85&page-id=29e68e1b-4b36-81a2-8007-9ca27b478f55&layout=layers&board-id=3300eab0-9c92-80cd-8007-9cb98fec00e1>`_. 50 51 Choosing payment service (exchange) 52 ----------------------------------- 53 54 When user clicks on **"Withdraw digital cash" button**, they should be able to choose one of the preloaded trusted 55 payment services (exchanges) for first withdrawal of digital cash. 56 57 Mobile 58 ~~~~~~ 59 60 .. image:: wallet-designs/empty-wallet-psp-mobile.png 61 62 This screen is shown as a full page. 63 64 List of payment services is presented as radio options (single choice). 65 Each option contains: 66 67 - Currency code ("CHF", "EUR" etc.) 68 - Exchange baseurl ("taler-ops.ch", "taler-ops.de" etc.) 69 - Text: "Supported bank accounts:" followed by country flags of supported bank accounts for withdrawal (e.g. Swiss flag for swiss bank accounts etc.) 70 71 Sorting by currency code is recommended. 72 73 On the bottom of the screen is primary button "Continue" 74 75 Action: proceed to withdraw screen using the selected payment service (exchange). 76 77 WebExtension 78 ~~~~~~~~~~~~ 79 80 .. image:: wallet-designs/empty-wallet-psp-webex.png 81 82 This step is shown as a modal dialog on top of wallet main view (background is dimmed). 83 84 List of payment services is presented as radio options (single choice). 85 Each option contains: 86 87 - Currency code ("CHF", "EUR" etc.) 88 - Exchange baseurl ("taler-ops.ch", "taler-ops.de" etc.) 89 - Text: "Supported bank accounts:" followed by country flags of supported bank accounts for withdrawal (e.g. Swiss flag for swiss bank accounts etc.) 90 91 Sorting by currency code is recommended. 92 93 On the bottom-right of the modal is primary button "Continue" 94 95 Action: proceed to withdraw screen using the selected payment service (exchange). 96 97 98 Alternatives 99 ============ 100 101 Drawbacks 102 ========= 103 104 Discussion / Q&A 105 ================ 106 107 (This should be filled in with results from discussions on mailing lists / personal communication.)