Cunning Cat, Naive Fox

Security or Convenience? — A MetaMask UX Redesign Case Study

Unlimited ERC20 allowances, the biggest security risk of the Ethereum DeFi ecosystem, have “successfully” assisted numerous scammers in stealing investors’ funds. Here is my take on how might we prevent it from happening from a UX point of view with the redesign of MetaMask.

Date: March 20, 2022
Deliverable: Figma Prototype, User Journey, Persona

Intro

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.

Behind the innocent-looking pinky cuteness, hides a greedy bastard

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.”

Metamask-2

The default setting is “Proposed Approval Limit”, an earlier version was “Unlimited”

Trade-offs between Security and Convenience

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?

Unlimited Allowance
If you’re going to be using this dApp a lot and you trust the project

Smaller Allowances
If you’ll use dApp infrequently or you do not 100% trust the project.

Review and Revoke
Review your outstanding allowances periodically (say every month), and revoke those that you’re not actively using anymore.

What can UXers do? 🤔

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. 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.

pexels-andrea-piacquadio-3769021
Kiara

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.

Pen and Paper before Pixel

Sketch

The Redesign (After)

The Current Design (Before)

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping