Context
Providing complete transaction privacy
Kaleido is a full-stack Blockchain-as-a-Service platform that simplifies and accelerates the enterprise journey to production. A common challenge for enterprise blockchain networks is protecting private information from being shared on the ledger. Some organizations need to prevent transactional data from being exposed to other members of the business network for business, legal, or compliance reasons.
Zero-knowledge proofs (ZKP) can provide complete transactional privacy, enabling transactions where one party can prove to another that they know a value without conveying any information beyond that fact. The goal was to enable clients to focus on utilizing ZKP technology without investing time understanding the complexities under the covers.
The Challenge
Understanding cryptographic technologies and diagramming user flows
My role was to diagram how we could leverage our existing token service to account for shielding both accounts and tokens to allow for anonymous trading in a "dark room." Working closely with protocol engineers to understand how Zether could be integrated required collaboration with JP Morgan's Quorum development team and our in-house dev team.
One of the most challenging aspects was understanding this new space in cryptographic technology. The Zether protocol is jointly developed by cryptography researchers from Stanford University and Visa. Bridging ZKPs into our token service required deep understanding of ERC20 tokens, trading, funding, and burning tokens.
User flow mapping how accounts and tokens get shielded for anonymous trading
Wireframes
Establishing basic requirements
Once we decided what we wanted to build and had a general understanding of how the service would work within our technology stack, I worked with a front-end developer to create low-fidelity wireframes to present to the larger team — to make sure the diagrams matched expectations and met project requirements. As a team, we identified the basic tasks a user should be able to complete:
- Shield an ERC20 Token
- Shield an account
- Fund, withdraw, and transfer tokens
- Trade Zether tokens anonymously
- View balances available
- View public and shielded account addresses
- Generate proof and transfer tokens
Low-fidelity wireframes used to align the team before visual design
Design
Building a card design system
A lot of the actions a user could take were based on a "balance" of Zether — an ERC20 token that becomes "shielded" — available for funding, trading, and withdrawing between a public and private address. Because one balance is contrasted against another, I used the concept of a "gas gauge" to intuitively show the amounts available for action.
The cards were designed to display public addresses (shortened for a better experience), user actions, help information, and delightful animations and transitions. I wanted these tokens to feel like tangible UI elements — similar to trading cards. I also explored growing the cards to execute smaller actions rather than creating a separate UI flow.
Token card design system showing shielded and public balances with inline actions
Interaction
When a token is shielded, a delightful animation signals the transition from public to private supply — giving users a clear, satisfying moment of confirmation.
Key Flow
Explaining anonymity in token trades
In order for users to send tokens anonymously, we had to account for a bit of education in the way each transfer was set up. The underlying cryptography method used in Zether required additional accounts in the transfer to be used as "decoys" in order to have total anonymity.
This multi-step wizard accomplished setting up amounts to be traded, sender and receiver addresses, and the additional layer of anonymity — if other parameters were met — in order to complete the proof and the trade.
Multi-step wizard guiding users through anonymous token transfers in the "dark room"
Final Design
Service landing pages
The final product simplified the experience by requiring users to first shield their ERC-20 tokens, converting the public supply into a private (Zether) supply. A user could manage this new token and its balances across accounts by clicking through to the token landing page — where withdrawing, funding, and transferring occurred. It was important to contain minimal actions within the card view to reflect new balances.
Final service landing pages showing the complete token management experience
Product Release Findings
Widely adopted, widely covered
The launch of this product has been widely successful with a healthy amount of online buzz, and excitement from clients on our social channels, and media coverage on sites. This new and cutting edge technology was very important for Kaleido to set itself apart from its competitors and has led to many conference and speaking engagements in the topic.
For a thorough demo of this service, and to more coverage on this topic visit Kaleido's blog page.