UX/UI Enhancements for the 'Receive eCash via LN Invoice' Process

[swedishfrenchpress]

I've been exploring ways to enhance the user experience for the "receive cash via lightning invoice" process. Inspired by various Bitcoin wallets, I found CashApp's Bitcoin receipt interface to be the most user-friendly and relatable for a non-technical audience. Many design elements in my proposal are influenced by their UX, piggy backing off their proven success.

Upon pressing the "receive" button, users will notice simplified, jargon-free options. Instead of "Create Lightning Invoice," users will see "Top up". The "Paste & redeem Ecash" option is now "Get ECash", eliminating redundancy since 'Paste & redeem' is already mentioned in the description.

Selecting "Top up" presents the user with an LN invoice. The design here aims to expedite access by minimizing the number of taps required. We've removed the mint selector (if the user has multiple mints) and invoice amount entry, saving two taps.

By default, the system uses the user's preferred mint (set in settings), but users can switch between mints by clicking the mint name. On selection, a list of all user mints appears, with the chosen mint highlighted by a checkmark and the default mint indicated by a bank icon.

For custom amounts, users can click the "add amount" button. This leads to a simple input screen where amounts can be denominated in sats or fiat. Ideally, the text size would adapt to the number of characters input (fluid text?). After specifying the amount, an updated QR code appears, with the invoice amount displayed in green below. Users also have the option to modify the invoice.

I really believe this process of "getting ecash" is pivotal from a UX pov. We have to ease the friction at this stage, otherwise people will drop off. I believe it's worth investing in some user testing to really nail this. A straightforward A/B poll on Twitter for feedback combined with a hands-on usability test comparing our current system with this revamped one, we could yield some valuable insights.

WDYT? As always the door is open to pick apart the design, tweak it, improvement, remix it, etc...:)

[KKA11010]

I sounds good to me but I dont understand what amount is chosen when the invoice is created the very first time?

I will take over some of your UI parts right away :)

I though (while implementing the current behavior) that guiding the user step by step would make the whole thing self-explaining and abstracting steps away can lead to misunderstandings i would say.

[swedishfrenchpress]

I sounds good to me but I dont understand what amount is chosen when the invoice is created the very first time?

I will take over some of your UI parts right away :)

I though (while implementing the current behavior) that guiding the user step by step would make the whole thing self-explaining and abstracting steps away can lead to misunderstandings i would say.

Then the invoice is created the first time there is no amount. It's a empty invoice. Once it is scanned or invoice is pasted into another LN wallet the user should then enter the amount. Similar to how Wallet of Satoshi let's the user generate a receive LN invoice with no amount.

The step by step approach is good for actions that aren't used very frequently, however when it comes to top offs and pay outs, the user will most likely be repeating these activities often. It could be very likely that they will become familiar with the process and don't need a step by step hand holding flow every time they want to top up. Even worse would be if they find it annoying to have to tap multiple times and go through some hoops if they just want to top off for the 100th time.