Cunning Cat, Naive Fox — Security or Convenience? — A MetaMask UX Redesign Case Study
First, let me share with you a horror story coated in the pinky and kawaii cuteness.
It happened in the hot, sunny summertime during what is now referred to as DeFi Summer 2020 when there is a lot of DeFi projects budding in the crypto space.
There was this upcoming project called UniCat. A project allows you to stake and yield farms Unicat tokens. What people didn’t know was that the founder included a sneaky function that allowed the smart contract to drain the use of tokens directly from the wallets. What ended up was not only did this project rug pull, they stole over 200,000 dollars of Uniswap tokens directly from MetaMask wallets while the users were sleeping. The sad thing was that those tokens are worth 2 million today.
The first thing I am most concerned about as a newbie in the crypto space is SECURITY. I educate myself by watching a lot of videos on Youtube about the best security practice, how to prevent being scammed, and learning from real cases. I first became aware of the issue of “Unlimted Access” (Unlimited ERC20 allowances) from this video.
Why and How did it happen?
Looking closer to those cases, all this has to do with not being aware of giving “Unlimited Access to Spend” to the platforms, as the default setting is Proposed Approval Limit, which is tucked away behind Edit Permission. You would need an extra click to reveal all the details when signing the smart contract.
Rosco Kalis, who created Revoke.cash, the tool to track all the contracts written in his article:
When depositing a specific amount (say 100 DAI) into a contract, you can choose to set an allowance of exactly that amount. But instead, many apps request an unlimited allowance from the user.
This offers a superior user experience because the user does not need to approve a new allowance every time they want to deposit tokens. By setting up an unlimited allowance, the user just needs to approve it once, and not repeat the process for subsequent deposits.
However, this setup comes with significant drawbacks. As we know, bugs can exist and exploits can happen even in established projects. And by giving these platforms an unlimited allowance, you do not only expose your deposited funds to these risks, but also the tokens that you’re holding “safely” in your wallet.
Super user-experience? When the frictionless experience exposed the users to potential dangers and risks, it is not a good user experience anymore. The trade-off between CONVENIENCE and SECURITY is a typical dilemma we face a lot in the UX.
Choose CONVENIENCE, you grant unlimited approval for once, save clicks, and have to pay gas fees each time you trade or deposit, but you are exposed to the risk of exploitation from the malicious smart contracts and bugs.
Choose SECURITY, you have to approve each time before each transaction, which means paying more gas fees, very inconvenient but you are more secure as you grant the smart contract to spend a limited amount of your tokens.
What can users do?
- If you’re going to be using this dApp a lot and you trust the project (Unlimited Allowance)
- If you’ll use dApp infrequently or you do not 100% trust the project (Smaller Allowances).
- Review your outstanding allowances periodically (say every month), and revoke those that you’re not actively using anymore.
What can UXers do?
Hence, as a UX designer, I ask myself, is there anything I can do about it with user experience design?
To begin with, I will choose MetaMask as my object for redesign, as it is currently the world’s leading non-custodial crypto wallet with 21 million monthly active users (statistics updated in January 2022).
Meet Kiara
Behind every piece of unsentimental code, every seemingly cold Call-to-Action Button, there is a human being, and every human being has a story.
User Story
As an amateur stock market investor, Kiara has some experience in investing. She was intrigued by cryptocurrency for a while, but it wasn’t until the boom of NFTs last year that she decided to enter the space. She does some research in her spare time, follows some YouTubers, also bought How To DeFi to educate herself. She started by trying out some DeFi dApps, and like most people, she installed MetaMask on her Google Chrome.
As a newbie, she found the crypto space is not very beginner-friendly and felt unsafe as she often hears the news about scams. Despite this, she was open to the idea of decentralization, attracted by the high ROI, so she wanted to give it a try. She estimated that it will take some months to feel comfortable.
“When I press the confirm button, I don’t know what I agree upon the Smart Contract I am signing to. Often those contracts are full of incomprehensible mysterious numbers mixed with letters, and technical jargon that only engineers can understand.
Without any customer service, I can only rely on myself to google each line in the contract to understand what it means.”
Goals & Motivations:
- Want to find the best practice for security
- Want to feel comfortable and safe operating transactions between different platforms, tokens, and blockchains
- Want to invest some of the income in low-risk investments and hope to see returns in one year
Furstrations & Pain Points:
- Overwhelmed by the knowledge in the Crypto and DeFi space
- Complicated procedures for transactions (Buy, Sell, Transfer, Send, Swap)
- Feels unsafe with MetaMask wallet
- Since it’s decentralized, there is no customer service for support when encountering problems.
Mapping out the Current User Journey
Deconstruct Existing Design
Solution
- Make it clear and show it upfront
Currently, it requires an extra click (Edit Permission) to access the details of unlimited and limited approval, and it does not communicate with the users about the pros and cons of each decision nor inform the potential risks of approving infinite allowance. By showing it upfront with a clear message, it can help users to make a better decision on which allowance to give away.
- Integrate a native function or embed an external link to review accounts and revoke token allowance
It is also important to review outstanding allowances periodically, integrate a reminder for the users to review signed contracts and revoke those not actively used anymore.
Sketch
Final Result
The Redesign (After)
Based on the sketch, I decided to go for Switch as it saves more space, instead of Selected Card. The two options are transformed into a switch with icons. A warning and a simple message will be given depending on the state chosen. More Info (currently linked to MetaMask FAQs page) will reveal details and state the Pros and Cons of each option.
An external link (in this case token approval checker on BSC scan) is embedded underneath the option of Infinite Allowance to offer the possibilities of reviewing and revoking approvals.
Current design (Before)
Next Step
I will reach out to MetaMask users through online communities for feedback to iterate and improve the redesign. Feedback is welcome. Please leave comments below or write me an email.
