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!