MetaMask
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. Actively gave and solicited feedback from stakeholders in order to continually raise the bar for quality. Mentored junior designers, growing design culture by participating in recruiting, developing design principles, and improving design tools and process. Evangelized design and product thinking methodology within the context of blockchain. Demonstrated expertise in product development, design research, and design systems.
Role & Responsibilities
Founding Designer
Design Lead
User Research
Prototyping
Usability Testing
Visual Design
Brand
Design System
Products
MetaMask
Browser Extension
MetaMask
Mobile
Extension
Extension Redesign
The stakeholders had built a browser extension which made it easy to onboard and start using Web3 applications.
Research
The Challenge: Web3 Usage and Adoption
The crypto wallet's interaction model as a browser extension was a novel web design pattern enabled by blockchain technology. It allowed users to store crypto tokens, connect to web3 websites, and more. This presented new design challenges and opportunities to create interaction patterns that had never been seen before. Due to the privacy and security benefits of decentralized technologies, and the team's commitment to promoting these aspects of decentralization within the wallet, I had to consider many technical constraints and limitations from the start.
Product 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.
User Journey
User Persona & Journey
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.
User Flow
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
Collaborative design thinking workshop
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.
Prototype
Wireframe & Prototype
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.
UX Research
Usability Testing
As a designer, I understand the importance of validating 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.
Visual Design
Design System & Component Library
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.
Final Design
Thanks for reading!