Proposal: Zcash HCI Guidelines & Design System

Community Grants Minor Grants
1

What is the name of your project?

Zcash HCI Guidelines & Design System

Who is the primary contact or organization for this project?

Geffenz

What USD ($) amount are you requesting?

$24,000.00 USD

Are you requesting payment up front or upon completion of the grant?

We require the grant funding before commending work on the grant.

Upfront payment is required because of the hefty body of work and time frame. Normally this would be pitched at 8k a month, for 3 months. However, since minor grants arenā€™t milestone related Iā€™m submitting it this way. It could be necessary to transfer to a major grant (especially if other projects require the allocated budget) but I wanted to get this on the radar immediately.

Describe your grant.

The current landscape of Zcash doesnā€™t have enough design support. ECC has done an admiral job of creating an SDK available to the public which adequately supports the existing partners and exchanges. However, it seems unlikely they will launch a product on their own and a large amount of the intricacies of good user experience arenā€™t publicly defined. Pacu has stepped up to ensure the SDK is available and usable, but there are no HCI guidelines or open-source design system available. I would like to remedy this now and ensure all the UX lessons of the past are documented and shared publicly.

Carrot examples: Consistent branding and user experience is a requirement for a world-class UX and this would help ensure that. The Zcash community developers would have a design framework to jumpstart any project and a source-of-truth for complex issues. This could also be incorporated into any read-the-docs or community documentation locations, building our community support.

Stick examples: Pick any ZIP above 311 and youā€™ll see it NEEDS user education and clear guidelines for implementation. In the past, transparent addresses were used by default and users got an unclear understanding of how the Zcash protocol works. We are treading in a minefield currently with UAs, shielding by default, detection keys, and fee mechanics. Without something like this missteps are bound to happen. Funded projects donā€™t seem to be evolving past wireframes and this could be from lack of design support.

Deliverables:

HCI Guidelines (Documentation and examples of)

  • Usability patterns, required for user interaction and user education
  • Recommended best practices
  • Required privacy (Zcash particular) practices
  • Accessibility concerns

Complete Design System

  • Common visual language
  • Open-source FIGMA/PENPOT file
    • Mobile & Desktop (yes, web3)
  • User flows for (sync/balance/send/receive/request/backup)
  • Open-source design assets
  • Developer friendly (CSS exportable)
  • Icons and Lottie Animations
    • Transitions
    • Success/Fail alerts

Community Interaction:

  • Proposal thread
  • Active weekly twitter posts and discord channel for additional feedback

Cost and timing: $24,000 - 8k a month for 3 months (not milestone based).

Month 1 (Oct 15th ā†’ Nov 14th) - The HCI documentation and a design framework will be released - specifically so the next two months can garner feedback and design iterations. I plan on engaging both the industry wide design community and the Zcash developer ecosystem for feedback.

Month 2 (Nov 15th ā†’ Dec 14th) - Interaction design (UX interactions and transitions) will be created and made public for feedback. All user flows will be documented and added, with feedback incorporated. A click-through prototype will be available for teams to explore. This is an important month for any polarizing opinions in the HCI documentation as we need to create a united front.

Month 3 (Dec 15th ā†’ Jan 14th) - Animations and delight will be added, giving teams with more front-end experience ways to spread their wings. This includes more complex designs that could require custom (outside of SDK) coding. Examples would be comprehensive home screen (balance) syncing, active vs idle states, and other platform specific designs (Activity bar, action button, etc).

Conclusion: I believe this is needed and something I am individually in the right place to produce. It has been in the back of my mind for a while as a needed resource. Thanks to some pokes and requests for help, Iā€™ve decided to raise it as a possible Minor Grant. If approved, I would also strongly recommend any other teams to raise their design concerns so they can be incorporated.

Please introduce the team that will be responsible for delivering the grant.

Hello, Iā€™m Geffenz! Iā€™ve been working in the Zcash ecosystem for the past 5 years and have recently left ECC and hope to work more broadly with the community. Iā€™ve been an integral part in designing the UX/UI of Zcashā€™s mobile proof-of-concept, Reference Wallet, Zcon Swag App, and the ECC internal wallets (both the dog food and secant apps). My designs were released for common-use and have helped (or evolved directly into) Nighthawk, ZECWallet, and other multi-coin wallets (Unstoppable, Edge, etc).

Are any members of the team currently members of ZCAP?

Yes, Geffenz.

9 Likes
2

Notes:
The only other design brief I see is some unfinished Elemental ZEC UI work (https://elementalzcash.com/react/getting-started/), so this wouldnā€™t be duplicate work. I would reach out to communicate regardless and hopefully dovetail with their components. Elemental ZEC ā€“ UI Component Kit and Payment Processor - #27 by 1337bytes
Work would need to keep the Zcash UniFFI Library in consideration as requested by Adi/Pacu. RFP - Zcash UniFFI Library

Request to communicate with and include ZGo by @earthrise added
https://zgo.cash/

2 Likes
3

As Iā€™ve been auditing various projects itā€™s stood out to me how a little bit better design and UX, across the board, would make a lot of projects look way more attractive, and make Zcash feel more ā€œprofessionalā€ on first impression.

Design/UX is one area I feel we can invest in to get great bang for our buck.

Wallets could definitely use some polishing, and Iā€™d even like to see this expanded to cover more projects like ZGo and other non-wallet things. So this sounds great, assuming project developers are willing to integrate the designs.

5 Likes
4

While I agree that having UX guidelines are valuable, I also have a few reservations:

  • The UX of the applications that the OP mentioned is not ā€œworld-classā€ per se.
  • The usage flows described in the proposal donā€™t include the Zcash-specific features: Note selection, privacy, multi-payees, and many others.
    Basically, Iā€™d like to see some actual design for the advanced workflows. How would a wallet include coin control?, offline signing?, multi sig? DKG? auto-shielding? The simple receive/pay/balance workflows are well understood by now.
2 Likes
5

Yes! Youā€™ve zeroed in on exactly the issue.

  • ECCā€™s goal of a world class UX has not been reached. No implementation of a Zcash wallet has ever fully implemented my designs, iterated cleanly on feedback, or gotten to the point where new features could be explored. We have been blocked by technical difficulties (either refusing to compromise on privacy/security items [YES!] or distracted by the next new protocol features instead of getting usability to an acceptable trust level [NO!]). Work has been queued up too long and final designs have never seen the light of day. I want to evolve those designs to standalone and generally raise the UX/UI bar for all of the Zcash community.
  • Zcash and privacy specific features are very much included in the scope of this proposal, but speculative Zcash features can only be recommendations. It should be understood that this is a design system, not a codebase. UTXOs and note optimization, FATF compliance, memos to chat threads, shielding by default enforcement, and an offline mode are features that have been discussed and I can share assumed requirements - but without actual implementation examples we can only apply HCI principles and create static prototypes. With some core documentation teams can take the base design system and apply it to ANY new concept.

I do see the need for proof-of-concept UX work on multisig/DKG, staking/defi, and opt-in tax tools. This is a great idea for future Minor Grant proposals.

Additionally, it should be noted that this would be a living design system. While I would host it to initially share it, the repository would be open to the community for submissions, revisions, and innovation. I may be too optimistic here, but I believe we can succeed by altering our tact. We have tried the ā€˜build the SDK and they will comeā€™ attack. We have then encountered incredible levels of, basically, industrial espionage putting us further in the weeds. I believe we can rise from the ashes by coming back strong with multiple robust, USABLE, applications. Ones that inspire trust by competent and consistent design.

2 Likes
6

The primary hurdle we face is providing a better user experience when newcomers initially try a shielded wallet and then decide to start using it regularly. Itā€™s unfortunate that the development funds have been unavailable for investing in these much-needed HCI improvements.

I support this proposal.

7

It would be great to have some open design specifications and guidelines for wallet and other Zcash app developers to adopt/reference, together with some example component and screen designs.

Re being developer friendly, I think the best thing is to standardise around a component library that can be used in code, or implemented in different languages.

Where would the design assets be stored? GitHub would be a good place in terms of collaboration and being dev-friendly. Worth keeping in mind that Figma is a proprietary cloud-first system and Penpot is a relatively new tool which may not be so battle-tested compared to Sketch/Figma.

A mixture of technical assets/specifications would be great. The main wallets are implemented in a variety of languages/frameworks, and Figma/Sketch/Penpot CSS exports would be more suited for web apps; having some design resources suitable for React Native, Flutter, SwiftUI, Jetpack Compose/Kotlin, etc would be nice.

Icons and Lottie animations would be nice; Iā€™ve done some work around a TypeScript icon library/pipeline already.

Where would the Discord channel be? Would love to see a channel/server for design discussion and feedback.

1 Like
8

Iā€™d be keen on collaborating; maybe Elemental Zcash could act as an in-code implementation of this design system? The documentation site is out-of-date, thereā€™s a number of features Iā€™ve worked on since like a TypeScript icon component library and build pipeline, etc, Iā€™ll be migrating some of the documentation to Storybook and Next.js. I plan to standardise the components around popular frameworks like shadcn/Radix UI, Chakra UI and Figma Tokens.

Would be nice to see a focus on ā€œcomponent driven designā€ and Component Story Format ā€“ https://www.componentdriven.org/

9

Yeah, thatā€™s my main concern. Iā€™d love to have HCI and design docs but I feel that if they are built without code behind, they will not tackle technical difficulties / limitations.

10

@1337bytes : I would create a github repo while working on it that would be transferred (cloned and the original deleted) to ZF (this is more about it being easily found than ownership). Iā€™d assume the repo to be a living repository requiring updates from the community with future needs. The FIGMA vs PENPOT argument has been raging in my head for awhile. I like the idea of a fully opensource platform (especially with the example of Unity backstabbing their customer base lately) but since PENPOT is more untested decided to support both.

I believe we could integrate SDK links, implementation code examples, and other app framework links in the correct places. I would require community/ECC/ZF engineering support to collaborate with that data though. This would be part of the ā€˜living documentā€™ upkeep and read-the-docs integration.

I was assuming ā€˜Zcash Communityā€™ discord, but that is only if the R&D one has fully migrated over. This would be ZFā€™s decision for the location, but definitely an open forum and transparent.

re: Elemental Zcash - Absolutely, that would be a boon for both projects I believe. Should help us be thorough and complete due diligence as well! Possibly this could help resolve some of @hanhā€™s concerns.

However, I want to re-state that coding is outside the scope of responsibilities for THIS grant (although communicating with devs and using their code as examples is not). Iā€™ve laid out a lot of work (and discounted it since itā€™s something I want to do), but I will need to avoid feature creep.

1 Like
11

Sounds good, I believe itā€™s possible to export from Figma into Penpot, then SVG/JSON/CSS can be exported from Penpot. Might be worth looking into using Figma/W3C Tokens as an open source of truth, and further down the line token JSON could be used together with GitHub - amzn/style-dictionary: A build system for creating cross-platform styles. for multi-platform design variables/properties/atoms (maybe outside the scope of this grant though).

:+1: and Zingo React Native SDK/integration docs, etc could go there in the future. MDX documentation support would be nice, e.g. https://github.com/primer/design/blob/main/content/ui-patterns/data-visualization.mdx ā€“ could then display/demo React components, or could use Storybook; people familiar with markdown could contribute changes on GitHub and have it deployed via CI when merged.

Would be great :slight_smile:

Agreed :+1: , need to be careful about feature creep and prioritise the essentials.

12

I support the grant and think it would be great for @1337bytes to have more assistance as heā€™s been diligently plugging away on his own for awhile.

2 Likes
13

Hello!

I think an HCI system and UX UI guidelines are very necessary and itā€™s what most of the community is asking to invest on.

HCI guidelines are not code. They are guidelines to tell implementers how Zcash should feel and look like, for them to use as a common ground to build up on.

Every ā€œworld classā€ and massively adopted platform has them in some way or the other.

I donā€™t agree with what has been stated that the ā€œbasic flowā€ is well understood. I bet that if we let every wallet developer define those they will describe different things, otherwise zcash wouldnā€™t be so hard to use and we wouldnā€™t be speaking about all this.

Iā€™ve worked with top-tier designers and geffen is one of them, plus, he knows his way around the web3/ defi waters and is always on top of the latest stuff.

Unfortunately a lot of his work has not seen the light of day because it was deprioritized.

This is a great opportunity for Zcash community to have an excellent designer and UX researcher to work for its interests and without the constraints of business plans or roadmaps of the founding companies.

Needless to say, I support this grant.

:tada:

5 Likes
14

thank u. dis is 100% needed.

2 Likes
15

Hey everyone, I have a few out-of-band questions to answer.

YES, I will make all design files available. This is in response to a question about lottie files and the after effects (or other) programs that generate them. It also applies to any concept or brainstorm work, like more complex issues like SbS.

The majority of CSS for the design system will be responsive, but static code (aka no SASS). This ensures clarity on the system without a framework or added tech stack. That being said, it is important for anyone who picks up the system to be able to change the palette (and other design attributes) at will. This will be doable through editing the FIGMA/PENPOT directory, and a SASS or CSS custom property ā€œexample onlyā€ file will be made available (but not an entire dynamic framework) too.

2 Likes
16

A huge thank you for the 50 voters that supported this Proposal. Sadly we didnā€™t make the 59 minimum (I probably should have actively talked about it more), but it was an enjoyable process regardless. I believe in the next rounds I will cut this up into pieces and just submit a smaller chunk.

Until then!

1 Like
17

How about submitting a grant to ZCG?

3 Likes
18

Good call! Iā€™ll do some rewrites and post it next week :slight_smile:

2 Likes