commit 2b0f130360715af949ceedb1cc7bd64a891df703
parent fd28ac9a657fb8312ce87f99e5588fb3c52b27a5
Author: Vlada Svirsh <svirv1@bfh.ch>
Date: Sun, 1 Mar 2026 17:17:02 +0100
DD 87: wallet onboarding
Diffstat:
5 files changed, 111 insertions(+), 0 deletions(-)
diff --git a/design-documents/087-wallet-onboarding.rst b/design-documents/087-wallet-onboarding.rst
@@ -0,0 +1,107 @@
+DD 87: Wallet Onboarding Experience
+###################################
+
+Summary
+=======
+This document proposes a design for the wallet onboarding experience. It defines what Android, iOS and WebExtension
+should follow in order to have a coherent onboarding experience between platforms.
+
+Motivation
+==========
+We want user to have smooth onboarding experience independent of the platform they are using.
+This includes first informational screem and choosing payment service (exchange) for first withdrawal of digital cash.
+
+Requirements
+============
+List of trusted payment services (exchanges) should be preloaded in the wallet and user should be able to choose one of
+them for first withdrawal of digital cash.
+
+Proposed Solution
+=================
+
+Empty Wallet
+------------
+This is the screen user will see when they open the wallet for the first time, before withdrawing any digital cash.
+
+.. image:: wallet-designs/empty-wallet-mobile.png
+
+.. image:: wallet-designs/empty-wallet-webex.png
+
+On top of the screen is logo:
+ - Logo for light mode `link to png file <wallet-designs/taler-logo-light.png>`_, `link to svg file <wallet-designs/taler-logo-light.svg>`_
+ - Logo for dark mode `link to png file <wallet-designs/taler-logo-dark.png>`_, `link to svg file <wallet-designs/taler-logo-dark.svg>`_
+
+Withdrawal of real cash and demo cash is separated for two cards.
+
+First card:
+ - Text: "**Welcome to Taler Wallet!**
+ To make your first payment withdraw digital cash."
+ - Button: "Withdraw digital cash"
+
+ * For deployment only with CHF use text "Withdraw CHF" instead of "Withdraw digital cash".
+
+Second card:
+ - Text: "Get digital cash to experience how to pay with money of future."
+ - Button: "Get demo cash"
+
+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>`_.
+
+Choosing payment service (exchange)
+-----------------------------------
+
+When user clicks on **"Withdraw digital cash" button**, they should be able to choose one of the preloaded trusted
+payment services (exchanges) for first withdrawal of digital cash.
+
+.. image:: wallet-designs/empty-wallet-psp-mobile.png
+
+.. image:: wallet-designs/empty-wallet-psp-webex.png
+
+Mobile (Android / iOS)
+~~~~~~~~~~~~~~~~~~~~~~
+
+This screen is shown as a full page.
+
+List of payment services is presented as radio options (single choice).
+Each option contains:
+- Currency code ("CHF", "EUR" etc.)
+- Exchange baseurl ("taler-ops.ch", "taler-ops.de" etc.)
+- Text: "Supported bank accounts:" followed by country flags of supported bank accounts for withdrawal (e.g. Swiss flag for swiss bank accounts etc.)
+
+Sorting by currency code is recommended.
+
+On the bottom of the screen is primary button:
+
+Button: "Continue"
+
+Action: proceed to withdraw screen using the selected payment service (exchange).
+
+WebExtension
+~~~~~~~~~~~~
+
+This step is shown as a modal dialog on top of wallet main view (background is dimmed).
+
+List of payment services is presented as radio options (single choice).
+Each option contains:
+- Currency code ("CHF", "EUR" etc.)
+- Exchange baseurl ("taler-ops.ch", "taler-ops.de" etc.)
+- Text: "Supported bank accounts:" followed by country flags of supported bank accounts for withdrawal (e.g. Swiss flag for swiss bank accounts etc.)
+
+Sorting by currency code is recommended.
+
+On the bottom-right of the modal is primary button:
+
+Button: "Continue"
+
+Action: proceed to withdraw screen using the selected payment service (exchange).
+
+
+Alternatives
+============
+
+Drawbacks
+=========
+
+Discussion / Q&A
+================
+
+(This should be filled in with results from discussions on mailing lists / personal communication.)
diff --git a/design-documents/wallet-designs/empty-wallet-psp-mobile.png b/design-documents/wallet-designs/empty-wallet-psp-mobile.png
Binary files differ.
diff --git a/design-documents/wallet-designs/empty-wallet-psp-webex.png b/design-documents/wallet-designs/empty-wallet-psp-webex.png
Binary files differ.
diff --git a/design-documents/wallet-designs/taler-logo-dark.svg b/design-documents/wallet-designs/taler-logo-dark.svg
@@ -0,0 +1 @@
+<svg width="1000" xmlns="http://www.w3.org/2000/svg" height="447.761" id="screenshot-50edfb72-58c3-806d-8007-9cef21fba0cc" viewBox="0 0 1000 447.761" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-50edfb72-58c3-806d-8007-9cef21fba0cc" width="670" height="300" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-50edfb72-58c3-806d-8007-9cef21fba0cd" style="display: none;"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cef21fba0cd"><rect width="1000" height="447.7611940298509" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(255, 255, 255); fill-opacity: 1;" ry="0" fill="none" rx="0" y="0"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cef21fba0ce" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-50edfb72-58c3-806d-8007-9cef21fba0d4"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cef21fba0d4"><path d="M431.155,5.578C508.716,5.578,576.077,52.350,610.066,121.010L581.123,121.010C549.685,67.778,494.274,32.428,431.155,32.428C333.192,32.428,253.777,117.563,253.777,222.580C253.777,273.982,272.810,320.614,303.726,354.834C297.047,360.411,289.937,365.420,282.455,369.793C249.112,331.112,228.731,279.403,228.731,222.580C228.731,102.734,319.359,5.578,431.155,5.578ZZM609.523,325.253C575.362,393.314,508.301,439.583,431.155,439.583C425.918,439.583,420.727,439.369,415.589,438.951C430.774,431.184,445.010,421.635,458.069,410.556C509.417,402.176,553.521,370.190,580.466,325.253Z" style="fill-rule: evenodd; stroke: none; stroke-width: 0.327943; fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cef21fba0d5"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cef21fba0d5"><path d="M319.465,5.578C324.701,5.578,329.892,5.792,335.030,6.210C319.845,13.977,305.609,23.525,292.551,34.605C207.361,48.507,142.087,127.371,142.087,222.580C142.087,293.548,178.359,355.426,232.106,388.097C224.178,389.427,216.052,390.122,207.774,390.122C201.607,390.122,195.528,389.726,189.548,388.981C145.229,349.174,117.040,289.411,117.040,222.580C117.040,102.734,207.669,5.578,319.465,5.578ZZM346.379,410.556C397.727,402.176,441.832,370.188,468.776,325.251L497.834,325.251C463.673,393.312,396.612,439.583,319.465,439.583C314.227,439.583,309.037,439.369,303.899,438.951C319.083,431.183,333.321,421.636,346.379,410.556ZZM469.432,121.010C453.813,94.569,432.280,72.539,406.823,57.063C414.751,55.734,422.877,55.039,431.155,55.039C437.321,55.039,443.401,55.434,449.381,56.180C469.362,74.126,486.064,96.131,498.382,121.010Z" style="fill-rule: evenodd; stroke: none; stroke-width: 0.327943; fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cef21fba0d6"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cef21fba0d6"><path d="M207.774,5.578C213.069,5.578,218.315,5.799,223.508,6.226C208.352,13.982,194.139,23.512,181.103,34.568C95.794,48.361,30.397,127.281,30.397,222.580C30.397,327.598,109.812,412.732,207.774,412.732C270.459,412.732,325.547,377.871,357.096,325.251L386.144,325.251C351.983,393.312,284.922,439.583,207.774,439.583C95.979,439.583,5.350,342.427,5.350,222.580C5.350,102.734,95.979,5.578,207.774,5.578ZZM357.738,121.010C351.211,109.962,343.654,99.681,335.206,90.331C341.885,84.754,348.994,79.742,356.476,75.369C368.282,89.066,378.460,104.397,386.687,121.010Z" style="fill-rule: evenodd; stroke: none; stroke-width: 0.327943; fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g></g><g id="shape-50edfb72-58c3-806d-8007-9cef21fba0cf"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cef21fba0cf"><path d="M378.783,171.189L424.360,171.189L424.360,146.099L307.749,146.099L307.749,171.189L353.327,171.189L353.327,300.160L378.783,300.160Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cef21fba0d0"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cef21fba0d0"><path d="M460.933,262.967L528.888,262.967L543.466,300.161L570.156,300.161L506.921,145.000L483.518,145.000L420.284,300.161L446.152,300.161ZM519.650,238.975L470.174,238.975L494.809,177.351Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cef21fba0d1"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cef21fba0d1"><path d="M615.952,146.100L593.164,146.100L593.164,300.161L695.390,300.161L695.390,275.732C668.911,275.732,642.431,275.732,615.952,275.732Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cef21fba0d2"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cef21fba0d2"><path d="M828.220,146.100L721.873,146.100L721.873,300.161L829.247,300.161L829.247,275.732L746.920,275.732L746.920,234.574L818.981,234.574L818.981,210.146L746.920,210.146L746.920,170.530L828.220,170.530Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cef21fba0d3"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cef21fba0d3"><path d="M951.196,196.391C951.196,204.349,948.527,210.696,943.155,215.390C937.817,220.123,930.597,222.469,921.529,222.469L884.472,222.469L884.472,170.530L921.324,170.530C930.802,170.530,938.158,172.694,943.361,177.058C948.596,181.387,951.196,187.843,951.196,196.391ZZM981.375,300.161L942.573,241.837C947.637,240.370,952.257,238.281,956.432,235.565C960.605,232.851,964.199,229.549,967.209,225.662C970.221,221.773,972.582,217.298,974.292,212.237C976.003,207.175,976.858,201.415,976.858,194.959C976.858,187.476,975.627,180.691,973.163,174.601C970.699,168.512,967.175,163.376,962.591,159.194C958.005,155.013,952.394,151.785,945.756,149.510C939.117,147.235,931.692,146.100,923.480,146.100L859.425,146.100L859.425,300.161L884.472,300.161L884.472,246.460L916.191,246.460L951.606,300.161Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;"/></g></g></g></svg>
+\ No newline at end of file
diff --git a/design-documents/wallet-designs/taler-logo-light.svg b/design-documents/wallet-designs/taler-logo-light.svg
@@ -0,0 +1 @@
+<svg width="1000" xmlns="http://www.w3.org/2000/svg" height="447.761" id="screenshot-50edfb72-58c3-806d-8007-9cee9fb77abe" viewBox="0 0 1000 447.761" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-50edfb72-58c3-806d-8007-9cee9fb77abe" width="670" height="300" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-50edfb72-58c3-806d-8007-9cee9fb77abf" style="display: none;"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cee9fb77abf"><rect width="1000" height="447.7611940298507" x="0" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: none;" ry="0" fill="none" rx="0" y="0"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cee9fb77ac0" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-50edfb72-58c3-806d-8007-9cee9fb77ac6"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cee9fb77ac6"><path d="M431.155,5.578C508.716,5.578,576.077,52.350,610.066,121.010L581.123,121.010C549.685,67.778,494.274,32.428,431.155,32.428C333.192,32.428,253.777,117.563,253.777,222.580C253.777,273.982,272.810,320.614,303.726,354.834C297.047,360.411,289.937,365.420,282.455,369.793C249.112,331.112,228.731,279.403,228.731,222.580C228.731,102.734,319.359,5.578,431.155,5.578ZZM609.523,325.253C575.362,393.314,508.301,439.583,431.155,439.583C425.918,439.583,420.727,439.369,415.589,438.951C430.774,431.184,445.010,421.635,458.069,410.556C509.417,402.176,553.521,370.190,580.466,325.253Z" style="fill-rule: evenodd; stroke: none; stroke-width: 0.327943; fill: rgb(0, 66, 179); fill-opacity: 1;"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cee9fb77ac7"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cee9fb77ac7"><path d="M319.465,5.578C324.701,5.578,329.892,5.792,335.030,6.210C319.845,13.977,305.609,23.525,292.551,34.605C207.361,48.507,142.087,127.371,142.087,222.580C142.087,293.548,178.359,355.426,232.106,388.097C224.178,389.427,216.052,390.122,207.774,390.122C201.607,390.122,195.528,389.726,189.548,388.981C145.229,349.174,117.040,289.411,117.040,222.580C117.040,102.734,207.669,5.578,319.465,5.578ZZM346.379,410.556C397.727,402.176,441.832,370.188,468.776,325.251L497.834,325.251C463.673,393.312,396.612,439.583,319.465,439.583C314.227,439.583,309.037,439.369,303.899,438.951C319.083,431.183,333.321,421.636,346.379,410.556ZZM469.432,121.010C453.813,94.569,432.280,72.539,406.823,57.063C414.751,55.734,422.877,55.039,431.155,55.039C437.321,55.039,443.401,55.434,449.381,56.180C469.362,74.126,486.064,96.131,498.382,121.010Z" style="fill-rule: evenodd; stroke: none; stroke-width: 0.327943; fill: rgb(0, 66, 179); fill-opacity: 1;"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cee9fb77ac8"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cee9fb77ac8"><path d="M207.774,5.578C213.069,5.578,218.315,5.799,223.508,6.226C208.352,13.982,194.139,23.512,181.103,34.568C95.794,48.361,30.397,127.281,30.397,222.580C30.397,327.598,109.812,412.732,207.774,412.732C270.459,412.732,325.547,377.871,357.096,325.251L386.144,325.251C351.983,393.312,284.922,439.583,207.774,439.583C95.979,439.583,5.350,342.427,5.350,222.580C5.350,102.734,95.979,5.578,207.774,5.578ZZM357.738,121.010C351.211,109.962,343.654,99.681,335.206,90.331C341.885,84.754,348.994,79.742,356.476,75.369C368.282,89.066,378.460,104.397,386.687,121.010Z" style="fill-rule: evenodd; stroke: none; stroke-width: 0.327943; fill: rgb(0, 66, 179); fill-opacity: 1;"/></g></g></g><g id="shape-50edfb72-58c3-806d-8007-9cee9fb77ac1"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cee9fb77ac1"><path d="M378.783,171.189L424.360,171.189L424.360,146.099L307.749,146.099L307.749,171.189L353.327,171.189L353.327,300.160L378.783,300.160Z"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cee9fb77ac2"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cee9fb77ac2"><path d="M460.933,262.967L528.888,262.967L543.466,300.161L570.156,300.161L506.921,145.000L483.518,145.000L420.284,300.161L446.152,300.161ZM519.650,238.975L470.174,238.975L494.809,177.351Z"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cee9fb77ac3"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cee9fb77ac3"><path d="M615.952,146.100L593.164,146.100L593.164,300.161L695.390,300.161L695.390,275.732C668.911,275.732,642.431,275.732,615.952,275.732Z"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cee9fb77ac4"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cee9fb77ac4"><path d="M828.220,146.100L721.873,146.100L721.873,300.161L829.247,300.161L829.247,275.732L746.920,275.732L746.920,234.574L818.981,234.574L818.981,210.146L746.920,210.146L746.920,170.530L828.220,170.530Z"/></g></g><g id="shape-50edfb72-58c3-806d-8007-9cee9fb77ac5"><g class="fills" id="fills-50edfb72-58c3-806d-8007-9cee9fb77ac5"><path d="M951.196,196.391C951.196,204.349,948.527,210.696,943.155,215.390C937.817,220.123,930.597,222.469,921.529,222.469L884.472,222.469L884.472,170.530L921.324,170.530C930.802,170.530,938.158,172.694,943.361,177.058C948.596,181.387,951.196,187.843,951.196,196.391ZZM981.375,300.161L942.573,241.837C947.637,240.370,952.257,238.281,956.432,235.565C960.605,232.851,964.199,229.549,967.209,225.662C970.221,221.773,972.582,217.298,974.292,212.237C976.003,207.175,976.858,201.415,976.858,194.959C976.858,187.476,975.627,180.691,973.163,174.601C970.699,168.512,967.175,163.376,962.591,159.194C958.005,155.013,952.394,151.785,945.756,149.510C939.117,147.235,931.692,146.100,923.480,146.100L859.425,146.100L859.425,300.161L884.472,300.161L884.472,246.460L916.191,246.460L951.606,300.161Z"/></g></g></g></svg>
+\ No newline at end of file
