taler-docs

Documentation for GNU Taler components, APIs and protocols
Log | Files | Refs | README | LICENSE

087-wallet-onboarding.rst (4307B)

      1 DD 87: Wallet Onboarding Experience
      2 ###################################
      3 
      4 :Design status: Accepted
      5 :Implementation status: Partial
      6 :DD shepherd: TBD
      7 :Historical contributors: Vlada Svirsh
      8 :First published: 2026-03-01
      9 :Last substantive change: 2026-05-18
     10 :Implementation evidence: ``taler-android`` (2026-03-10; 2026-03-19); ``taler-ios`` (2026-03-10)
     11 
     12 Summary
     13 =======
     14 This document proposes a design for the wallet onboarding experience. It defines what Android, iOS and WebExtension
     15 should follow in order to have a coherent onboarding experience between platforms.
     16 
     17 Motivation
     18 ==========
     19 We want user to have smooth onboarding experience independent of the platform they are using.
     20 This includes first informational screem and choosing payment service (exchange) for first withdrawal of digital cash.
     21 
     22 Requirements
     23 ============
     24 List of trusted payment services (exchanges) should be preloaded in the wallet and user should be able to choose one of
     25 them for first withdrawal of digital cash.
     26 
     27 Proposed Solution
     28 =================
     29 
     30 Empty Wallet
     31 ------------
     32 This is the screen user will see when they open the wallet for the first time, before withdrawing any digital cash.
     33 
     34 .. image:: wallet-designs/empty-wallet-mobile.png
     35 
     36 .. image:: wallet-designs/empty-wallet-webex.png
     37 
     38 On top of the screen is logo:
     39  - Logo for: `light mode png file <wallet-designs/taler-logo-light.png>`_,
     40    `light mode svg file <wallet-designs/taler-logo-light.svg>`_
     41  - Logo for: `dark mode png file <wallet-designs/taler-logo-dark.png>`_,
     42    `dark mode svg file <wallet-designs/taler-logo-dark.svg>`_
     43 
     44 Withdrawal of real cash and demo cash is separated for two cards.
     45 
     46 First card:
     47   - Text: "**Welcome to Taler Wallet!**
     48       To make your first payment withdraw digital cash."
     49   - Button: "Withdraw digital cash"
     50 
     51     * For deployment only with CHF use text "Withdraw CHF" instead of "Withdraw digital cash".
     52 
     53 Second card:
     54   - Text: "Get digital cash to experience how to pay with money of future."
     55   - Button: "Get demo cash"
     56 
     57 If the user withdrew demo cash, the wallet shows the card with text "Currently you have only demo cash. Withdraw real digital cash." and the button "Withdraw CHF" (or "Withdraw digital cash" if deployment is not limited to CHF) on top of the balances list.
     58 
     59 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>`_.
     60 
     61 Choosing payment service (exchange)
     62 -----------------------------------
     63 
     64 When user clicks on **"Withdraw digital cash" button**, they should be able to choose one of the preloaded trusted
     65 payment services (exchanges) for first withdrawal of digital cash.
     66 
     67 Mobile
     68 ~~~~~~
     69 
     70 .. image:: wallet-designs/empty-wallet-psp-mobile.png
     71 
     72 This screen is shown as a full page.
     73 
     74 List of payment services is presented as radio options (single choice).
     75 Each option contains:
     76 
     77 - Currency code ("CHF", "EUR" etc.)
     78 - Exchange baseurl ("taler-ops.ch", "taler-ops.de" etc.)
     79 - Text: "Supported bank accounts:" followed by country flags of supported bank accounts for withdrawal (e.g. Swiss flag for swiss bank accounts etc.)
     80 
     81 Sorting by currency code is recommended.
     82 
     83 On the bottom of the screen is primary button "Continue"
     84 
     85 Action: proceed to withdraw screen using the selected payment service (exchange).
     86 
     87 WebExtension
     88 ~~~~~~~~~~~~
     89 
     90 .. image:: wallet-designs/empty-wallet-psp-webex.png
     91 
     92 This step is shown as a modal dialog on top of wallet main view (background is dimmed).
     93 
     94 List of payment services is presented as radio options (single choice).
     95 Each option contains:
     96 
     97 - Currency code ("CHF", "EUR" etc.)
     98 - Exchange baseurl ("taler-ops.ch", "taler-ops.de" etc.)
     99 - Text: "Supported bank accounts:" followed by country flags of supported bank accounts for withdrawal (e.g. Swiss flag for swiss bank accounts etc.)
    100 
    101 Sorting by currency code is recommended.
    102 
    103 On the bottom-right of the modal is primary button "Continue"
    104 
    105 Action: proceed to withdraw screen using the selected payment service (exchange).
    106 
    107 
    108 Alternatives
    109 ============
    110 
    111 Drawbacks
    112 =========
    113 
    114 Discussion / Q&A
    115 ================
    116 
    117 (This should be filled in with results from discussions on mailing lists / personal communication.)