MetaMask Web Wallet

Quick background

MetaMask is working on a new offering to adopt ERC-7715 permission and ERC-4337 abstraction standards, which empowers web3 users with improved onboarding experiences, safer exchanges, and more agency.

ERC-7715 enables "enforced outcomes," ensuring that a transaction completes only if specific conditions are met. This revolutionary functionality could significantly reshape user interaction with smart contracts, bringing heightened security and control to Web3 users.

‍

The problem

We aimed to give users the power to set enforced conditions on their transactions, allowing them to manage complex permission structures while abstracting away technicalities users don't need to know.

Beyond the design itself, it was critical to manage diverse stakeholders, communicate the project’s vision, and navigate technical complexities inherent to ERC-7715 (new permission standard) and its interaction with ERC-4337 (account abstraction).

‍

Design objectives & outcomes

• Design new, intuitive permission request flow.
• Highlight the power of delegations.
• Manage stakeholder input and expectations.
• Ensure technical feasibility and alignment.
• Understand technical capabilities as outlined in ERC-7715 and 4337.

(design featured in the talk below)

‍

Design process

1. Align Stakeholders, Define Scope

I began by conducting extensive sessions with key stakeholders across product, engineering, and leadership. Given the newness of ERC-7715, stakeholder inputs were essential in refining the user experience and in managing the high risk and unknowns.

• Clarified goals and product vision for MetaMask Web Wallet
• Identified unknowns around technical feasibility in order to define v0 scope
• Workshopped lo-fi flows together to deep-dive into use cases and scenarios

1.5 Competitive Research

Several Web3 companies had already implemented their version of easy onboarding solutions, borrowing patterns that exist in Web2 today: Social logins.

My primary competitive research targets were Privy, Web3Auth, and Reown.

• Privy: Helps developers easily add secure login and wallet features to their dApps, so their end-users can easily onboard to Web3.
• Web3Auth: Simplifies access to Web3 apps by enabling users to log in with familiar methods like Google, Twitter, or email.
• Reown: Simplifies on-chain interactions via features like wallet login, transaction signing, and multi-chain support.

Other consideration was Coinbase Smart Wallet, an offering that integrates passkeys as a primary way of creating a smart account.

But these solutions all focused on lowering barrier of entry for crypto-newcomers with a focus on social logins or passkeys.

Our differentiators:

• Smart sessions (AKA session keys)
• Completely headless embedded wallet offering
• Intent-based outcomes (AKA enforced outcomes)
• Delegation framework

ERC-7715 introduced a more novel way of programming permissions through intent-based exchanges. I decided to consider other existing patterns to brainstorm how to best represent our vision.

‍

2. Concept Designs and Low-Fidelity Mockups

Starting with lo-fi mockups, I explored ways to visualize “enforced outcomes” and help users understand transaction conditions.

Since the concept is very new to the ecosystem, early feedback sessions focused on usability and comprehension of ERC-7715 concepts:

• Caveat enforcers
• Permissions picker
• Delegations
• Embedded / smart accounts
• Session keys
• ...and more

3. Mid- and High-Fidelity Mockups

As the designs progressed, I developed mid-fi and hi-fi mockups to bring more detail to the 7715 permission request screens.

Key screens, like the condition-setting UI, underwent several rounds of feedback and adjustments. Given the complexities of ERC-7715, each element had to balance clarity, value, understandability, and technical feasibility.

4. Rapid Prototyping

I created a series of rapid prototypes to showcase the end-to-end flows to be used in ongoing usability tests and internal feedback.

Why a high-fidelity prototype? This is a new, green-field way of permissioning across Web3. High-fidelity would allow us to better visually and interactively communicate concepts to research and feedback participants.

5. Demo delivery in Q4'24 + Ongoing user testing

Implementation is currently underway to release a demo to the public. More on this soon.

A key constraint to note: This would be built the Portfolio repo, but would use confirmation components that existed in a separate repo.

‍

Internal Usability test

Due to the novel nature of these designs within the Web3 ecosystem, I decided to conduct an internal usability test.

Participant overview: 7 total

• Internally recruited across customer success, NFT team, marketing, BizDev, engineering.
• 100% own MetaMask wallets and have experience holding or trading assets.
• About 50% of participants actively swap, buy, and manage their assets.
• All participants based in western hemisphere and speak English comfortably.

Key insights:

1. ‘Tell me only what I need to know, then show me what I need to do as a result.’ Rely on progressive disclosure to hide superfluous info.
2. Caveat enforcers require further copy refinement. Users understood the nature of enforcers, but many didn’t feel incentivized to utilize this feature.
3. No matter how “simple” onboarding can be, we can’t rely on users to understand the purpose and intent of smart accounts. There’s more work to be done to visually signify benefits/risks of using smart accounts.

Key quotes (all from separate participants):

I don’t want to select the account. I want the account selected for me and just tell me why. I don’t know why I would want to select one over the other. - Crypto-native

Feels very safe and I know exactly what I’m signing up for. I have control over it, too, which is not always the feeling that I have when signing requests for other contracts or transactions. - Crypto-comfortable

In my head, an enforced outcome is proof that I’m a founding member. Wouldn’t the outcome be a membership? - Crypto-novice

‍

Results and Impact

• Positive User Feedback‍
  • Rabby converts and early adopters expressed strong support for the feature, with feedback noting that “this solution needs to be heard.”
• Enhanced User Autonomy‍
  • Enforced outcomes allow users an unprecedented level of control over transaction permissions, meeting MetaMask’s goal to empower users with agency in a secure yet user-friendly manner.‍
• Leadership Recognition‍
  • Dan Finlay presented one of the key screens at the Edge City Lanna 2024 and shared it with Vitalik Buterin, highlighting the project’s innovative approach to permissions and autonomy.

‍

Key Takeaways

• Dealing with Unknowns‍
  • Tackling a new standard like ERC-7715 required adaptive problem-solving and continuous learning to design effectively for a concept that had no established precedent.
• Stakeholder Alignment‍
  • Managing diverse stakeholder inputs and expectations ensured the final design was technically viable, secure, and resonated with user needs.
• User-Centric Approach‍
  • By embedding user insights into every phase, the design successfully demystified enforced outcomes, making it accessible for both novice and experienced users.
• Staying human-centric‍
  • Designers are essential in translating technical concepts to usable flows.

‍

Conclusion

This project was a unique challenge in combining pioneering technology with user-centered design. Leading the Web Wallet design for MetaMask highlighted the importance of bridging technical and user-centric insights to produce a valuable solution geared for adoption.