Zcash SPV wallet UX/UI

[AndrewGuarda]

Zcash - Guarda discussion regarding the UX/UI

[AndrewGuarda]

Hello all,

Just a brief introduction, @lindalee is UX Zcash researcher who is kindly ready to review our UX activity. @eugeneives is Guarda Head of UX/UI.

Let's start our collaboration with UX/UI prototyping for Zcash Wallet here. I put the separate issue in order do not spam the origin Zcash issue by specific discussion.

[AndrewGuarda]

Dear @lindalee could you just give us a brief intro about your experience with Ethereum wallet, as far as we are going to inherit the UX particularly from it. It will be great to get your feedback in the beginning. Right after that we'll move to the zcash screens

[lindanlee]

@guardaco I tested the wallet out. I really liked the wallet! I'm excited to be working with you guys on a Zcash version of it. The things that impressed me the most are: the brand presence and visual styling, use of visual elements, UX with for feedback (errors, notifications, etc.).

Three killer things I loved about your app that I didn't see anywhere else:

• the fee included/excluded option in the send screen. Most wallets choose one or the other, but don't tell the user. If they do, the user can't really change it. This option seems great, and I think all other wallets should have this.
• the help chat hotline for people who need help. I didn't use it so I can't speak for the response time or quality of answers, but the text interface makes it really approachable, and I like that people don't need to go outside of the application to get help.
• the "do you really want to exit?" prompt when I click on the back screen. It's prevented me from exiting the application multiple times.

I do have some feedback think that I think will improve your application even more. I don't think any of these are Zcash specific, but I think that's for when we work together in the future! :)

Navigation feedback:

• expose the menu: have a persistent menu bar across the bottom instead of hiding the menu in the hamburger icon in the top lefthand corner. This reduces user actions to navigate (one click instead of two) and gives the user a sense of where they currently are. (This is explained in the video with an example of an app that does this).

Security feedback:

• PIN: On the second start time around, ask the user to set up their PIN. I love how immediate the user gets to the wallet on the first launch, so I'd recommend keeping that as-is. But as people use it more, they might want to set up a PIN.
• Backup: When the user gets some currency, prompt them to back up their wallet's private key. Doing this before they have any money to lose is annoying and out of context, but doing this right after their first funds clear would be best practices. Currently, the user has to 1) know to back it up 2) not forget to back it up, which is unlikely. People will be upset if they lose their money, so this is critical.

Send screen feedback:

• error prevention: filter inputs to the address field so that you can't put symbols or emojis into the address field.
• address feedback: perform a checksum on the address, and when the addresses passes the checksum, indicate that it is a syntactically valid address (check mark, or something). If it fails, indicate that it is invalid.
• FIAT conversion: for payment amounts, show the FIAT conversion of the current currency. It currently only shows how much ETH I have, but showing how much USD that is would be helpful.
• "FIAT sending": allow users to send with respect to FIAT currency (i.e. "Send $20" which translates into "Send x ETH." This can be useful for estimating what the value their sending is before they send it, but also to see how much they are sending if they need to send a specific FIAT amount.

I recorded my experience in a talk-aloud video. You can see the video here if you're curious. The video shows me using the application, shows examples of other wallets and how they implemented UI differently, and my error at the end (I tried to send a transaction, and it failed even though I had adequate funds. Do you know why this happened? ).

[lindanlee]

I know that wasn't very brief, but I wanted to be thorough! Hope it was helpful, and let me know about next steps.

[AndrewGuarda]

@lindanlee thanks a lot for your review and time you've spent. We appreciate the feedback and going to work with it hard. Especially I'm grateful for the video review. I saw some issue that you had with transaction sending, inputs and etc. It useful as for our UX team, as for dev team. We'll definitely fix them all asap.

At the same time, I'm glad that we are thinking almost in the same direction with you. Just on Friday, we've released the application next version with enhancements to Backup features. We've added the alert to remember the user backup the private key. Also, we add the MAX button while sending funds, it should be useful, I guess. So you can check for the update in google play market.

Also, on Friday we've updated our web, now it looks more stylish and enterprise. Please, just have a look at it https://guarda.co/ we are planning to have all our wallets on the web as well.

We are going to go through all your feedback accurately with our UX team and present to you Zcash screens this week later.

[lindanlee]

@guardaco, thanks for being open to feedback, and taking the time to look at the somewhat unsolicited but long amount of it. :)

Glad to hear that you're going to work on backup features, and that you're solving some of the problems that I ran into. The webpage looks very nice! I don't know what you wanted me to look at, If you want any feedback on a specific part of the website, let me know.

I'm looking forward to seeing the Zcash wallet screens soon. Mention me here and I'd be happy to collaborate. Talk soon!

[AndrewGuarda]

Dear @lindanlee Once again, I appreciate your review of Guarda Ethereum Wallet application. Moreover, I found your review for jaxx & cryptonator wallets, we'll use your recommendations from that review as well. Please find the link to the very first mockups for Zcash wallet: https://www.figma.com/file/q6OZOmsg8ot8JTXyIMUhHj/Guarda-Zcash-Wallet-(Android%2FiOS) Can you kindly share your figma login, so I can add you to the project with access to edit and comment?

We are going to use t- and z-adresses in one wallet. It will show the total balance and balance for each address separately. The new wallet will create only t-address, the user can create additional z-address anytime. The history will be common for the t- and z-addresses.

Looking forward to your reply soon.

[lindanlee]

@guardaco, my figma account email is linda@z.cash. I'll leave comments there once I have access to the project.

Thanks for looking into those UX reviews on Jaxx and Cryptonator! Incorporating those tips would be great.

I'm really excited to collaborate on the UX regarding t and z addresses. This is something that I have personally been thinking about a lot, and how that should look like. The zcashd client certainly keeps the pool of taddr and zaddr funds separate, so I don't think that's a bad all. I'll try to go look at zcash4win, which is the only GUI wallet that I know of that has zaddr support, to generate some more ideas.

Talk to you soon! Let me know what you would like me to do, and by when.

[AndrewGuarda]

@lindanlee please check the access to figma project

[lindanlee]

@guardaco I have access. I'll leave comments there by the end of the week (I'll try to do it today! But in case I cannot, that's the upper bound).

[lindanlee]

@guardaco, I have left some comments on Figma. Those comments are mainly small fixes (i.e. changing "coins purchase" to "buy" or "purchase" may be nice) and some tips and pointers.

I'd like to talk about the main overarching decisions Zcash has made, and hope that these can influence your design further + help us work towards UI/UX strategies that achieve this goal.

1. Differentiate balances: Show users an available balance and total balance for z and t addrs. Sometimes funds are unspendable until mined or disappear, which can cause worry. We think that the concept of "spendable money" vs "money you own and will own" is something people can grasp, since banks do this for large checks and wires.
2. Zaddr preference: zaddrs should be the default (unless they’re unusable) and preferred over taddrs. Ideally, we would like to get rid of taddrs in the future and only use them for interoperability/shielding and deshielding. Assuming that using zaddrs are feasible, we would like the UX to default to zaddrs in some way and urge users to generate a zaddrs on setup.
3. Zaddr use: zaddrs should be used in a persistent manner, for each distinct purpose. We imagine each zaddrs to be used like a bank account. This is because there's no reason to generate new zaddrs for transactions with the privacy guarantees we offer. And because we want to encourage this, the UX should reflect this in some way.
4. Transaction types: We're not currently sure how to abstract the notion of shielded/unshielded/shielding/deshielding transactions to the user, yet. We thought about using icons, or even writing the type of transaction in text, but it's complicated. There can be multiple "to" addresses in any combination of z/t addrs, which can make it a hybrid or none of the above four options. We advise not labeling or using icons to abstract this idea, and letting the details of the transaction (i.e. to address is a taddr) and the UI framing (i.e. the transaction is listed under the relevant zaddr list of transactions) speak for themselves.

Those are things that we want to achieve. Some UI/technical changes that may result from that are:

• prompting users to set up a wallet/account on setup and defaulting to zaddrs
• prompting users to fill in their accounts with text fields, suggesting "personal savings" or something like in [1]
• let users create multiple zaddr (and taddr) wallet/account, with labels, as seen in [1].
• showing an available balance and total balance for each account.

[1] [2]

[lindanlee]

The advice above are more or less consistent with the advice that we give to our users this section of the privacy and security recommendations. I’ll briefly go over what we recommend our users do and translate the implications for you.

Recommendation 1: Use transparent addresses for ease of use on mobile devices and bitcoin compatibility (do not follow)

We’re excited that you have made plans to integrate zaddrs into mobile and encourage zaddr integration. In fact, this is one of the reasons why we’re so excited to work with you. And once Sapling goes live, zaddresses will become feasible on mobile, so we want to make sure to get the design right while working with you.

Recommendation 2: Use shielded addresses with the wallet's standard fee selection for better privacy.

We recommend doing this because shielded transactions without the standard fee selection are distinct from shielded transactions with a standard fee selection. We recommend notifying the users that changing the fee selection comes at a small privacy cost, in some way that isn’t annoying but reminds people of this fact.

Recommendation 3: Use a unique shielded address to receive money for each distinct purpose.

Examples of some uses can include: a long-term “savings” account, a vacation savings account, a joint savings account with a spouse, a personal “spending” account, a business spending account... you get the picture. I think that we should encourage using zaddresses like this by letting people create multiple zaddresses and keeping the transactions in each zaddress separate, just like how a savings or checkings account at a bank does.

[cytns]

@lindanlee

Hi Linda,

Thank you for your detailed review. It's a good reference. I appreciate it, and I mostly agree with you. Your feedback extremely valuable for us - it helps the team understand which features and functionality are the most import for Zcash and users.

We met with Zooko Wilcox most recently. He was glad we're working together with you. We have sent a little present for you with Zooko (Zcash T-shirt by Guarda).

Now we're working on new Zcash screens. We'll let you know within a week.

[lindanlee]

@eugeneives No rush on the project, thank you so much for being such great collaborative partners. We're so excited to try and figure out the UI and make zaddresses more used!

I'm glad you got to meet Zooko, and I'm very excited about the t-shirt! I'll wear it proudly. :)

[lindanlee]

Hi everyone, I haven't heard from you all in a while. Is the period to work on UX now over? It seems to be, if I read the timeline from your proposal correctly.

[AndrewGuarda]

Hi @lindanlee nice to hear you again! We are going to release the application with t-addr only at the beginning of the next week. So I suppose we can present you all UI before Friday this week.

[lindanlee]

Thanks! Talk then.

[AndrewGuarda]

Dear @lindanlee we've released beta for t-addr wallet, I'll appreciate your feedback. Please find it at the following link https://play.google.com/store/apps/details?id=com.guarda.zec

[lindanlee]

@AndrewGuarda, thanks for taking the time to make the product! It is now objectively my favorite Zcash wallet on the market. I'll happily relay this to my team at Zcash.

It looks really great, and has a lot of other functionalities that other wallets do not. My favorite three things of many were: 1) incredibly quick refresh time to show transactions almost instantly, 2) include/exclude fee feature in the send UI, and 3) ability to "repeat" a transaction.

Some minor things to fix:

• When starting, it took a while between "create a new wallet" to getting to the home screen. A progress message, or "initializing your wallet" placeholder screen may be helpful. I clicked on it many many times, and I accidentally ended up clicking through a bunch of prompts without reading.
• My balance on the home screen showed as "0.004" when it was actually "0.0039836." I suggest showing the exact balance, even if it's a lot of digits. Similarly, the "send max" button in the send interface filled in "0.004" when I had 0.0039836 ZEC, and I was unable to complete that transaction until I manually altered the amount myself.
• In the settings, the FIAT currencies available are USD, EUR, RUR, and GBP. But in the purchase menu, the denominations listed are EUR, DKK, NOK, SEK, GBP, and INR. I think that these sets of FIAT currencies should be the same.
• In transaction details, show the FIAT amount in addition to the sum (i.e. in addition to "0.004," show "$1.33"). Bonus if you show both what the FIAT equivalent was at the time, and currently--so that in 10 months from now, I can look at the transaction and see "0.004, $1.33 at time of transaction, currently $4.60." This helps with accounting/tax purposes.
• in the google play store, the screenshots show a shield logo with a Z without a circle, but your application shows it with the circle. I don't think this is a big deal, but thought I would let you know.

I don't want to write too much, but I think that I want to emphasize how much I appreciated your hard work and your attention to detail in the UI. There are so many little design decisions that you made, on your own and without my guidance, that really make this app feel intuitive. (I'll just go ahead and list a bunch off the top of my head in appreciation: your brand presence/aesthetic, PIN interface and how it re-prompts after inactivity/being sent to the background, clean transaction listing and subtle green bar to show spendable funds, your use of icons, error messaging, color, immediate feedback for successful actions, etc.) Don't let my feedback discourage you, and I do have many more things I like than I do not. :)

[lindanlee]

If you are curious, you can see what I tried out. I recorded my screen and talked aloud, like last time.

Videos:

• install and initial screen impressions: https://drive.google.com/file/d/1TiYn5wwlcv_O7ZKyoze0kc5ED0S4JR0u/view?usp=sharing
• receiving and sending a transaction: https://drive.google.com/file/d/1bTHcLgxM2N8MOXDYkvnFDeBi4T4Vzcnl/view?usp=sharing

I don't think there is anything critical to see that I didn't mention above, except for the fact that I think the app crashed once. I may mention things I like or give tips that didn't matter too, so only look if you have time or just want to.

[lindanlee]

Update, with not so fun bugs:

• The application keeps crashing when I try to use it.
• When I click one number in the PIN UI, two dots are filled in.

[AndrewGuarda]

@lindanlee we've fixed these issues (crashes + PIN) and mostly implement issues from your review. The app is available for downloads in GP. Thank you so much for the valuable feedback!