Company By
© 2022 Expedite Design. All Rights Reserved.
© 2022 Expedite Design. All Rights Reserved.
Tools
Metamask has over 10 million global users – making it one of the most widely-used wallets in the crypto space globally. However, if we talk about the overall user experience, there is always room for improvement. The official Metamask Chrome extension requires some UX tweaking and we at Expedite have handled that.
As a blockchain/web3 design agency, our primary inspiration was to enhance metamask’s experience in such a way that not only enables the user to use the product more easily but also play the part in the adoption of web3. The end goal is to create value in the web3 design world by proposing solutions to real-world problems through UX thinking and research.
The suggested timeline for this product was 1.5 months. In that duration, the entire UX and UI process was carried out along with the case study draft.
Research and understand
Information gathering and analysis
Design and testing
Itterating and prototyping
The revamp journey started with the most important phase, which is RESEARCH. The first step was to identify users and understand their pain points. To get diversity in the feedback, we tried to conduct interviews with users of diverse backgrounds.
Like the charity begins at home – we decided to test the product for ourselves first. The basic idea of the early-stage testing was to identify some problems that were already in our minds, being regular users of metamask. Furthermore – for a heads-up, we also checked the play store rating and comments (this really confirmed our bias!)
The biggest mystery was solved here! We ran 7 user interviews with diverse users to see what they had to say about Metamask extension. The scope of the interview was centered around using the extension for trades and swaps. The whole purpose was to identify what users look for in a crypto wallet app and how their experience is with Metamask.
After conducting the user interviews, we moved to the process of synthesizing the collected information with the help of:
Expeditors conducted an interactive affinity mapping session to break down the problems and challenges into categories. It also helped the team in targeting high-priority problems. It all came down to 3 major problems:
Here is what the outcome of affinity mapping looked like:
With the help of data collected from user interviews, multiple personas were created based on the discussion with our users, the nature of the problem they faced, and it’s impact on their overall product experience. Here is what it looked like:
.
Age: 44 years old
.
Education: Major in Design, Market Management
.
Hometown: Brazil
.
Family: Wife and Two kids
.
Occupation: Community Lead (Unipilot)
Online Interview
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Use Metamask for:
.
Trading and transaction ethereum assets
.
Utilization in crypto games platforms, NFTs and metaverse platforms
.
Voting platforms and tokens
.
Metamask is kind of a First Mover in Crypto Wallets Competition
.
Is compatible with a lot of platforms in crypto space
.
It’s efficient on desktop browsers, for mobile, he uses Trust Wallet
.
Help, support and guidance for technical terms like gas fee, transaction limit, nonce etc.
.
Certain limitation on transaction and better sync with etherscan
.
Better and faster system response on errors, status and alerts
.
Better information architecture in the product
Guidance On Fee Structure
Pedro feels that the app should convey the available fee structure, and should let the users know how and what factors will impact on the transaction, i. e speed, nonce, gass fee limitation, tolerance fee etc, and also what these terms mean.
Account Recovery & Management
Although pedro doesn’t use more than 2-3 accounts, he still thinks that it becomes hectic sometimes when he is using both accounts simultaneously.
Lack of System Response
Pedro feels that throughout the platform, and specifically during transactions, there are a lot of occasions where the system should respond/limit certain actions, but doesn’t do so.
For example: If I send 0 eth as a transaction, it shows me that the transactions have been sent, although when etherscan is being-checked, it’s obviously not sent. These types of issues might impact the user’s trust in the product.
High Gas Fees
Compared to other platforms like Coinbase, Pedro thinks metamask charges a high gas fee. Also, he added, that he never prefers swapping on metamask, and always use alternate platforms like uniswap exchanges for this purpose.
.
Age: 24 years old
.
Education: Major in Computer Science, Currently pursuing MBA
.
Hometown: Karachi, Pakistan.
.
Family: Not Married
.
Occupation: Blockchain Engineer and Developer
Online Interview
Use Metamask for:
.
Token Testing on test networks when developing deFi applications
.
Sending and Receiving Ethereum based tokens
.
Importing NFTs (occasionally)
.
Is lightweight, and never crashes
.
Has a browser extension, so its highly helpful during development testing
.
Solve common UX issues like notifications on transactions, alerts and error messages
.
Improve information customization by brining global features like sort and filter, global search and other features
.
Introduce concept of Derived Account for secondary accounts for better management
.
Introduce Dark Mode (Personal Preference as he’s a night owl :P)
High Gas Fees
Compared to other platforms like Coinbase and Trust Wallet, Saad thinks Metamask charges a high gas fee.
Transaction Problems
Saad often feels uncertain about the status of the transaction, as he has to manually check the activity section to be sure that the status is “confirmed”.
Multiple Accounts
It becomes hectic for Saad when there are multiple accounts created, as he has to manually check through the accounts list to figure out what are the recent accounts he has used.
Information Architecture
Saad is not a big fan of metamask’s way of showing important information, which often causes confusion during transactions. He couldn’t find the gas fee priority as it was named “Edit” as a link. Also, at one instance, he realized that the transaction was proceeding at 0.00 eth, which made him
skeptical about the metamask security protocols.
Lack of System Response
Saad also noticed that the system doesn’t bother letting him know about errors and status, which leaves him uncertain and confused
Journey mapping of our customers enabled us to visualize how users felt at each and every stage. It was helpful in identifying users’ pain points and what could be made better. Check out our customer journey here:
A snippet of our journey map on figma. Check the full journey map:
Since the wallet has several transactions, there is a huge set of records, which, for a normal user, might be overwhelming. What makes it increasingly overwhelming is that there’s no way of sorting and filtering transactions. Similar things were also noticed in the Settings section.
A big struggle for developers is switching accounts when there are multiple ones being created. Each time they have recalled the recently used account, or forgotten account name (which is a normal expectation from a human), they have to scroll through the entire accounts list.
Perhaps the biggest turnoff for every trader – who needs to know their crypto-net worth – is the poor asset management – showing only eth balance as the primary account balance, showing tokens with zero balance, no sorting nor token cap value – this makes the overall asset summary less comprehensive.
Some features of high importance like Priority Settings have been named Edit, which can make the user confused, might become while making a transaction. Similar things were also noted in settings, where important options weren’t labeled with the correct terminology.
Metamask doesn’t have a notification system that alerts users for these operations:
Transaction status
Error messages
Transaction failed
This creates issues specifically during transactions, where a lot of attention is required.
for ensuring that the transaction is operated safely and accurately.
Appropriate feedback and
notification system.
Proper Account and Asset Management with required filters.
No overwhelming information
We replaced the “Not Connected” status with a network icon for better visual recongnizability. User can hover to know what it is.
So the user can now directly search for his desired assets, or organize information according to their own preferences through filters.
Home Screen
No more scrolling through the bottom of the assets list to add custom token. You can now directly access the option here.
Wallet “Connected” Status Redesigned
We replaced the “Not Connected” status with a network icon for better visual recongnizability. User can hover to know what it is.
For proper information and customization, this is helpful for sorting through your assets and transaction history.
Import Token Option is Now Among Primary Options
No more scrolling through the bottom of the assets list to add custom token. You can now directly access the option here.
Wallet “Connected” Status Redesigned
We replaced the “Not Connected” status with a network icon for better visual recongnizability. User can hover to know what it is.
Filters
For proper information and customization, this is helpful for sorting through your assets and transaction history.
Just to make the access to the desired setting option faster.
So the user can have a precise overview of the network, sender information and the transaction amount.
Filters
For proper information and customization, this is helpful for sorting through your assets and transaction history.
As compared to the existing design, where it’s just shown as a link , we decided to make it a more prominent and clickable component.
Gas fee setting was revamped into collapsable modals for better information organization
Filters
For proper information and customization, this is helpful for sorting through your assets and transaction history.
Gas Priority Option
Turned Into Selectable
Chip
As compared to the existing design, where it’s just shown as a link , we decided to make it a more prominent and clickable component.
Given another opportunity in the future, we would love to continue exploring deeper into the possibilities that would enhance user experiences for crypto-wallet applications. With a large userbase, Metamask has so much potential. Improved UX would be a nudge in the right direction for exponential growth. With our re-design, we hope we were able to cater to a few major pain points of Metamask users. If you’re interested, feel free to interact with our prototype!
Your project deserves the best - and that's exactly what we're ready to deliver. Let's start today!
Schedule E-Coffee ☕️
We’re a Web3 game development and design company focused on onboarding users smoothly to the Web3 ecosystem!
© 2022 Expedite Design. All Rights Reserved.
