Project Zephyr Update

Original grant thread for reference: Zephyr - A Metamask-style browser extension for Zcash

Hello Zcash Community,

I am Little Slingshot from the Zephyr Wallet team. Earlier this year we were awarded a ZOMG for the development of a browser wallet for Zcash. We are slightly overdue with the update, but despite the delay there are a number of exciting discoveries to share with the community.

This is my first post, so I have included a short brief about me.

Brief about me

Within the last 10 years, I worked as a full-stack developer and product-lead on a number of bespoke web-applications. Often dealing with heavy web-dashboards and unconventional user interfaces for applications within niche industries.

Whilst having few years of web-development experience and UI architecting under my belt, I started my Zcash journey in early 2021, after spending 2020 dabbling in Ethereum.

As a team we wanted to try to use our slow start and change in developer circumstances to our advantage. We did this by aiming to become the user-friendly wallet of choice, yet not compromising on advanced functionality. We focused our work on both aesthetics and usability.

Being user-friendly is an extremely important attribute of a wallet. Last year I was onboarding my friends onto MetaMask and I remember total confusion and panic in their eyes. The first encounter with a wallet can either leave a scar (and raise the barrier for entry), or it can enchant user and encourage to weave crypto into their lives.


The centrepiece of the new design is the novel UI metaphor for managing accounts/addresses

THE UI METAPHOR IS: "ACCOUNT IS A FOLDER"

In simple words, it means that all of the z/t-addresses are represented as folders.

Folders even visually resemble little “wallets” to so that user can see familiar elements which will serve as solid foundation for further understanding. Our aim is to reduce cognitive load and therefore easier onboarding of novice users.

Creating friendly UI for any crypto wallet is a challenging task by itself. This is due to intrinsic complexity of the any money transfer process. Crypto complicates this process by throwing dozens of new terms at user. We are preparing a separate post on this topic

In the screenshot below you can see the HOME SCREEN which presents user with a number of active z-addresses and t-addresses. This screen is inspired by software like Windows Explorer or MacOS Finder, to try to add familiarity.

We put a number of features into UI:

  • Onboarding
  • Home Screen : First account
  • Home Screen: Display Accounts
  • Home Screen: Coin Control
  • Balance Display Widget
  • Send: Single functionality
  • Send: Multiple outputs functionality
  • Send: Multiple inputs functionality
  • Transaction History
  • Address Book
  • Settings screen

All these are heavily detailed in our Screencasts

Onboarding

Detailed explanation Onboarding Screencast

We have opted to require user to input the entire seed phrase. This is to prevent user from writing down seed phrase in sloppy handwriting and then reading them back incorrectly.

Home Screen: First Account

Detailed explanation Home Screencast

After user completes the “Onboarding” step and sees the “Home Screen” for the first time, we prompt the user to create their first account. Many wallets automatically create first account for the user, but we believe that this making first account explicit gives us opportunities to educated user:

  • educate that: accounts can be created at will
  • educate that: accounts are easily created
  • educate that: user is the one who creates all those accounts
  • educate that: accounts can be private
  • educate that: accounts are visually represented as folders

Below you can see screens which user will when first opening Home screen.



Home Screen: Accounts

Detailed explanation can be seen a part of Home Screencast
(fast forward to the middle of the video)

Below we can see wallets displayed as “Table view” with additional columns displaying the balance of the wallet and the time of the last transaction.


Home Screen: Coin Control

We may want to use funds scattered across multiple addresses. Below shows example where user selects multiple folders and can either sweep funds or send transaction from the selected folders.


Balance Display Widget

Explanation Home Screencast
(at 4:36)

I hope you will agree with us that checking current balance is the most used feature of any wallet. This is why we wanted to make it clear and simple to see the balance:

  • To make it constantly visible to the user: balance widget is displayed in top left corner
  • Widget is ‘credit card’ shaped (because “i have stack of cards” feels natural)
  • Total balance balance is the first thing which jumps to users eye
  • Other balances (shielded and transparent) are still easily visible, but not competing for users’s attention, as “stack of card” allows for natural visual hierarchy
  • The “clock” icon provides user with feedback that the balance includes “unspendable amounts”.

Balance_Widget_01



Send: Functionality

Detailed description can be seen as part of two screencasts: Send Simple (single input) and Send advanced (multiple inputs) screencasts

The most important functionality of the wallet is to send funds. Here is the example of the Send Screen. The core characteristics of the screen are:

  • Reminiscent of “Email sending screen”
  • Address Book integration “similar to email”
  • Balance displayed using consistent visual language
  • Coin Contol

There’s a good few screens involved in the transaction process which are all shown and explained within screencast.





Address book

Detailed description can be seen as part of Address Book, Transaction History, Settings Screencast


Transaction History

Description within Address Book, Transaction History, Settings Screencast

If you look at the screenshot you will see the main UI functionality elements:

  • Quick search box
  • Quick filter (All/Incoming/Outgoing)
  • Sort by functionality
  • The “Memo” column allows to see the messages sent via transactions


Below are screenshots for modal windows representing Transaction Details.


23 Likes

Original grant thread for reference: Zephyr - A Metamask-style browser extension for Zcash

7 Likes

" THE UI METAPHOR IS: “ACCOUNT IS A FOLDER”"

Excited for this. TY!

6 Likes

At first glance, the folder design looks awesome! Trying to have wallets within a wallet is hard for some of the other wallets out there and this really looks like it would solve that problem. Keep going :slight_smile:

4 Likes