Designing the pEOS wallet
Introduction
They say that an interface that needs explaining is like a bad joke. We put together this article, to communicate with the community our design thinking and showcase our work thus far. Hopefully, the final users will think that it’s just another wallet that looks good and that’s about it. Technology should be transparent.
Through this post we are going to present our design step by step, discuss the design challenges we identified and subsequently the important choices, we had to make to deliver the best possible user experience to pEOS users.
Design Challenges
pEOS transaction complexity vs Regular tokens
As we already discussed about in the ELI5 post, pEOS has its own address system built over eosio. PEOS tokens can be moved between eosio Accounts and PEOS addresses with privacy considerations depending on the account type of the sender (eosio Account vs pEOS address). Since users in their vast majority don’t like tutorials and manuals, the UI must be self explanatory and the UX should be fluid and protect the users from performing actions without considering the outcomes. During our design research, we spotted the following challenges as the ones we should really try to address:
pEOS works over the eos network; this requires an eosio account and adequate resources (CPU,Network, RAM) in order to relay pEOS transactions.
Users should understand that pEOS addresses are detached from eosio accounts, eosio accounts are only being used to relay the transactions through the eos network.
The wallet should enable the user to send private transactions from and towards both pEOS addresses and eosio accounts, while also informing her regarding the privacy considerations of each type of transactions.
pEOS requires eos RAM to be used as transaction fees; this is a new concept for eosio users and should be communicated and handled.
pEOS is a privacy focused project; we should make sure that privacy of information is protected along the app during its use and that the user is protected from prying eyes.
Keep all of the above as simple and as user friendly as possible.
User must have a clear idea of his balance and his transaction history.
The pEOS wallet Design
Onboarding
Onboarding is usually a very important part of an App, as it is responsible for the first touch point of the concept with the user. It is also good for it to be informative while remaining simple. For pEOS, we tried to keep it as short as we could and it only has 4 steps as you can see above.
Handling the EOS layer with scatter
As we see in the last step of onboarding, the user is urged to connect with Scatter. We believe that scatter does a good job of handling eos accounts and resources and also has a big user base that is familiar with it. As soon as the user connects her eos account, the thin blue line at the top of the screen expands, to reveal information about and allow the user to manage the EOS account and the PEOS stored there when needed. We call it the eosio bar and it is always there where the eos account will live throughout the UI from now on.
The wallet home screen
pEOS wallet home screen
Our goal here is to provide an at-a-glance view of the pEOS balance and a visual representation of its recent history so far. The main actions are Send and Copy address, and in the case that a PEOS balance exists in the connected eosio account, we made sure that the Anonymize button is prominent. The transaction list sits at the bottom as with many other wallet designs, so a user can investigate further her transaction history. Transactions themselves are clickable but do not display Sender information as it is private.
Privacy by default
We designed “pEOS wallet” to have privacy enabled by default. This essentially means that we “disabled” PEOS transactions among eosio accounts that do not use the pEOS privacy functionality. To allow users to use the PEOS tokens stored in their connected eosio account, we introduced the Anonymize button in the eosio bar.
Flow — Anonymize your public balance
The Anonymize button sends the PEOS tokens of the connected eosio account to the wallet’s pEOS address and makes them available to be used with high levels of privacy as intended.
This way we improve privacy and simplify the UI in general as we completely remove scenarios of transactions having weak privacy.
Sending PEOS
Sending PEOS is now pretty simple; the UI supports sending to pEOS addresses as well as eosio accounts and the only challenging part left is handling RAM as fees.
Ram as Fees / Not enough RAM
As mentioned earlier, handling eosio RAM as fees is a new concept for users and it is our job to inform and help them navigate through the struggles it may bring. To solve that, we designed the flow above that appears when the user tries to send a transaction but there is not enough RAM available (estimated). As you can see, we explain the issue and provide two solutions, to either buy ram or switch to another account with sufficient RAM (hopefully). RAM usage is kept minimal and usually sums up to a few bytes.
Final thoughts
We believe that we ended up with a solid design that most crypto familiar users will be able to use to complete private PEOS transactions with confidence and ease.
Even though we are confident that we have a solid basic design, we are far from finished as we are already considering various additions like:
in-wallet PEOS/EOS, EOS/PEOS trading pairs
leverage PEOS relays with fees in PEOS instead of eosio accounts connected through scatter or other wallets
add support for Block.one wallet
mobile version
Bonus: Prototype video incoming
Keep your heads up for third party videos as we have also released a video of the alpha version of the wallet as described above to certain influencers.
(Edit: The wallet video is out. Have a look at the wallet in action here:
https://medium.com/@pEOS_one/peos-wallet-preview-4476320736e3)
We posted this article primarily to communicate to the people that follow us in our journey to deliver pEOS from a whitepaper to a full blown product, building block by block put in place. Thanks for your support so far, we wouldn’t come this far without you, we hope that you enjoyed it! That’s all for now, looking forward to your feedback and thoughts!
