MetaMask Extension

Product Design | Brand | Leadership

Overview

As the Founding Product Designer at MetaMask, I Ied a collaborative design process from conception to launch, partnering with small, global teams of engineers, product managers, and researchers to identify user needs, define product strategy, and create roadmaps. Developed storyboards, prototypes, and high-fidelity visual design to effectively communicate interaction and design ideas.

Role & Responsibilities

  • Founding Designer

  • Design Lead

  • User Research

  • Prototyping

  • Usability Testing

  • Visual Design

  • Brand

  • Design System

My Role

As the sole designer, I had the opportunity to lead the redesign of the MetaMask extension product from concept to launch. My role was to guide early design strategy conversations and brainstorming sessions, collaborating closely with the founders and developers to come up with early-stage concepts. I developed wireframes, prototypes, and the design system from scratch, ensuring that the design would be intuitive and user-friendly. Additionally, I conducted UX research to test our designs and iterate based on user feedback, making sure that the final product would meet the evolving needs of the users.

The Challenge

When the first version of the product was released, it served as a proof of concept with several UX issues that needed to be addressed. The main challenge was to redesign the wallet from scratch while ensuring that the core features and capabilities for Web3 interactions were maintained. This meant that the design had to be completely overhauled to create an intuitive and user-friendly experience.

Solution

A comprehensive overhaul was undertaken. This started with a careful analysis of the existing product and its shortcomings, followed by a brainstorming session to generate ideas for improvement. The team then worked diligently to evaluate and refine these ideas, incorporating feedback from key stakeholders along the way. The resulting design represents a significant improvement to the user interface, information architecture and UX from the previous version, with a range of new features and functionality.

Approach

Goals

In order to ensure that the design of the wallet met the project goals, I focused on the following areas:

  • Improving usability by redesigning the layout, navigation, information architecture, colors and typography.

  • Streamlining the onboarding process to make it easier for new users to get started.

  • Revisiting web3 app transaction screens and interactions screens to increase comprehension of the various wallet states.

  • Creating a consistent user experience across all wallet screens.

  • Ensuring that the design meets the security and privacy goals of the project.

  • Leveraging the power of design systems to create efficient and accessible designs.

  • Designing new interaction patterns that are enabled by blockchain technology.

Insights

Early adopters of Metamask were developers who needed an easy, efficient way to test their Web3 applications, publish smart contracts, and explore new capabilities.

Early non-technical users of MetaMask were interested in the technology and its potential, but they were also naturally cautious and skeptical. They wanted to understand why they should use MetaMask, and what the technology could do for them.

Personas

Creating user personas at the start of the design process helps tailor design decisions to the needs of users. Factors such as motivations, needs, background, behavior, and purpose for using the product or service are considered, as well as user feedback and research. This ensures user personas accurately reflect the target users and helps gain better understanding of the user base.

Process

User Journey Mapping

The team collaborated to create a user flow diagram, which helped us identify any pain points in the flow. This enabled us to gain a better understanding of the overall user experience.

Design Thinking

We gathered together to take part in design thinking workshops, which provided us with the platform to collaborate and reflect on the different elements of a new design. The team had a flat structure and was highly collaborative, allowing for equal participation and discussion of ideas, where every person's thoughts were valued. We brainstormed and discussed a wide range of potential solutions, which ultimately served to inform the new version of the product. It was gratifying to see the power of collective thought at work, as everyone's individual perspective was taken into account and used to create valuable outcomes.

Information Architecture

Diagramming the information architecture is an essential part of the design process. It helps to visualize, organize, and understand complex systems. Diagrams give us a visual representation of the components of the wallet and their relationships. This also allows us to reconsider highly desired features and functionality that were not easily accessible.

Onboarding Flow

I used Figma to prototype the onboarding flow of the product in order to validate its design and identify potential pain points. Prototyping allowed me to quickly validate key assumptions and gain insights into how users felt about the flow. This iterative process allowed me to refine the onboarding flow in order to create the best possible user experience.

Send Flow

The sending flow is a multi-step process that enables users to send ERC20 tokens to any Ethereum address. We had to consider various aspects of blockchain interaction, such as gas fees selection, representing transaction times, and informing users if their transactions succeeded or failed, in order to provide this essential functionality.

Navigation

I explored various navigational patterns for switching between multiple accounts.

Usability Testing

It's important to validate design decisions through usability testing. In order to ensure that my design decisions were successful, I conducted a series of usability tests on my design options. By doing so, I was able to gain valuable insight into the effectiveness of my designs and make adjustments where necessary.

Design System

Part of the visual design phase was to ensure consistency across every screen of the product. The design system gave me a framework to make designs that were consistent, easy to understand, and accessible. Rules & guidelines let me get the job done quicker while still meeting user needs. Design systems really come in handy when it comes to creating designs quickly and effectively.

Learnings

The MetaMask extension was the first Web3 wallet that enabled developers and early adopters to use blockchain technologies with just a few clicks. With 20 million monthly active users and counting, I helped the team build the de facto wallet of today.

Working on a novel product in a nascent industry, there was no shortage of problems to be solved. Many of the UX and UI design patterns I helped define have become design standards today. I am proud of my contributions to the blockchain industry and eager to see where it goes from here.

Thanks for reading!