086-wallet-design.rst (2421B)
1 DD 86: Wallet UI Design Proposal 2 ################################ 3 4 :Design status: Superseded 5 :Implementation status: Not started 6 :DD shepherd: TBD 7 :Historical contributors: Vlada Svirsh 8 :First published: 2026-02-22 9 :Last substantive change: 2026-02-22 10 :Superseded by: DD 87, which incorporates the empty-wallet design into the complete onboarding flow 11 12 .. warning:: 13 14 This proposal was superseded before implementation. DD 87 owns the later 15 onboarding design; the mockups and navigation below are retained only as 16 design history. 17 18 Summary 19 ======= 20 21 This document proposes designs wallet UI. It defines what Android, iOS and 22 WebExtension should follow in order to have a coherent UI between platforms. 23 24 Motivation 25 ========== 26 27 We want user to be able to help each others independent of the implementation 28 they are using. 29 We want user to be able to capitalize the effort of learning how to use one 30 wallet and be able to use a different one without the need to learn 31 anything new. 32 Currently development of different platform specific implementation are independent 33 and every developer needs to choose the layout, texts and buttons and navigation. 34 35 Requirements 36 ============ 37 38 Proposed Solution 39 ================= 40 41 Empty Wallet 42 ------------ 43 .. image:: wallet-designs/empty-wallet-mobile.png 44 45 .. image:: wallet-designs/empty-wallet-webex.png 46 47 On top of the screen is logo: 48 - Logo for `light mode <wallet-designs/taler-logo-light.png>`_ 49 - Logo for `dark mode <wallet-designs/taler-logo-dark.png>`_ 50 51 Withdrawal of real cash and demo cash is separated for two cards. 52 53 First card: 54 - Text: "**Welcome to Taler Wallet!** 55 To make your first payment withdraw digital cash." 56 - Button: "Withdraw digital cash" 57 58 * For deployment only with CHF use text "Withdraw CHF" instead. 59 60 Second card: 61 - Text: "Get digital cash to experience how to pay with money of future." 62 - Button: "Get demo cash" 63 64 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>`_. 65 66 67 Test Plan 68 ========= 69 70 Definition of Done 71 ================== 72 73 Alternatives 74 ============ 75 76 Drawbacks 77 ========= 78 79 Discussion / Q&A 80 ================ 81 82 (This should be filled in with results from discussions on mailing lists / personal communication.)