MetaMask has played a key role in making Ethereum more accessible to users, largely thanks to its connection with ConsenSys. As a co-founder of Ethereum and ConsenSys, the team behind MetaMask has focused on developing tools that enable people to easily connect with decentralized applications. This has helped countless individuals engage with blockchain technology and explore the possibilities of navigating the crypto world seamlessly.
METAMASK
METAMASK
2024
Available as both a browser extension and mobile app, MetaMask allows users to manage their cryptocurrency and access blockchain-based services, all while prioritizing user privacy and control over their digital assets. With more than 30 million monthly active users globally, MetaMask stands out as one of the most widely used and trusted digital wallets in the crypto industry.
ROLE
DESIgn Lead
COMPANY
METAMASK, CONSENSYS
Industry
Web3
SERVICES
UI/UX Design, Design Systems
THE BRIEF
As the lead designer, I was tasked with creating an experience that allows users from around the world to buy and sell crypto on their own terms—whenever and however they choose—directly from their MetaMask wallet (via mobile app or desktop browser). By making it easier for users to access and manage their crypto, the buy and sell feature not only encourages user satisfaction but also boosts engagement within the MetaMask ecosystem from a business perspective. Overall, it’s a win-win.
The Consumer Gateway to Web3
How do we design a universal buy/sell feature that effectively addresses the varied needs of users across different regions, languages, and fiat currencies, ensuring they can easily purchase tokens through multiple payment options and also establish trust with partnered third-party providers?
UNDERSTANDING oUR USERS
We conducted interviews with numerous participants to explore their use cases and challenges with current buy/sell aggregators. Gaining insights into their needs, preferences, and frustrations played a crucial role in shaping the next steps of the design process.
Common pain points:
Complexity and Confusion
Individuals often face difficulties navigating multiple options and platforms. The variety of price comparisons, fees, and payment methods can overwhelm beginners and lead to confusion about the best choice.
Lack of Transparency
Individuals may encounter hidden fees, unfavorable exchange rates, or unclear terms that aren’t immediately apparent during the purchasing process. This can create mistrust and dissatisfaction.
Limited Payment Options
Aggregators may not support all preferred payment methods or local currencies, making it challenging for users in different regions to complete transactions smoothly and conveniently.
Common pain points:
Complexity and Confusion
Individuals often face difficulties navigating multiple options and platforms. The variety of price comparisons, fees, and payment methods can overwhelm beginners and lead to confusion about the best choice.
Lack of Transparency
Individuals may encounter hidden fees, unfavorable exchange rates, or unclear terms that aren’t immediately apparent during the purchasing process. This can create mistrust and dissatisfaction.
Limited Payment Options
Aggregators may not support all preferred payment methods or local currencies, making it challenging for users in different regions to complete transactions smoothly and conveniently.
PROTOTYPING & USABILITY TESTING
I developed a prototype based on user interviews and conducted usability testing with participants of varying crypto experience levels. Key feedback highlighted concerns about fee transparency, which affected user confidence. While users appreciated the ability to compare providers, navigating numerous payment options led to decision fatigue. This indicates a need to simplify choices and assist users in selecting the best option for their needs. Although users generally trusted the third-party providers linked to MetaMask, many expressed discomfort about being redirected without clearly suggesting that this would occur when selecting those options. This feedback is vital for guiding our future design iterations.
visualizing THE USER JOURNEY
I created a user flow as a visual mapping of the steps users take when interacting with the buy feature. This representation helped both developers and stakeholders understand how users navigate from start to finish. By visualizing user journeys, we were able to gain insights into user needs and preferences, allowing us to refine and enhance the overall user experience.
Select your region
Available payment methods based on region provides key information, such as the estimated time to receive their crypto and spending limits. This helps users make informed choices, reducing drop-offs and improving the ability to filter provider quotes that best suit their needs.
SOLUTION: ONE PAGE DEsign
The flexibility of an easy token selection, custom or preselected spend amounts, and the ability to change fiat currencies reduces friction by consolidating key decisions in one place, streamlining the buying process.
SOLUTION: REDUCE DECISION FATIGue
Building on previous insights, we've reduced the number of provider quotes to three options, sorted by the best rate and/or previously used, to minimize decision fatigue. Users can still access the full list of providers if desired.
DESIGNING FOR DESKTOP
At the time, the MetaMask portfolio (pDapp) was still in its early stages. While designing the buy/sell feature, I also helped establish the portfolio's design system to ensure consistency across all MetaMask products. This included setting standards for typography, color palette, icons, and components to support future development.
DASHBOARD - WEBSITE
While the mobile app prioritizes speed, in contrast, the Portfolio (pDapp) provides a more comprehensive view, allowing users to analyze their assets and make informed buying and selling decisions within a broader context.
component Variants & GUIDELINES
The design system consists of reusable components like buttons, forms, and navigation elements that streamline the design and development process. By leveraging these components across various parts of the product, we save both time and effort. Additionally, the system includes guidelines for using these elements, addressing layout, spacing, and other design aspects, which helps maintain consistency and coherence throughout the product. This ultimately enhances the user experience and fosters a unified brand identity.
Impact
79.5%^
In just three years, MetaMask has increased its global coverage for buying crypto by 79.5%, expanding from 34 to 189 countries. This means that about 96.9% of the world can now access MetaMask. This rapid expansion reflects its goal to become the primary Web3 gateway worldwide.
$140M+
In its best quarter, MetaMask recorded $140 million in revenue solely from its buying feature, marking a record high and reflecting its strong financial performance.
500%^
MetaMask expanded its user base from 5 million in 2020 to 30 million in 2023, showcasing a remarkable 500% increase in user adoption during that time.
