Workers Auto Approve
Re-design mockup for zero-knowledge assets
web3, ux, ui, web-design, zero-knowledge, typeface, joyful, trust, figma, colors, private, decentralized, real-time
Zero-knowledge assets are a way to transfer ownership of a private asset (the amount transferred is secret) on a public blockchain (in this case Ethereum is the blockchain, and AZTEC is the zero-knowledge technology built on top of it). There are two kinds of assets on Ethereum (public tokens, sometimes called ERC20, and a newer, private kind, called ERC1724). Don't think of these assets as just money or shares of stock; for this demo it could be shares of a building or a co-op, a commodity like sheep or bales marijuana, trees in a rainforest, hours of someone's time.
This mockup will eventually be launched as a web demo to let people interact first-hand with zero-knowledge assets in their browser, on Rinkeby/Goerli testnets first, to gain some intuition and experience. It is meant to convey these values
* modern / minimalist
* trustworthy & predictable, but not stuffy
* private (in the sense that the values viewable in your browser are not viewable by anyone else, not even the server)
Although dynamic user effects are described below, your mockups will just be static 2D visual layouts in Figma, with start/end views and a description for the engineer on how any elements will transition.
This particular bounty is meant to ideate and produce at least three different mockups, from as original or independent views as possible, that can then be narrowed down and implemented in separate (code / implementation) bounties in React and launched on Netlify or some other static site.
## User interaction and Features Targets
The first draft mockup is here:
Read it with the comments (speech bubble icon) turned on to get an idea of the scope, but don't be tied to anything else (typeface, size, placement, ordering).
The different elements of the UX are:
1) When the page loads, the user gets wallet auto-created for them and a randomly chosen avatar icon. There is a link to the Etherscan page for their account.
2) Their balances of a few fixed tokens (ERC20 and ERC1724) are shown. They are minted new ERC1724 tokens, and their balances shown going up the correct amount. (there should be sound effect, which is muted by default, but a button somewhere to unmute for future refreshes)
3) Other online users at the same time (including a fixed "robot" user) can be selected as recipients. The user selects an amount of one token and clicks to start a "send" action.
4) Some kind of spinner icon begins, with a link to the corresponding tx on Etherscan.
5) When tx succeeds, another sound effect plays, their balance decreases, and the Etherscan link / spinner disappears.
6) If tx fails, a button / link is shown for them to try again, and the Etherscan link / spinner disappears.
7) Any incoming transactions from other users also increases the balance, and a notice appears describing which user sent the transfer, how long ago, and a link to Etherscan tx page.
## How to work on this bounty:
Apply to work for this bounty on Gitcoin (for now) and send a short message mentioning any relevant bounties or online portfolios you've worked on, including links, your general design approach, and how you plan to handle some of the specific interactions above.
Fork this Figma, and implement your work in it
I'll pay out $75 of equivalent ETH (or DAI as preferred) to each submission from anyone who reads through the above and sends in an original, worked through design (can be multiple winners). Please post your Figma links into the Github issue at least once as you work to receive feedback. I'll give you the go-ahead if your approach is significantly different enough from previous submissions, and if so, you can submit and be awarded multiple times before the deadline is up.
## Creative Guidelines
Full bleed artwork or photography in a restrained way (sidebar, banner) can be used, but no parallax effects or gigantic hero images. The user interaction / token minting and transfers should be the focus. Don't worry about responsive / mobile layouts.
Display / header typefaces should be on the angular / geometric / slab serif side, neither too futuristic nor too traditional, but paired with any body face that complements well. Display header text can be images if you'd like to use fonts on your computer that are not available online for free. No specific guidelines on color scheme.
You may enjoy this browser extension that lets you explore Google Fonts / color schemes in your New Tabs: https://palettab.com/
Despite the first draft above, all three cooperating projects (AZTEC, RealBlocks, Democracy) should be treated as equal importance and appear at the bottom in a smaller form.
You can make use of the AZTEC and RealBlocks logos from their respective websites:
and also any part of this image as a logo for Democracy.js.
Have fun 🎉 and even the guidelines above can be wiggled if you have a good reason or a strong 💪 concept. Ask questions or not, thanks for reading this far, and look forward to seeing some new creations appear.
Setup your profile
Tell us a little about you:
No results found for
Type to search skills..
Required [[totalcharacter]] / 240
Are you currently looking for work?
[[ option.string ]]
Setup your profile
Our tools are based on the principles of earn (💰), learn (📖), and meet (💬).
Select the ones you are interested in. You can change it later in your settings.
I'm also an organization manager looking for a great community.
Enable your organization profile
Gitcoin products can help grow community around your brand. Create your tribe, events, and incentivize your community with bounties. Announce new and upcoming events using townsquare. Find top-quality hackers and fund them to work with you on a grant.
These are the organizations you own. If you don't see your organization here please be sure that information is public on your GitHub profile. Gitcoin will sync this information for you.
Select the products you are interested in:
Out of the box you will receive Tribes Lite for your organization. Please provide us with a contact email: