MetaMask Smart Accounts

Smart wallets and smart accounts exploded in 2023 due to ERC-4337. This new wave allowed many Web3 solutions to abstract away technical and complex layers that end-users didn't necessarily need to know in order to onboard. This is how MetaMask incorporated 4337 into our wallet.

Client
MetaMask
Service
UI/UX, user research, design strategy
Tools
Figma
Year
2024 - Present

Project overview

Project Overview

  • Project Name: Account portability
  • Role: Design Lead
  • Objective: Solve interoperability issues between smart/embedded accounts, enabling secure and flexible account delegation for new and existing MetaMask users.
  • Timeframe: September 2024 - present
  • Outcome: Delivered a fully functional proof-of-concept prototype and design guideline on embedded account portability.

Understanding the Problem Scope

  • Problem:
    • Account abstraction solutions allow users to onboard to dApps (decentralized applications) more easily. This is possible through social logins, passkeys, etc. But smart accounts created within those dApps cannot be used in an interoperable way.
  • Design challenges:
    • Navigating the ERC-4337 standard, which introduced technical possibilities for smart wallet and smart account solutions.
    • Anticipating user needs in an under-explored space, with limited existing user research.
  • Key design goals:
    • Create a way for users to easily engage with dApps.
    • Allow users to port their smart accounts to their MetaMask wallet.
    • Abstract away technical flows for both seasoned and new MetaMask users.

Stakeholder Management

Engagement Strategy:

  • Conducted ongoing alignment sessions with internal teams, including product managers, engineers, and leadership to ensure design feasibility.
  • Showed my designs early and often to design org for feedback.
  • Facilitated workshops with Delegation members to define product vision and iterate on early design concepts.

Outcomes:

  • Established trust with stakeholders by being responsive to feedback, resulting in a highly collaborative design process.
  • Successfully influenced key decisions, leading to a well-supported, user-centered final product.

Design Process

Discovery:

  • Competitor analyses on Privy and Coinbase smart wallet.
  • Quick lo-fi mocking designs based on feature requirements, so that I understand key interactions.
  • Workshops with engineers, Dan Finlay, key members of leadership, and my product manager.

Ideation & Prototyping:

  • Built low to high-fidelity prototypes, iterating quickly in response to stakeholder and user feedback.
  • Created user flows and wireframes to visually communicate complex pathways.

Handling Unknowns:

  • Embraced ambiguity by staying adaptable and frequently asking questions to validate assumptions.
  • Worked very closely with engineers to understand ERC specs, deletable framework, and interoperability.
  • Developed a really good understanding of the Delegatable Framework, ERC-7715 and EIP-7702.

Solution Overview:

  • An intuitive interface that allows users to create smart accounts and also port it to a MetaMask wallet.
  • We decided to A/B test two pathways to understand which one users preferred better. There was a chance neither resonated with our research participants.
    • Path 1: Create smart account first, then port account to MetaMask.
    • Path 2: Link with MetaMask Web Wallet first, then create smart account in dApp.
Testing one of the main flows^
Documenting scenario: If dApp is using another signer^
Documenting edge case: User has an existing login method in the dApp^

Results & Impact

Broader Impact:

  • Set a precedent for future ERC-4337 design solutions, helping define standards for what interoperable smart/embedded account UX might be like for MetaMask.

Feedback:

  • Positive stakeholder and user feedback, with particular praise for balancing complexity with usability.
  • Conducted internal usability studies to understand the mental models of users interacting with smart accounts and account interoperability.
    • MetaMask branding is too visually loud
    • dApp developers want to know if there is a UI kit to reference
    • End-users desired a central place to manage smart accounts (validated Permissions Portal idea)
    • End-users wanted a way to link an existing EOA
  • We need to define a clearer value prop for end-users

Reflection and Lessons Learned

  • Key Takeaways:
    • The importance of agile design and clear communication in uncertain and evolving spaces.
    • How proactive stakeholder management leads to smoother cross-functional alignment.
    • Insights on designing secure, user-friendly solutions within an evolving Web3 ecosystem.
  • Future Considerations:
    • Defining an even more seamless way for users to port their smart accounts to their MetaMask wallet. Majority of users during our A/B tests expressed a desire for a one-click solution for porting their accounts to an existing wallet.
    • Segment use cases based on the type of user: experienced Web3 users who are security-oriented vs.
Webflow IconBadge Text