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. Stakeholder Management and Requirements Gathering

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

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.

‍

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