mETAMASk

UX Redesign Casestudy

Tools

Figma

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.

Phase 1

Research and understand

Phase 2

Information gathering and analysis

Phase 3

Design and testing

Phase 4

Itterating and prototyping

01

Early Stage Tests

01

Affinity Mapping

01

Wireframes

01

Iterate

02

User Interviews

02

User Personas

02

User Interface Design

02

Final Prototype

02

User Interviews

03

Journey Mapping

03

Prototype and Test

02

Final Prototype

02

User Interviews

04

Issues Identified

03

Prototype and Test

02

Final Prototype

Phase ONE

Understanding user

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.

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

User Interviews

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.

Phase TWO

Information gathering & analysis

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 high-priority problems. It all came down to 3 major problems:

Here is what the outcome of affinity mapping looked like:

Usability Issues

System Visibility Issues

Information Architecture Issues

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

Pedro Ivo Bruder

Demographics

.

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.

Goals

Use Metamask for:

.

Trading and transaction ethereum assets

.

Utilization in crypto games platforms, NFTs and metaverse platforms

.

Voting platforms and tokens

Preference Reason.

.

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

Expectations

.

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

Challenges

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.

Saad Hameed

Demographics

.

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

Goals

Use Metamask for:

.

Token Testing on test networks when developing deFi applications

.

Sending and Receiving Ethereum based tokens

.

Importing NFTs (occasionally)

Preference Reason.

.

Is lightweight, and never crashes

.

Has a browser extension, so its highly helpful during development testing

Expectations

.

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)

Challenges

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

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:

Issues Identified

01

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.

02

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.

03

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.

04

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.

05

No Notification break-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.

The gist of all research on what problems users are facing, and What they want to be better about are these 3 points:

01

Appropriate feedback and
notification system.

02

Proper Account and Asset Management with required filters.

03

No overwhelming information

Phase Three

DeSign and testing

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.

Search Bar Added

So the user can now directly search for his desired assets, or organize information according to their own preferences through filters.

Home Screen

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.

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.

Settings

Just to make the access to the desired setting option faster.

Sender information
And Network Status
Refined

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.

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.

Gas Fee Setting

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.

Phase four

iTERATION AND pROTOTYPE

fINAL tHOUGHTS

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!

Kickstart Your

WEB3
SPACE

Need UI/UX for your project? You're at the right place!

CONTACT US

Company By