087-wallet-onboarding.rst (3774B)
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 `link to png file <wallet-designs/taler-logo-light.png>`_, `link to svg file <wallet-designs/taler-logo-light.svg>`_ 32 - Logo for dark mode `link to png file <wallet-designs/taler-logo-dark.png>`_, `link to svg file <wallet-designs/taler-logo-dark.svg>`_ 33 34 Withdrawal of real cash and demo cash is separated for two cards. 35 36 First card: 37 - Text: "**Welcome to Taler Wallet!** 38 To make your first payment withdraw digital cash." 39 - Button: "Withdraw digital cash" 40 41 * For deployment only with CHF use text "Withdraw CHF" instead of "Withdraw digital cash". 42 43 Second card: 44 - Text: "Get digital cash to experience how to pay with money of future." 45 - Button: "Get demo cash" 46 47 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>`_. 48 49 Choosing payment service (exchange) 50 ----------------------------------- 51 52 When user clicks on **"Withdraw digital cash" button**, they should be able to choose one of the preloaded trusted 53 payment services (exchanges) for first withdrawal of digital cash. 54 55 Mobile 56 ~~~~~~ 57 58 .. image:: wallet-designs/empty-wallet-psp-mobile.png 59 60 This screen is shown as a full page. 61 62 List of payment services is presented as radio options (single choice). 63 Each option contains: 64 65 - Currency code ("CHF", "EUR" etc.) 66 - Exchange baseurl ("taler-ops.ch", "taler-ops.de" etc.) 67 - Text: "Supported bank accounts:" followed by country flags of supported bank accounts for withdrawal (e.g. Swiss flag for swiss bank accounts etc.) 68 69 Sorting by currency code is recommended. 70 71 On the bottom of the screen is primary button "Continue" 72 73 Action: proceed to withdraw screen using the selected payment service (exchange). 74 75 WebExtension 76 ~~~~~~~~~~~~ 77 78 .. image:: wallet-designs/empty-wallet-psp-webex.png 79 80 This step is shown as a modal dialog on top of wallet main view (background is dimmed). 81 82 List of payment services is presented as radio options (single choice). 83 Each option contains: 84 85 - Currency code ("CHF", "EUR" etc.) 86 - Exchange baseurl ("taler-ops.ch", "taler-ops.de" etc.) 87 - Text: "Supported bank accounts:" followed by country flags of supported bank accounts for withdrawal (e.g. Swiss flag for swiss bank accounts etc.) 88 89 Sorting by currency code is recommended. 90 91 On the bottom-right of the modal is primary button "Continue" 92 93 Action: proceed to withdraw screen using the selected payment service (exchange). 94 95 96 Alternatives 97 ============ 98 99 Drawbacks 100 ========= 101 102 Discussion / Q&A 103 ================ 104 105 (This should be filled in with results from discussions on mailing lists / personal communication.)