MetaMask UX Redesign Casestudy

The Idea

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.

Timeline

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.

Understanding Users

The revamp journey was started with the most important phase, which is the RESEARCH. The first step was to identify the users and understand their pain points. To get diversity in the feedback, we tried to conduct interviews with users of diverse backgrounds.

a. Early Stage Testing
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 a regular users of metamask. Furthermore – for a heads-up, we also checked the play store rating and comments (this really confirmed our bias!).

b. User Interviews
The biggest mystery was solved here! We ran 7 user interviews with diverse users to see what they have to say about Metamask extension. The scope of the interview was centered around using the extension for trade and swap. 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:

Affinity Mapping

Expeditors conducted an interactive affinity mapping session to break down the problems and challenges into categories. It also helped the team in targeting the high-priority problems. It all came down to 3 major problems:

System Visibility Issues
Information Architecture Issues
Usability Issues

Here is what the outcome of affinity mapping looked like:

User Personas

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 prodcut experience. Here is what it looked like:

Journey Mapping

Journey mapping of our customers enabled us to visualize how the users felt at each and every stage. It was helpful in identifying the users’ pain points and what could be made better. Check out our customer journey here:

Issues Identified

No Notificationbreak-down and Feedback System
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.

Information Organization Tools Missing
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.

Account Management
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.

Assets Management
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.

Area of Improvement in UX Writing
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.

The gist of all research on what problem users are facing, and what they want to be better are these 3 points:
– Appropriate feedback and notification system.
– Proper Account and Asset Management with required filters.
– No overwhelming information

For the design system, we started off with Design Guidelines. The team respected Metamask’s existing brand design and decided to stick with it. It will also ensure the similar mental model for the users. Secondly, the basic objective of this case study is to suggest improvements of the user experience of Metamask and create value for its millions of users.

Major Screens

Home Screen

FIlters Added

For proper information and customization, this is helpful for sorting through your assets and transaction history.

Settings

Confirm Transaction

Gas Fee Settings

Screens

Testing and Feedback

After the wireframes were completed by the team. We did a small-scale usability testing to evaluate the design. Our users found the improved design to be much better and with a smooth user experience and were easily able to notice the improved functionality. Furthermore, the users were impressed with the overall flow of information and account management options.

Given another opportunity in the future, we would love to continue exploring deeper into the possbilities that would enhance user experiences for the crypto wallet appplications. With a large userbase, Metamask has so much potential. Improved UX would be a nudge in the right direction for its exponential growth. With our re-design, we hope we were able to cater to a few major pain points of the Metamask users. If you’re interested, feel free to interact with our prototype!

Suggested articles